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,14 +1,20 @@
 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} />
  <div className="flex-1 min-w-0">
  <div className="-mt-0.5 line-clamp-5 flex-1 text-sm">
  <div className="space-x-1">
  <span className="font-medium">{entry.entries.author}</span>

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;
  };