diff options
| -rw-r--r-- | apps/mobile/components/highlights/HighlightCard.tsx | 7 | ||||
| -rw-r--r-- | apps/mobile/package.json | 1 | ||||
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/BookmarkFormattedCreatedAt.tsx | 10 | ||||
| -rw-r--r-- | apps/web/components/dashboard/highlights/AllHighlights.tsx | 4 | ||||
| -rw-r--r-- | apps/web/lib/hooks/relative-time.ts | 7 | ||||
| -rw-r--r-- | apps/web/package.json | 1 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 11 |
7 files changed, 13 insertions, 28 deletions
diff --git a/apps/mobile/components/highlights/HighlightCard.tsx b/apps/mobile/components/highlights/HighlightCard.tsx index fd5ff752..31b3c829 100644 --- a/apps/mobile/components/highlights/HighlightCard.tsx +++ b/apps/mobile/components/highlights/HighlightCard.tsx @@ -3,8 +3,7 @@ import * as Haptics from "expo-haptics"; import { useRouter } from "expo-router"; import { Text } from "@/components/ui/Text"; import { useQuery } from "@tanstack/react-query"; -import dayjs from "dayjs"; -import relativeTime from "dayjs/plugin/relativeTime"; +import { formatDistanceToNow } from "date-fns"; import { ExternalLink, Trash2 } from "lucide-react-native"; import type { ZHighlight } from "@karakeep/shared/types/highlights"; @@ -13,8 +12,6 @@ import { useTRPC } from "@karakeep/shared-react/trpc"; import { useToast } from "../ui/Toast"; -dayjs.extend(relativeTime); - // Color map for highlights (mapped to Tailwind CSS classes used in NativeWind) const HIGHLIGHT_COLOR_MAP = { red: "#fecaca", // bg-red-200 @@ -108,7 +105,7 @@ export default function HighlightCard({ <View className="flex flex-row items-center justify-between"> <View className="flex flex-row items-center gap-2"> <Text className="text-xs text-muted-foreground"> - {dayjs(highlight.createdAt).fromNow()} + {formatDistanceToNow(highlight.createdAt, { addSuffix: true })} </Text> {bookmark && ( <> diff --git a/apps/mobile/package.json b/apps/mobile/package.json index 47ef533d..7f85a2f7 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -29,6 +29,7 @@ "@tanstack/react-query": "5.90.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", + "date-fns": "^3.6.0", "expo": "~54.0.31", "expo-build-properties": "~1.0.10", "expo-checkbox": "~5.0.8", 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0cc750d9..04361d9c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -356,6 +356,9 @@ importers: clsx: specifier: ^2.1.0 version: 2.1.0 + date-fns: + specifier: ^3.6.0 + version: 3.6.0 expo: specifier: ~54.0.31 version: 54.0.31(@babel/core@7.26.0)(@expo/metro-runtime@6.1.2)(expo-router@6.0.21)(react-native-webview@13.15.0(react-native@0.81.5(@babel/core@7.26.0)(@types/react@19.2.5)(react@19.2.3))(react@19.2.3))(react-native@0.81.5(@babel/core@7.26.0)(@types/react@19.2.5)(react@19.2.3))(react@19.2.3) @@ -651,9 +654,6 @@ importers: date-fns: specifier: ^3.6.0 version: 3.6.0 - dayjs: - specifier: ^1.11.10 - version: 1.11.10 drizzle-orm: specifier: ^0.44.2 version: 0.44.2(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(better-sqlite3@11.3.0)(gel@2.1.0)(kysely@0.28.5) @@ -7941,9 +7941,6 @@ packages: date-fns@4.1.0: resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} - dayjs@1.11.10: - resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==} - de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} @@ -24348,8 +24345,6 @@ snapshots: date-fns@4.1.0: {} - dayjs@1.11.10: {} - de-indent@1.0.2: {} debounce@1.2.1: {} |
