Skip to content

Commit

Permalink
prevent hydration errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@finlay-jisc
finlay-jisc committed Oct 17, 2023
1 parent 7729bc6 commit 2d4a553
Show file tree
Hide file tree
Showing 11 changed files with 50 additions and 16 deletions.
2 changes: 1 addition & 1 deletion api/src/components/flag/controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const createFlag = async (

if (doesDuplicateFlagExist) {
return response.json(400, {
message: 'An unresolved flag created by you, for this publication and category already exists.'
message: 'An unresolved flag created by you for this publication and category already exists.'
});
}

Expand Down
7 changes: 6 additions & 1 deletion ui/src/components/ApprovalsTracker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,12 @@ const ApprovalsTracker: React.FC<Props> = (props): React.ReactElement => {
</td>
<td className="whitespace-nowrap px-6 py-4 text-sm text-grey-900 duration-500 dark:text-white-50">
{isCorrespondingUser && !author.linkedUser && author.reminderDate ? (
<>Reminder sent at {Helpers.formatDateTime(author.reminderDate, 'short')}</>
<>
Reminder sent at{' '}
<time suppressHydrationWarning>
{Helpers.formatDateTime(author.reminderDate, 'short')}
</time>
</>
) : author.linkedUser === props.publicationVersion.createdBy ? (
<>Corresponding author</>
) : author.confirmedCoAuthor ? (
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/BlogCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const BlogCard: React.FC<Props> = (props) => {
{shortBlogText}
</div>
<p className="blog-card-footer text-xs font-medium tracking-wide text-grey-800 transition-colors dark:text-grey-100">
By {props.author} | {Helpers.formatDate(props.publishedDate)}
By {props.author} | <time suppressHydrationWarning>{Helpers.formatDate(props.publishedDate)}</time>
</p>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/Flag/Comment/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const Comment: React.FC<Props> = (props): React.ReactElement => (
{props.flagComment.user.firstName} {props.flagComment.user.lastName}
</span>
<span className="block text-xs text-grey-500 transition-colors duration-500 group-hover:underline dark:text-white-100">
Posted: {Helpers.formatDate(props.flagComment.createdAt)}
Posted: <time suppressHydrationWarning>{Helpers.formatDate(props.flagComment.createdAt)}</time>
</span>
</Components.Link>
<div className="col-span-12 lg:col-span-8">
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/Flag/Preview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const Preview: React.FC<Props> = (props) => (
</span>
<span className="ml-6 text-sm text-grey-600 transition-colors duration-500 dark:text-grey-100">
Flagged by {props.flag.user.firstName} {props.flag.user.lastName},{' '}
{Helpers.formatDate(props.flag.createdAt)}
<time suppressHydrationWarning>{Helpers.formatDate(props.flag.createdAt)}</time>
</span>
</Components.Link>
);
Expand Down
10 changes: 8 additions & 2 deletions ui/src/components/Publication/BookmarkedPublications/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,17 @@ const BookmarkedPublications: React.FC<Props> = (props): React.ReactElement => {
</span>
{props.publication.publishedDate ? (
<span className="text-xs leading-3 text-grey-600 transition-colors duration-500 dark:text-grey-100 ">
Published: {Helpers.formatDate(props.publication.publishedDate)}
Published:{' '}
<time suppressHydrationWarning>
{Helpers.formatDate(props.publication.publishedDate)}
</time>
</span>
) : (
<span className="text-xs leading-3 text-grey-600 transition-colors duration-500 dark:text-grey-100 ">
Last updated: {Helpers.formatDate(props.publication.updatedAt)}
Last updated:{' '}
<time suppressHydrationWarning>
{Helpers.formatDate(props.publication.updatedAt)}
</time>
</span>
)}
</div>
Expand Down
7 changes: 5 additions & 2 deletions ui/src/components/Publication/Creation/LinkedItems/LinkedPublicationRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,12 @@ const LinkedPublicationRow: React.FC<Props> = (props): React.ReactElement => {
{props.linkedPublication.title}
</p>
<div className="flex items-center space-x-2">
<span className="text-xs text-grey-700 transition-colors duration-500 dark:text-white-100">
<time
className="text-xs text-grey-700 transition-colors duration-500 dark:text-white-100"
suppressHydrationWarning
>
{Helpers.formatDate(props.linkedPublication.publishedDate)},
</span>
</time>
<span className="text-sm text-grey-700 transition-colors duration-500 dark:text-white-100">
{props.linkedPublication.authorFirstName[0]}. {props.linkedPublication.authorLastName}
</span>
Expand Down
7 changes: 5 additions & 2 deletions ui/src/components/Publication/Creation/LinkedItems/LinkedPublicationsCombobox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,11 @@ const LinkedPublicationsCombobox: React.FC<LinkedPublicationsComboboxProps> = (p
<p className="text-grey-800">{publicationVersion.title}</p>
<div className="flex items-center space-x-2">
<span className="text-xs text-grey-700">
{publicationVersion.publishedDate &&
Helpers.formatDate(publicationVersion.publishedDate)}
{publicationVersion.publishedDate && (
<time suppressHydrationWarning>
{Helpers.formatDate(publicationVersion.publishedDate)}
</time>
)}
,
</span>
<span className="text-sm text-grey-700">
Expand Down
10 changes: 8 additions & 2 deletions ui/src/components/Publication/SimpleResult/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,17 @@ const SimpleResult: React.FC<Props> = (props): React.ReactElement => {
</span>
{props.publicationVersion.publishedDate ? (
<span className="text-xs leading-3 text-grey-600 transition-colors duration-500 dark:text-grey-100 ">
Published: {Helpers.formatDate(props.publicationVersion.publishedDate)}
Published:{' '}
<time suppressHydrationWarning>
{Helpers.formatDate(props.publicationVersion.publishedDate)}
</time>
</span>
) : (
<span className="text-xs leading-3 text-grey-600 transition-colors duration-500 dark:text-grey-100 ">
Last updated: {Helpers.formatDate(props.publicationVersion.updatedAt)}
Last updated:{' '}
<time suppressHydrationWarning>
{Helpers.formatDate(props.publicationVersion.updatedAt)}
</time>
</span>
)}
</div>
Expand Down
12 changes: 10 additions & 2 deletions ui/src/pages/blog/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,8 @@ type Props = {

const IndividualBlogPage: NextPage<Props> = (props) => {
const router = useRouter();
const { title, author, content, publishedDate } = props.blog.fields;
const { title, author, content } = props.blog.fields;
const [publishedDate, setPublishedDate] = React.useState(String(props.blog.fields.publishedDate));

const { canGoBack } = router.query as { canGoBack: string };

Expand All @@ -187,6 +188,13 @@ const IndividualBlogPage: NextPage<Props> = (props) => {

const pageTitle = `${title} - ${Config.urls.base.title}`;

// This is required to ensure that we don't encounter hydration errors when we format the published
// date on the client. Normally we use suppressHydrationWarning but that only works one level down,
// and we're passing the value to a subcomponent.
React.useEffect(() => {
setPublishedDate(Helpers.formatDate(props.blog.fields.publishedDate));
}, [props.blog.fields.publishedDate]);

return (
<>
<Head>
Expand All @@ -211,7 +219,7 @@ const IndividualBlogPage: NextPage<Props> = (props) => {
<Components.PageTitle text={title} className="!mb-4" />
<Components.PageSubTitle
className="text-base font-medium"
text={`Written by ${author} on ${Helpers.formatDate(publishedDate)}`}
text={`Written by ${author} on ${publishedDate}`}
/>
<div className="dark:text-white-50">
{documentToReactComponents(content, renderOptions)}
Expand Down
5 changes: 4 additions & 1 deletion ui/src/pages/publications/[id]/flag/[flagId]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,10 @@ const FlagThread: Next.NextPage<Props> = (props): JSX.Element => {

<p className="text-grey-700 transition-colors duration-500 dark:text-grey-100">
This publication was red flagged on{' '}
<span className="italic">{Helpers.formatDate(data.createdAt)}</span>, by{' '}
<time className="italic" suppressHydrationWarning>
{Helpers.formatDate(data.createdAt)}
</time>
, by{' '}
<Components.Link
href={`${Config.urls.viewUser.path}/${data.user.id}`}
className="text-teal-500 underline"
Expand Down

0 comments on commit 2d4a553

Please sign in to comment.