pref: useRelativeTime hook

src/atoms.ts

@@ -22,7 +22,8 @@ function initRefetchSource() {
 
 export const refetchSourceAtom = atom(initRefetchSource())
 
-const currentSectionIDAtom = atom<SectionID>("focus")
+export const currentSectionIDAtom = atom<SectionID>("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)
 })

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<HTMLDivElement> {
   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 <span>{`${relativeTime(updateTime)}更新`}</span>
+  const updatedTime = useRelativeTime(query.data?.updatedTime ?? "")
+  if (updatedTime) return <span>{`${updatedTime}更新`}</span>
   if (query.isError) return <span>获取失败</span>
   return <span className="skeleton w-20" />
 }

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<string>()
+
+  useEffect(() => {
+    const t = relativeTime(timestamp)
+    if (t) setTime(t)
+    const interval = setInterval(() => {
+      setTime(relativeTime(timestamp))
+    }, 60 * 1000)
+    return () => clearInterval(interval)
+  }, [timestamp])
+
+  return time
+}

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 && (
     <div className="flex flex-col justify-center items-center">
       <section className="flex gap-2 py-4">
         {sectionIds.map(section => (