diff --git a/src/atoms.ts b/src/atoms.ts index 02651c3..b1e5767 100644 --- a/src/atoms.ts +++ b/src/atoms.ts @@ -22,7 +22,8 @@ function initRefetchSource() { export const refetchSourceAtom = atom(initRefetchSource()) -const currentSectionIDAtom = atom("focus") +export const currentSectionIDAtom = atom("focus") + export const currentSectionAtom = atom((get) => { const id = get(currentSectionIDAtom) if (id === "focus") { @@ -36,6 +37,4 @@ export const currentSectionAtom = atom((get) => { id, ...metadata[id], } -}, (_, set, update: SectionID) => { - set(currentSectionIDAtom, update) }) diff --git a/src/components/section/Card.tsx b/src/components/section/Card.tsx index c8a548c..2a87cbf 100644 --- a/src/components/section/Card.tsx +++ b/src/components/section/Card.tsx @@ -10,6 +10,7 @@ import { forwardRef, useCallback, useImperativeHandle, useRef } from "react" import { sources } from "@shared/data" import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities" import { focusSourcesAtom, refetchSourceAtom } from "~/atoms" +import { useRelativeTime } from "~/hooks/useRelativeTime" export interface ItemsProps extends React.HTMLAttributes { id: SourceID @@ -138,8 +139,8 @@ export function NewsCard({ id, inView, isOverlay, handleListeners }: NewsCardPro } function UpdateTime({ query }: Query) { - const updateTime = query.data?.updatedTime - if (updateTime) return {`${relativeTime(updateTime)}更新`} + const updatedTime = useRelativeTime(query.data?.updatedTime ?? "") + if (updatedTime) return {`${updatedTime}更新`} if (query.isError) return 获取失败 return } diff --git a/src/hooks/useRelativeTime.ts b/src/hooks/useRelativeTime.ts new file mode 100644 index 0000000..9bf5f4c --- /dev/null +++ b/src/hooks/useRelativeTime.ts @@ -0,0 +1,17 @@ +import { relativeTime } from "@shared/utils" +import { useEffect, useState } from "react" + +export function useRelativeTime(timestamp: string | number) { + const [time, setTime] = useState() + + useEffect(() => { + const t = relativeTime(timestamp) + if (t) setTime(t) + const interval = setInterval(() => { + setTime(relativeTime(timestamp)) + }, 60 * 1000) + return () => clearInterval(interval) + }, [timestamp]) + + return time +} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index ed91336..50477af 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -2,9 +2,9 @@ import { metadata, sectionIds } from "@shared/data" import type { SectionID } from "@shared/types" import { Link, createFileRoute } from "@tanstack/react-router" import clsx from "clsx" -import { useSetAtom } from "jotai" +import { useAtom } from "jotai" import { useEffect } from "react" -import { currentSectionAtom } from "~/atoms" +import { currentSectionIDAtom } from "~/atoms" import { Dnd } from "~/components/section/Dnd" import { Pure } from "~/components/section/Pure" @@ -17,12 +17,12 @@ export const Route = createFileRoute("/")({ function IndexComponent() { const { section: id = "focus" } = Route.useSearch() - const setCurrentSectionAtom = useSetAtom(currentSectionAtom) + const [currentSectionID, setCurrentSectionID] = useAtom(currentSectionIDAtom) useEffect(() => { - setCurrentSectionAtom(id) - }, [setCurrentSectionAtom, id]) + setCurrentSectionID(id) + }, [setCurrentSectionID, id]) - return id && ( + return currentSectionID === id && (
{sectionIds.map(section => (