LocalDate and NoSSR components to render localized dates only on client #1831
Conversation
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
| setClient(true) | ||
| }, []) | ||
|
|
||
| return <>{isClient ? children : onSSR}</> |
There was a problem hiding this comment.
Any need for the fragment wrapper?
And maybe just null for onSSR default?
ChristopherChudzicki
approved these changes
Nov 18, 2024
jonkafton
added a commit
that referenced
this pull request
Nov 20, 2024
* Release 0.24.3 * Release date for 0.24.3 * Server rendered search page results * v2 drawer certification updates (#1823) * update certification display in v2 drawer to match latest designs * don't show price info item if runs have differing data * MicroMasters not Micromasters * if there is no price for the certificate but it's indicated that one is included, display that * if resource is free, includes a certification but has no prices, still display the pill in the info item * generate migration for MicroMasters spelling change * fix certificate pill padding on mobile * Unit channel page and search prefetch * Featured list and testimonials only for unit channels * v2 learning resource drawer formats and location (#1826) * add format info item * display location if format is in_person * add tests * also show location for hybrid courses * LocalDate and NoSSR components to render localized dates only on client * Revert "LocalDate and NoSSR components to render localized dates only on client" This reverts commit b4ccd6d. * LocalDate and NoSSR components to render localized dates only on client (#1831) * LocalDate and NoSSR components to render localized dates only on client * Remove unnecessary React.Fragment * separate starts and as taught in, show anytime availability (#1828) * refactor starts / as taught in functionality to show on separate lines, show "anytime" in starts if availability is anytime * fix rebase mishap * Map address search params * Search params test * Update dependency pytest-cov to v6 (#1818) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency safety to v3 (#1819) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * URL search param validation anf transforms to align with course-search-utils * Update dependency django-anymail to v12 (#1815) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * vector search endpoint (#1827) * adding initial vector search view * adding working vector results endpoint * regenerate openapi spec * fixing format of returned results * adding test * patching qdrant client * moving to v0 api * switch to custom serializer for vector search * fix v0 url * using minimal serializer * returning minimal response for vector results * regenerate spec * adding some other useful bits to response * fixing response for empty query and adjusting test * regenerate spec * uninheriting from searchrequest serializer * updating oai spec * updating oai spec * Update dependency @mui/lab to v6.0.0-beta.15 (#1830) * Update dependency @mui/lab to v6.0.0-beta.15 * update lockfile --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: shankar ambady <[email protected]> * Update to use validators from course-search-utils --------- Co-authored-by: Doof <[email protected]> Co-authored-by: Carey P Gumaer <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Shankar Ambady <[email protected]> Co-authored-by: shankar ambady <[email protected]>
mbertrand
pushed a commit
that referenced
this pull request
Nov 22, 2024
…nt (#1831) * LocalDate and NoSSR components to render localized dates only on client * Remove unnecessary React.Fragment
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 are the relevant tickets?
Fixes https://github.com/mitodl/hq/issues/6083
Description (What does it do?)
Provides a <NoSSR> utility component that renders children only after it has first rendered (ie. always on the client).
Provides <LocalDate> component that for displaying dates adjusted to the user's timezone with the <NoSSR> wrapper, that may otherwise cause a hydration error due a mismatch between the server and client rendered display dates.
Wraps all uses of
moment().format()with <LocalDate> or <NoSSR>.Sets
TZ=UTCon the Next.js server environment to that hydration errors will be triggered during development (for anyone not on GMT+0).How can this be tested?
Find a course that has a start time between midnight and midnight minus your UTC offset (ie. 5am in EST), e.g. "Professional Certificate in Data Engineering".
Ensure that the start date renders correctly without any hydration error in the console. The above course has a start date of 2024-11-27T00:00:00Z, so should display "November 26, 2024" in EST, though would otherwise render on the UTC server as "November 27, 2024", causing the hydration error.