feat: mark read out of scroll (#27)

* feat: mark read out of scroll Signed-off-by: Innei <i@innei.in> * chore: rename Signed-off-by: Innei <i@innei.in> --------- Signed-off-by: Innei <i@innei.in>
RSSNext · May 30, 2024 · 9920c46 · 9920c46
1 parent 67bab24
commit 9920c46
Show file tree

Hide file tree

Showing 13 changed files with 228 additions and 86 deletions.
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "jotai-dark": "^0.3.0",
     "jotai-effect": "^1.0.0",
     "lethargy": "1.0.9",
+    "lodash-es": "4.17.21",
     "lucide-react": "0.379.0",
     "ofetch": "1.3.4",
     "react-hook-form": "7.51.5",
@@ -74,6 +75,7 @@
     "tldts": "6.1.21",
     "unified": "11.0.4",
     "unist-util-visit": "5.0.0",
+    "usehooks-ts": "3.1.0",
     "vfile": "6.0.1",
     "zod": "3.23.8",
     "zustand": "4.5.2"
@@ -83,6 +85,7 @@
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@iconify-json/mingcute": "1.1.17",
     "@tailwindcss/typography": "0.5.13",
+    "@types/lodash-es": "4.17.12",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/renderer/src/components/entry-column/article-item.tsx b/src/renderer/src/components/entry-column/article-item.tsx
@@ -1,15 +1,16 @@
 import { FeedIcon } from "@renderer/components/feed-icon"
 import { Image } from "@renderer/components/ui/image"
 import dayjs from "@renderer/lib/dayjs"
-import type { EntriesResponse } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
 
-export function ArticleItem({ entry }: { entry: EntriesResponse[number] }) {
+import type { UniversalItemProps } from "./types"
+
+export function ArticleItem({ entry }: UniversalItemProps) {
   return (
     <div className="mb-5 flex px-2 py-3">
       <FeedIcon feed={entry.feeds} />
       <div className="-mt-0.5 line-clamp-5 flex-1 text-sm leading-tight">
-        <div className="text-[10px] font-bold text-zinc-500 flex gap-1">
+        <div className="flex gap-1 text-[10px] font-bold text-zinc-500">
           <span className="truncate">{entry.feeds.title}</span>
           <span>·</span>
           <span className="shrink-0">
@@ -30,7 +31,9 @@ export function ArticleItem({ entry }: { entry: EntriesResponse[number] }) {
         >
           {entry.entries.title}
         </div>
-        <div className="text-[13px] text-zinc-500">{entry.entries.description}</div>
+        <div className="text-[13px] text-zinc-500">
+          {entry.entries.description}
+        </div>
       </div>
       {entry.entries.images?.[0] && (
         <Image

diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
@@ -1,33 +1,53 @@
 import { Tabs, TabsList, TabsTrigger } from "@renderer/components/ui/tabs"
+import { buildStorageNS } from "@renderer/lib/ns"
+import type { EntryModel } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
+import { apiClient } from "@renderer/queries/api-fetch"
 import { useEntries } from "@renderer/queries/entries"
 import { useFeedStore } from "@renderer/store"
 import { m } from "framer-motion"
-import type { LegacyRef } from "react"
-import { forwardRef, useMemo, useState } from "react"
+import { useAtom, useAtomValue } from "jotai"
+import { atomWithStorage } from "jotai/utils"
+import { debounce } from "lodash-es"
+import type { FC } from "react"
+import { forwardRef } from "react"
+import type { ListRange } from "react-virtuoso"
 import { Virtuoso } from "react-virtuoso"
+import { useEventCallback } from "usehooks-ts"
+import { useShallow } from "zustand/react/shallow"
 
 import { ArticleItem } from "./article-item"
 import { EntryItemWrapper } from "./item-wrapper"
 import { NotificationItem } from "./notification-item"
 import { PictureItem } from "./picture-item"
 import { SocialMediaItem } from "./social-media-item"
+import type { FilterTab, UniversalItemProps } from "./types"
 import { VideoItem } from "./video-item"
 
 const gridMode = new Set([2, 3])
 
+const filterTabAtom = atomWithStorage<FilterTab>(
+  buildStorageNS("entry-tab"),
+  "unread",
+)
 export function EntryColumn() {
-  const [filterTab, setFilterTab] = useState("unread")
-
   const activeList = useFeedStore((state) => state.activeList)
-  const entries = useEntries({
-    level: activeList?.level,
-    id: activeList?.id,
-    view: activeList?.view,
-    ...(filterTab === "unread" && { read: false }),
-  })
+  const entries = useEntriesByTab()
+
+  const entriesIds = (entries.data?.pages?.flatMap((page) =>
+    page.data?.map((entry) => entry.entries.id),
+  ) || []) as string[]
+
+  const entriesId2Map =
+    entries.data?.pages?.reduce((acc, page) => {
+      if (!page.data) return acc
+      for (const entry of page.data) {
+        acc[entry.entries.id] = entry
+      }
+      return acc
+    }, {} as Record<string, EntryModel>) ?? {}
 
-  let Item
+  let Item: FC<UniversalItemProps>
   switch (activeList?.view) {
     case 0: {
       Item = ArticleItem
@@ -54,60 +74,129 @@ export function EntryColumn() {
     }
   }
 
-  const List = useMemo(() => forwardRef((props, ref: LegacyRef<HTMLDivElement>) => (
-    <m.div
-      key={`${activeList?.level}-${activeList?.id}`}
-      initial={{ opacity: 0.01, y: 100 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0.01, y: -100 }}
-      className={cn(
-        "h-full px-2",
-        activeList?.view &&
-        gridMode.has(activeList.view) &&
-        "grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4",
-      )}
-      {...props}
-      ref={ref}
-    />
-  )), [filterTab, activeList])
+  const handleRangeChange = useEventCallback(
+    debounce(
+      async ({ startIndex }: ListRange) => {
+        const idSlice = entriesIds?.slice(0, startIndex)
+        if (!idSlice) return
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const requestTasks = [] as Promise<any>[]
+        for (const id of idSlice) {
+          const entry = entriesId2Map[id]
+          if (!entry) continue
+          const isRead = entry.read
+          if (!isRead) {
+            // TODO csrfToken should omit and batch request
+            requestTasks.push(
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              apiClient.reads.$post({ json: { entryId: id } as any }),
+            )
+          }
+        }
 
-  const Header = useMemo(() => () => (
-    <div className="mb-5 px-9 flex justify-between items-center w-full">
+        await Promise.all(requestTasks)
+
+        // TODO optimistic update
+
+        if (requestTasks.length > 0) entries.refetch()
+      },
+      1000,
+      { leading: false },
+    ),
+  )
+
+  return (
+    <div className="relative flex h-full flex-1 flex-col">
+      <ListHeader />
+      <Virtuoso
+        className="h-0 grow"
+        components={{
+          List: ListContent,
+        }}
+        rangeChanged={handleRangeChange}
+        totalCount={entriesIds?.length}
+        endReached={() => entries.hasNextPage && entries.fetchNextPage()}
+        data={entries.data?.pages.flatMap((page) => page.data)}
+        itemContent={(_, entry) => {
+          if (!entry) return null
+          return (
+            <EntryItemWrapper
+              key={entry.entries.id}
+              entry={entry}
+              view={activeList?.view}
+            >
+              <Item entry={entry} />
+            </EntryItemWrapper>
+          )
+        }}
+      />
+    </div>
+  )
+}
+
+const useEntriesByTab = () => {
+  const activeList = useFeedStore(useShallow((state) => state.activeList))
+  const filterTab = useAtomValue(filterTabAtom)
+
+  return useEntries({
+    level: activeList?.level,
+    id: activeList?.id,
+    view: activeList?.view,
+    ...(filterTab === "unread" && { read: false }),
+  })
+}
+
+const ListHeader: FC = () => {
+  const activeList = useFeedStore(useShallow((state) => state.activeList))
+  const [filterTab, setFilterTab] = useAtom(filterTabAtom)
+  const entries = useEntriesByTab()
+  const total = entries.data?.pages?.reduce(
+    (acc, page) => acc + (page.data?.length || 0),
+    0,
+  )
+  return (
+    <div className="mb-5 flex w-full items-center justify-between px-9">
       <div>
         <div className="text-lg font-bold">{activeList?.name}</div>
         <div className="text-xs font-medium text-zinc-400">
-          {entries.data?.pages?.[0].total}
+          {total}
           {" "}
           Items
         </div>
       </div>
+      {/* @ts-expect-error */}
       <Tabs value={filterTab} onValueChange={setFilterTab}>
         <TabsList variant="rounded">
-          <TabsTrigger variant="rounded" value="unread">Unread</TabsTrigger>
-          <TabsTrigger variant="rounded" value="all">All</TabsTrigger>
+          <TabsTrigger variant="rounded" value="unread">
+            Unread
+          </TabsTrigger>
+          <TabsTrigger variant="rounded" value="all">
+            All
+          </TabsTrigger>
         </TabsList>
       </Tabs>
     </div>
-  ), [activeList, entries.data?.pages?.[0].total])
+  )
+}
+
+const ListContent = forwardRef<HTMLDivElement>((props, ref) => {
+  const activeList = useFeedStore(useShallow((state) => state.activeList))
 
   return (
-    <Virtuoso
-      components={{
-        Header,
-        List,
-      }}
-      endReached={() =>
-        entries.hasNextPage && entries.fetchNextPage()}
-      data={entries.data?.pages}
-      itemContent={(_, page) => page?.data?.map((entry) => (
-        <EntryItemWrapper
-          key={entry.entries.id}
-          entry={entry}
-          view={activeList?.view}
-        >
-          <Item entry={entry} />
-        </EntryItemWrapper>
-      ))}
+    <m.div
+      key={`${activeList?.level}-${activeList?.id}`}
+      initial={{ opacity: 0.01, y: 100 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0.01, y: -100 }}
+      className={cn(
+        "h-full px-2",
+        activeList?.view &&
+        gridMode.has(activeList.view) &&
+        "grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4",
+      )}
+      {...props}
+      ref={ref}
     />
   )
-}
+})