fix: Fix sever/client mismatch due to time/date on Tweet component (#673

)
MaximeHeckel · Jan 5, 2024 · e84d928 · e84d928 · vercel · Jan 5, 2024
1 parent fb9c8d1
commit e84d928
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/core/components/Tweet/Tweet.tsx b/core/components/Tweet/Tweet.tsx
@@ -178,6 +178,7 @@ const Tweet = (props: Props) => {
  <time
  title={`Time Posted: ${createdAt.toUTCString()}`}
  dateTime={createdAt.toISOString()}
+ suppressHydrationWarning
  >
  {format(createdAt, 'h:mm a - MMM d, y')}
  </time>

diff --git a/pages/design.tsx b/pages/design.tsx
@@ -32,7 +32,7 @@ import Logo from '@core/components/Logo';
 import Glow from '@core/components/Glow';
 import CodeBlock from '@core/components/Code/CodeBlock';
 import Seo from '@core/components/Seo';
-// import Tweet from '@core/components/Tweet';
+import Tweet from '@core/components/Tweet';
 import Layout from '@core/layout';
 import { getTweets } from 'lib/tweets';
 import dynamic from 'next/dynamic';
@@ -144,7 +144,7 @@ const Label = styled('p', {
  marginBottom: '8px',
 });
 
-export default function Design(_props: { tweets: Record<string, NewTweet> }) {
+export default function Design(props: { tweets: Record<string, NewTweet> }) {
  const { dark } = useTheme();
  const [showSearch, setShowSearch] = React.useState(false);
  const [email, setEmail] = React.useState('');
@@ -1290,7 +1290,7 @@ function sayHi(name) {
  </Button>
  <Search onClose={() => setShowSearch(false)} open={showSearch} />
  </Flex>
- {/* <Flex
+ <Flex
  alignItems="start"
  as="section"
  css={{ alignSelf: 'stretch' }}
@@ -1300,7 +1300,7 @@ function sayHi(name) {
  >
  <H2>Tweet</H2>
  <Tweet tweet={props.tweets['1386013361809281024']} />
- </Flex> */}
+ </Flex>
  <Flex
  alignItems="start"
  as="section"