chore: replace dayjs with data-fns

4 files changed, 7 insertions, 15 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkFormattedCreatedAt.tsx b/apps/web/components/dashboard/bookmarks/BookmarkFormattedCreatedAt.tsx
index a3e5d3b3..7c254336 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkFormattedCreatedAt.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkFormattedCreatedAt.tsx
@@ -1,8 +1,8 @@
-import dayjs from "dayjs";
+import { format, isAfter, subYears } from "date-fns";
 
 export default function BookmarkFormattedCreatedAt(prop: { createdAt: Date }) {
-  const createdAt = dayjs(prop.createdAt);
-  const oneYearAgo = dayjs().subtract(1, "year");
-  const formatString = createdAt.isAfter(oneYearAgo) ? "MMM D" : "MMM D, YYYY";
-  return createdAt.format(formatString);
+  const createdAt = prop.createdAt;
+  const oneYearAgo = subYears(new Date(), 1);
+  const formatString = isAfter(createdAt, oneYearAgo) ? "MMM d" : "MMM d, yyyy";
+  return format(createdAt, formatString);
 }
diff --git a/apps/web/components/dashboard/highlights/AllHighlights.tsx b/apps/web/components/dashboard/highlights/AllHighlights.tsx
index 0b90714a..c7e809ec 100644
--- a/apps/web/components/dashboard/highlights/AllHighlights.tsx
+++ b/apps/web/components/dashboard/highlights/AllHighlights.tsx
@@ -7,8 +7,6 @@ import { Input } from "@/components/ui/input";
 import useRelativeTime from "@/lib/hooks/relative-time";
 import { Separator } from "@radix-ui/react-dropdown-menu";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
 import { Dot, LinkIcon, Search, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { useInView } from "react-intersection-observer";
@@ -22,8 +20,6 @@ import {
 
 import HighlightCard from "./HighlightCard";
 
-dayjs.extend(relativeTime);
-
 function Highlight({ highlight }: { highlight: ZHighlight }) {
   const { fromNow, localCreatedAt } = useRelativeTime(highlight.createdAt);
   const { t } = useTranslation();
diff --git a/apps/web/lib/hooks/relative-time.ts b/apps/web/lib/hooks/relative-time.ts
index f7c38497..8fefa233 100644
--- a/apps/web/lib/hooks/relative-time.ts
+++ b/apps/web/lib/hooks/relative-time.ts
@@ -1,8 +1,5 @@
 import { useEffect, useState } from "react";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-dayjs.extend(relativeTime);
+import { formatDistanceToNow } from "date-fns";
 
 export default function useRelativeTime(date: Date) {
   const [state, setState] = useState({
@@ -13,7 +10,7 @@ export default function useRelativeTime(date: Date) {
   // This is to avoid hydration errors when server and clients are in different timezones
   useEffect(() => {
     setState({
-      fromNow: dayjs(date).fromNow(),
+      fromNow: formatDistanceToNow(date, { addSuffix: true }),
       localCreatedAt: date.toLocaleString(),
     });
   }, [date]);
diff --git a/apps/web/package.json b/apps/web/package.json
index affbb48f..c89a5bca 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -64,7 +64,6 @@
     "cmdk": "^1.1.1",
     "csv-parse": "^5.5.6",
     "date-fns": "^3.6.0",
-    "dayjs": "^1.11.10",
     "drizzle-orm": "^0.44.2",
     "fastest-levenshtein": "^1.0.16",
     "i18next": "^23.16.5",