refactor: new data flow structure for entry

src/renderer/src/components/entry-column/article-item.tsx

@@ -2,10 +2,17 @@ import { FeedIcon } from "@renderer/components/feed-icon"
 import { Image } from "@renderer/components/ui/image"
 import dayjs from "@renderer/lib/dayjs"
 import { cn } from "@renderer/lib/utils"
+import { useEntry } from "@renderer/store/entry"
 
+import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-export function ArticleItem({ entry }: UniversalItemProps) {
+export function ArticleItem({ entryId }: UniversalItemProps) {
+  const entry = useEntry(entryId)
+
+  // NOTE: prevent 0 height element, react virtuoso will not stop render any more
+  if (!entry) return <ReactVirtuosoItemPlaceholder />
+
   return (
     <div className="mb-5 flex px-2 py-3">
       <FeedIcon feed={entry.feeds} />

src/renderer/src/components/entry-column/index.tsx

@@ -1,10 +1,10 @@
 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 { entryActions } from "@renderer/store/entry"
 import { m } from "framer-motion"
 import { useAtom, useAtomValue } from "jotai"
 import { atomWithStorage } from "jotai/utils"
@@ -38,15 +38,6 @@ export function EntryColumn() {
     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: FC<UniversalItemProps>
   switch (activeList?.view) {
     case 0: {
@@ -78,28 +69,28 @@ export function EntryColumn() {
     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>[]
+        const batchLikeIds = [] as string[]
+        const entriesId2Map = entryActions.getFlattenMapEntries()
         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 }),
-            )
+            batchLikeIds.push(id)
           }
         }
 
-        await Promise.all(requestTasks)
+        if (batchLikeIds.length > 0) {
+          await apiClient.reads.$post({ json: { entryIds: batchLikeIds } })
 
-        // TODO optimistic update
-
-        if (requestTasks.length > 0) entries.refetch()
+          for (const id of batchLikeIds) {
+            entryActions.optimisticUpdate(id, { read: true })
+          }
+        }
       },
       1000,
       { leading: false },
@@ -114,6 +105,8 @@ export function EntryColumn() {
         components={{
           List: ListContent,
         }}
+        defaultItemHeight={320}
+        overscan={window.innerHeight}
         rangeChanged={handleRangeChange}
         totalCount={entriesIds?.length}
         endReached={() => entries.hasNextPage && entries.fetchNextPage()}
@@ -123,10 +116,10 @@ export function EntryColumn() {
           return (
             <EntryItemWrapper
               key={entry.entries.id}
-              entry={entry}
+              entryId={entry.entries.id}
               view={activeList?.view}
             >
-              <Item entry={entry} />
+              <Item entryId={entry.entries.id} />
             </EntryItemWrapper>
           )
         }}

src/renderer/src/components/entry-column/item-wrapper.tsx

@@ -1,60 +1,47 @@
 import { useEntryActions } from "@renderer/hooks/useEntryActions"
-import { useUpdateEntry } from "@renderer/hooks/useUpdateEntry"
 import { showNativeMenu } from "@renderer/lib/native-menu"
-import type { EntriesResponse, EntryResponse } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
-import { apiFetch } from "@renderer/queries/api-fetch"
+import { apiClient } from "@renderer/queries/api-fetch"
 import { feedActions, useFeedStore } from "@renderer/store"
+import { entryActions, useEntry } from "@renderer/store/entry"
 import { useMutation } from "@tanstack/react-query"
 
+import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
+
 export function EntryItemWrapper({
-  entry,
   children,
+  entryId,
   view,
 }: {
-  entry: EntriesResponse[number] | EntryResponse
+  entryId: string
   children: React.ReactNode
   view?: number
 }) {
+  const entry = useEntry(entryId)
   const { items } = useEntryActions({
     view,
     entry,
   })
 
   const activeEntry = useFeedStore((state) => state.activeEntry)
 
-  const updateEntry = useUpdateEntry({
-    entryId: entry?.entries.id,
-    feedId: entry?.feeds.id,
-  })
-
   const read = useMutation({
     mutationFn: async () =>
-      apiFetch("/reads", {
-        method: "POST",
-        body: {
-          entryId: entry?.entries.id,
+      apiClient.reads.$post({
+        json: {
+          entryIds: [entry.entries.id],
         },
       }),
-    onSuccess: () => {
-      updateEntry({
+    onMutate: () => {
+      entryActions.optimisticUpdate(entry.entries.id, {
         read: true,
       })
     },
+    // TODO  出错回退
   })
 
-  // const { ref, inView } = useInView({
-  //   threshold: 1,
-  //   delay: 1000,
-  // })
-  // const prevInView = usePrevious(inView)
-  // useEffect(() => {
-  //   if (prevInView && !inView && !entry.read) {
-  //     read.mutate()
-  //   }
-  // }, [entry.read, inView, read, prevInView])
-
-  // if (!entry?.entries.url || view === undefined) return children
+  // NOTE: prevent 0 height element, react virtuoso will not stop render any more
+  if (!entry) return <ReactVirtuosoItemPlaceholder />
 
   return (
     <div

src/renderer/src/components/entry-column/notification-item.tsx

@@ -1,9 +1,13 @@
 import { FeedIcon } from "@renderer/components/feed-icon"
 import dayjs from "@renderer/lib/dayjs"
+import { useEntry } from "@renderer/store/entry"
 
+import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-export function NotificationItem({ entry }: UniversalItemProps) {
+export function NotificationItem({ entryId }: UniversalItemProps) {
+  const entry = useEntry(entryId)
+  if (!entry) return <ReactVirtuosoItemPlaceholder />
   return (
     <div className="mb-5 flex px-2 py-3">
       <FeedIcon feed={entry.feeds} />

src/renderer/src/components/entry-column/picture-item.tsx

@@ -1,10 +1,14 @@
 import { FeedIcon } from "@renderer/components/feed-icon"
 import { Image } from "@renderer/components/ui/image"
 import dayjs from "@renderer/lib/dayjs"
+import { useEntry } from "@renderer/store/entry"
 
+import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-export function PictureItem({ entry }: UniversalItemProps) {
+export function PictureItem({ entryId }: UniversalItemProps) {
+  const entry = useEntry(entryId)
+  if (!entry) return <ReactVirtuosoItemPlaceholder />
   return (
     <div>
       <div>

src/renderer/src/components/entry-column/social-media-item.tsx

@@ -1,10 +1,16 @@
 import { FeedIcon } from "@renderer/components/feed-icon"
 import { Image } from "@renderer/components/ui/image"
 import dayjs from "@renderer/lib/dayjs"
+import { useEntry } from "@renderer/store/entry"
 
+import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-export function SocialMediaItem({ entry }: UniversalItemProps) {
+export function SocialMediaItem({ entryId }: UniversalItemProps) {
+  const entry = useEntry(entryId)
+
+  // NOTE: prevent 0 height element, react virtuoso will not stop render any more
+  if (!entry) return <ReactVirtuosoItemPlaceholder />
   return (
     <div className="mb-5 flex px-2 py-3 w-full">
       <FeedIcon feed={entry.feeds} />

src/renderer/src/components/entry-column/types.ts

@@ -1,5 +1,5 @@
-import type { EntriesResponse } from "@renderer/lib/types"
-
-export interface UniversalItemProps { entry: EntriesResponse[number] }
+export interface UniversalItemProps {
+  entryId: string
+}
 
 export type FilterTab = "all" | "unread"

src/renderer/src/components/entry-column/video-item.tsx

@@ -1,10 +1,14 @@
 import { FeedIcon } from "@renderer/components/feed-icon"
 import { Image } from "@renderer/components/ui/image"
 import dayjs from "@renderer/lib/dayjs"
+import { useEntry } from "@renderer/store/entry"
 
+import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-export function VideoItem({ entry }: UniversalItemProps) {
+export function VideoItem({ entryId }: UniversalItemProps) {
+  const entry = useEntry(entryId)
+  if (!entry) return <ReactVirtuosoItemPlaceholder />
   return (
     <div className="flex">
       <div className="w-full">

src/renderer/src/components/entry-content/index.tsx

@@ -26,7 +26,7 @@ export function EntryContent({ entryId }: { entryId: ActiveEntry }) {
 
   return (
     <>
-      <EntryShare entry={entry.data} view={0} />
+      <EntryShare entryId={entry.data.entries.id} view={0} />
       <m.div
         className="h-[calc(100%-3.5rem)] overflow-y-auto p-5"
         initial={{ opacity: 0.01, y: 100 }}

src/renderer/src/components/entry-content/share.tsx

@@ -6,15 +6,17 @@ import {
   TooltipTrigger,
 } from "@renderer/components/ui/tooltip"
 import { useEntryActions } from "@renderer/hooks/useEntryActions"
-import type { EntryResponse } from "@renderer/lib/types"
+import { useEntry } from "@renderer/store/entry"
 
 export function EntryShare({
   view,
-  entry,
+  entryId,
 }: {
   view: number
-  entry?: EntryResponse
+  entryId: string
 }) {
+  const entry = useEntry(entryId)
+
   const { items } = useEntryActions({
     view,
     entry,

src/renderer/src/components/ui/placeholder.tsx

@@ -0,0 +1,3 @@
+export const ReactVirtuosoItemPlaceholder = () =>
+// NOTE: prevent 0 height element, react virtuoso will not stop render any more
+  <div className="h-px" />

src/renderer/src/hono.ts

@@ -7,34 +7,19 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
         $post: {
             input: {
                 json: {
-                    entryId: string;
-                    csrfToken: string;
+                    entryIds: string[];
                 };
             };
             output: {
                 code: 0;
             };
             outputFormat: "json";
             status: 200;
-        } | {
-            input: {
-                json: {
-                    entryId: string;
-                    csrfToken: string;
-                };
-            };
-            output: {
-                code: 1;
-                error: "Unauthorized";
-            };
-            outputFormat: "json";
-            status: 401;
         };
         $delete: {
             input: {
                 json: {
                     entryId: string;
-                    csrfToken: string;
                 };
             };
             output: {
@@ -79,7 +64,6 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
             input: {
                 json: {
                     entryId: string;
-                    csrfToken: string;
                 };
             };
             output: {
@@ -92,7 +76,6 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
             input: {
                 json: {
                     entryId: string;
-                    csrfToken: string;
                 };
             };
             output: {
@@ -243,11 +226,7 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
 } & {
     "/auth-app/new-session": {
         $post: {
-            input: {
-                json: {
-                    csrfToken: string;
-                };
-            };
+            input: {};
             output: {
                 code: 0;
                 data: {
@@ -264,7 +243,6 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
         $patch: {
             input: {
                 json: {
-                    csrfToken: string;
                     name?: string | null | undefined;
                     image?: string | null | undefined;
                     handle?: string | null | undefined;
@@ -428,7 +406,6 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
                 json: {
                     url: string;
                     view: number;
-                    csrfToken: string;
                     category?: string | null | undefined;
                     isPrivate?: boolean | null | undefined;
                 };
@@ -442,7 +419,6 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
         $delete: {
             input: {
                 json: {
-                    csrfToken: string;
                     url?: string | undefined;
                     feedId?: string | undefined;
                 };
@@ -458,7 +434,6 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
                 json: {
                     feedId: string;
                     view: number;
-                    csrfToken: string;
                     category?: string | null | undefined;
                     isPrivate?: boolean | null | undefined;
                 };