diff --git a/apps/client/src/features/editor/page-editor.tsx b/apps/client/src/features/editor/page-editor.tsx index 2853875e..32845c6d 100644 --- a/apps/client/src/features/editor/page-editor.tsx +++ b/apps/client/src/features/editor/page-editor.tsx @@ -209,6 +209,7 @@ export default function PageEditor({ queryClient.setQueryData(["pages", slugId], { ...pageData, content: newContent, + updatedAt: new Date(), }); } }, 3000); diff --git a/apps/client/src/features/page/components/header/page-header-menu.tsx b/apps/client/src/features/page/components/header/page-header-menu.tsx index fefd3e28..93d10520 100644 --- a/apps/client/src/features/page/components/header/page-header-menu.tsx +++ b/apps/client/src/features/page/components/header/page-header-menu.tsx @@ -12,7 +12,7 @@ import { IconTrash, IconWifiOff, } from "@tabler/icons-react"; -import React from "react"; +import React, { useEffect } from "react"; import useToggleAside from "@/hooks/use-toggle-aside.tsx"; import { useAtom } from "jotai"; import { historyAtoms } from "@/features/page-history/atoms/history-atoms.ts"; @@ -34,6 +34,7 @@ import { } from "@/features/editor/atoms/editor-atoms.ts"; import { formattedDate, timeAgo } from "@/lib/time.ts"; import MovePageModal from "@/features/page/components/move-page-modal.tsx"; +import { useTimeAgo } from "@/hooks/use-time-ago.tsx"; interface PageHeaderMenuProps { readOnly?: boolean; @@ -102,6 +103,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) { { open: openMovePageModal, close: closeMoveSpaceModal }, ] = useDisclosure(false); const [pageEditor] = useAtom(pageEditorAtom); + const pageUpdatedAt = useTimeAgo(page.updatedAt); const handleCopyLink = () => { const pageUrl = @@ -208,7 +210,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) { diff --git a/apps/client/src/hooks/use-time-ago.tsx b/apps/client/src/hooks/use-time-ago.tsx new file mode 100644 index 00000000..03fa9eda --- /dev/null +++ b/apps/client/src/hooks/use-time-ago.tsx @@ -0,0 +1,16 @@ +import { timeAgo } from "@/lib/time.ts"; +import { useEffect, useState } from "react"; + +export function useTimeAgo(date: Date | string) { + const [value, setValue] = useState(() => timeAgo(new Date(date))); + + useEffect(() => { + const interval = setInterval(() => { + setValue(timeAgo(new Date(date))); + }, 5 * 1000); + + return () => clearInterval(interval); + }, [date]); + + return value; +}