Client side rendered scorecard tab for cricket#16155
Draft
Jakeii wants to merge 10 commits into
Draft
Conversation
Jakeii
force-pushed
the
jlk/client-side-cricket-scorecard
branch
from
b705b7f to
d6c9f5a
Compare
Jakeii
changed the title
Jakeii
force-pushed
the
jlk/client-side-cricket-scorecard
branch
from
14f74c4 to
5dde72f
Compare
Jakeii
force-pushed
the
jlk/client-side-cricket-scorecard
branch
from
6a0430c to
0e206c7
Compare
github-actions
Bot
removed
the
run_chromatic
github-actions
Bot
removed
the
run_chromatic
github-actions
Bot
removed
the
run_chromatic
Jakeii
force-pushed
the
jlk/client-side-cricket-scorecard
branch
from
23eb735 to
e4194d3
Compare
github-actions
Bot
removed
the
run_chromatic
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this change?
Add a client-side rendered scorecard tab to the cricket match header
When the scorecard tab is clicked it will replace the main page contents i.e the liveblog or match report contents when clicked, it doesn't need to handle clicking back to the liveblog or match report as they are just links and cause a full page load when clicked.
This uses the react
createRootandrenderfunctions to render the scorecard.This is not putting it into production yet, there's still some other work to fetch the cricket data to do first. I've turned the
CricketScorecardPageNewcomponent and story into a test bed for it with some storybook UI tests, as we won't need the cricket score page anymore.Why?
Unfortunately we can't have a separate page for the cricket data as we do for football data as there isn't currently a scorecard page in the app, so it would be a significant apps effort to get that working. So a client-side solution was needed.
Second unfortunately we don't really want to wrap the entire liveblog and match report in an island, that would be a very large payload and require passing the entire live blog or article content as props to said island.
CSS-only was also explored however these aren't accessible to screen-readers.
So we found 2 methods use
createRootandrenderor usecreatePortal, createPortal required clearing the contents first via.innerHTML = '', butcreateRootwill happily replace the contents on it's own so we went with that solution.