From 7956e9fa6772ab57a0794fb7cba7e9d9c0bd7878 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sat, 28 Dec 2024 12:30:24 +0000
Subject: feat: Implement the all highlights page. Fixes #620

---
 apps/web/components/dashboard/preview/BookmarkPreview.tsx | 15 ++-------------
 1 file changed, 2 insertions(+), 13 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 b854146c..c257d902 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import Link from "next/link";
 import { BookmarkTagsEditor } from "@/components/dashboard/bookmarks/BookmarkTagsEditor";
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
@@ -12,10 +11,9 @@ import {
   TooltipPortal,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import useRelativeTime from "@/lib/hooks/relative-time";
 import { useTranslation } from "@/lib/i18n/client";
 import { api } from "@/lib/trpc";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
 import { CalendarDays, ExternalLink } from "lucide-react";
 
 import {
@@ -35,8 +33,6 @@ import LinkContentSection from "./LinkContentSection";
 import { NoteEditor } from "./NoteEditor";
 import { TextContentSection } from "./TextContentSection";
 
-dayjs.extend(relativeTime);
-
 function ContentLoading() {
   return (
     <div className="flex w-full flex-col gap-2">
@@ -48,14 +44,7 @@ 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]);
+  const { fromNow, localCreatedAt } = useRelativeTime(createdAt);
   return (
     <Tooltip delayDuration={0}>
       <TooltipTrigger asChild>
-- 
cgit v1.2.3-70-g09d2