From 5c9acb1cb3bfe341378b91bbed344dd7202a00d7 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 14 Apr 2024 01:39:30 +0300
Subject: fix(web): Fix some JS console errors in the preview page

---
 apps/web/components/dashboard/preview/BookmarkPreview.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'apps/web/components/dashboard/preview/BookmarkPreview.tsx')

diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index 4cd9199d..73e49376 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { TagsEditor } from "@/components/dashboard/bookmarks/TagsEditor";
 import { Separator } from "@/components/ui/separator";
@@ -39,15 +40,23 @@ function ContentLoading() {
 }
 
 function CreationTime({ createdAt }: { createdAt: Date }) {
+  const [fromNow, setFromNow] = useState("");
+  const [localCreatedAt, setLocalCreatedAt] = useState("");
+
+  // This is to avoid hydration errors when server and clients are in different timezones
+  useEffect(() => {
+    setFromNow(dayjs(createdAt).fromNow());
+    setLocalCreatedAt(createdAt.toLocaleString());
+  }, [createdAt]);
   return (
     <Tooltip delayDuration={0}>
       <TooltipTrigger asChild>
         <span className="flex w-fit gap-2">
-          <CalendarDays /> {dayjs(createdAt).fromNow()}
+          <CalendarDays /> {fromNow}
         </span>
       </TooltipTrigger>
       <TooltipPortal>
-        <TooltipContent>{createdAt.toLocaleString()}</TooltipContent>
+        <TooltipContent>{localCreatedAt}</TooltipContent>
       </TooltipPortal>
     </Tooltip>
   );
@@ -127,7 +136,7 @@ export default function BookmarkPreview({
   );
 
   return (
-    <div className="grid grid-rows-3 gap-2 overflow-hidden bg-background lg:grid-cols-3 lg:grid-rows-none">
+    <div className="grid h-full grid-rows-3 gap-2 overflow-hidden bg-background lg:grid-cols-3 lg:grid-rows-none">
       <div className="row-span-2 h-full w-full overflow-auto p-2 md:col-span-2 lg:row-auto">
         {isBookmarkStillCrawling(bookmark) ? <ContentLoading /> : content}
       </div>
-- 
cgit v1.2.3-70-g09d2