Merge pull request #141 from oracle/FixHydrationErrors

Fix hydration errors
oracle · Oct 30, 2024 · bf73d8e · bf73d8e
2 parents dabf3d4 + 2c82af5
commit bf73d8e
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 8 deletions.
diff --git a/templates/ords-remix-jwt-sample/app/components/concerts/ConcertCard.tsx b/templates/ords-remix-jwt-sample/app/components/concerts/ConcertCard.tsx
@@ -95,7 +95,7 @@ function ConcertCard(props: ConcertCardProps) {
             </Link>
             <div className="flex items-center">
               <CalendarMonth />
-              <p className="font-sans font-extralight">
+              <p className="font-sans font-extralight" suppressHydrationWarning>
                 { concertDateString }
               </p>
             </div>

diff --git a/templates/ords-remix-jwt-sample/app/components/concerts/ConcertDetails.tsx b/templates/ords-remix-jwt-sample/app/components/concerts/ConcertDetails.tsx
@@ -50,7 +50,7 @@ function ConcertDetails(props: ConcertDetailsProps) {
           <h1 className="mb-5 text-justify text-xl font-bold">
             Additional Details
           </h1>
-          <p className="mb-2 text-justify font-normal">
+          <p className="mb-2 text-justify font-normal" suppressHydrationWarning>
             {`Get ready for an unforgettable evening with ${concert.items[0].artist_name}!
                     Join us at ${concert.items[0].venue_name} on ${concertDateString} for a night of incredible
                     music and electrifying performances.

diff --git a/templates/ords-remix-jwt-sample/app/components/homepage/ConcertCard.tsx b/templates/ords-remix-jwt-sample/app/components/homepage/ConcertCard.tsx
@@ -59,7 +59,7 @@ function ConcertCard(props: ConcertCardProps) {
             </div>
             <div className="flex items-center">
               <CalendarMonth />
-              <p className="font-sans font-extralight">
+              <p className="font-sans font-extralight" suppressHydrationWarning>
                 { concertDateString }
               </p>
             </div>

diff --git a/templates/ords-remix-jwt-sample/app/components/homepage/Timeline.tsx b/templates/ords-remix-jwt-sample/app/components/homepage/Timeline.tsx
@@ -128,9 +128,9 @@ function Timeline(props: TimelineProps) {
                   },
                 }}
               >
-                <StyledTab className="w-1/3" label={today.toDateString()} {...a11yProps(0)} />
-                <StyledTab className="w-1/3" label={tomorrow.toDateString()} {...a11yProps(1)} />
-                <StyledTab className="w-1/3" label={dayAfterTomorrow.toDateString()} {...a11yProps(LAST_TAB)} />
+                <StyledTab className="w-1/3" label={today.toDateString()} {...a11yProps(0)} suppressHydrationWarning />
+                <StyledTab className="w-1/3" label={tomorrow.toDateString()} {...a11yProps(1)} suppressHydrationWarning />
+                <StyledTab className="w-1/3" label={dayAfterTomorrow.toDateString()} {...a11yProps(LAST_TAB)} suppressHydrationWarning />
               </Tabs>
             </div>
           </Box>

diff --git a/templates/ords-remix-jwt-sample/app/components/private/FollowedEventCard.tsx b/templates/ords-remix-jwt-sample/app/components/private/FollowedEventCard.tsx
@@ -38,7 +38,7 @@ function FollowedEventCard(props: FollowedEventCardProps) {
           <div className="mx-4">
             <div className="mb-2 flex items-center">
               <CalendarMonth />
-              <p className="font-sans font-extralight">
+              <p className="font-sans font-extralight" suppressHydrationWarning >
                 { concertDateString }
               </p>
             </div>

diff --git a/templates/ords-remix-jwt-sample/app/components/search/ConcertResultCard.tsx b/templates/ords-remix-jwt-sample/app/components/search/ConcertResultCard.tsx
@@ -49,7 +49,7 @@ function ConcertResultCard(props: ConcertResultCardProps) {
               </h1>
               <div className="flex items-center">
                 <CalendarMonth />
-                <p className="font-sans font-extralight">
+                <p className="font-sans font-extralight" suppressHydrationWarning>
                   { concertDateString }
                 </p>
               </div>