refactor(mobile): auto mark as read logic (#2919)

* refactor(mobile): auto mark as read logic * update
RSSNext · Mar 1, 2025 · 872835a · 872835a
1 parent 7fbd2d7
commit 872835a
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 33 deletions.
diff --git a/apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx b/apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx
@@ -13,8 +13,8 @@ import { EntryNormalItem } from "./templates/EntryNormalItem"
 
 export const EntryListContentArticle = forwardRef<
   ElementRef<typeof TimelineSelectorList>,
-  { entryIds: string[] }
->(({ entryIds }, ref) => {
+  { entryIds: string[]; active?: boolean }
+>(({ entryIds, active }, ref) => {
   const playingAudioUrl = usePlayingUrl()
 
   const { fetchNextPage, isFetching, refetch, isRefetching } = useFetchEntriesControls()
@@ -31,7 +31,9 @@ export const EntryListContentArticle = forwardRef<
     [isFetching],
   )
 
-  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged()
+  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged({
+    disabled: active === false || isFetching,
+  })
 
   return (
     <TimelineSelectorList

diff --git a/apps/mobile/src/modules/entry-list/EntryListContentPicture.tsx b/apps/mobile/src/modules/entry-list/EntryListContentPicture.tsx
@@ -13,12 +13,16 @@ import { EntryPictureItem } from "./templates/EntryPictureItem"
 
 export const EntryListContentPicture = forwardRef<
   ElementRef<typeof TimelineSelectorMasonryList>,
-  {
-    entryIds: string[]
-  } & Omit<MasonryFlashListProps<string>, "data" | "renderItem">
->(({ entryIds, ...rest }, ref) => {
-  const { fetchNextPage, refetch, isRefetching, hasNextPage } = useFetchEntriesControls()
-  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged()
+  { entryIds: string[]; active?: boolean } & Omit<
+    MasonryFlashListProps<string>,
+    "data" | "renderItem"
+  >
+>(({ entryIds, active, ...rest }, ref) => {
+  const { fetchNextPage, refetch, isRefetching, hasNextPage, isFetching } =
+    useFetchEntriesControls()
+  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged({
+    disabled: active === false || isFetching,
+  })
 
   return (
     <TimelineSelectorMasonryList

diff --git a/apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx b/apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx
@@ -11,8 +11,8 @@ import { EntrySocialItem } from "./templates/EntrySocialItem"
 
 export const EntryListContentSocial = forwardRef<
   ElementRef<typeof TimelineSelectorList>,
-  { entryIds: string[] }
->(({ entryIds }, ref) => {
+  { entryIds: string[]; active?: boolean }
+>(({ entryIds, active }, ref) => {
   const { fetchNextPage, isFetching, refetch, isRefetching } = useFetchEntriesControls()
 
   const renderItem = useCallback(
@@ -25,7 +25,9 @@ export const EntryListContentSocial = forwardRef<
     [isFetching],
   )
 
-  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged()
+  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged({
+    disabled: active === false || isFetching,
+  })
 
   return (
     <TimelineSelectorList

diff --git a/apps/mobile/src/modules/entry-list/EntryListContentVideo.tsx b/apps/mobile/src/modules/entry-list/EntryListContentVideo.tsx
@@ -12,12 +12,15 @@ import { EntryVideoItem } from "./templates/EntryVideoItem"
 
 export const EntryListContentVideo = forwardRef<
   ElementRef<typeof TimelineSelectorMasonryList>,
-  {
-    entryIds: string[]
-  } & Omit<MasonryFlashListProps<string>, "data" | "renderItem">
->(({ entryIds, ...rest }, ref) => {
+  { entryIds: string[]; active?: boolean } & Omit<
+    MasonryFlashListProps<string>,
+    "data" | "renderItem"
+  >
+>(({ entryIds, active, ...rest }, ref) => {
   const { fetchNextPage, refetch, isRefetching, isFetching } = useFetchEntriesControls()
-  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged()
+  const { onViewableItemsChanged, onScroll } = useOnViewableItemsChanged({
+    disabled: active === false || isFetching,
+  })
 
   const ListFooterComponent = useMemo(
     () =>

diff --git a/apps/mobile/src/modules/entry-list/EntryListSelector.tsx b/apps/mobile/src/modules/entry-list/EntryListSelector.tsx
@@ -20,8 +20,11 @@ export function EntryListSelector({
 }) {
   const ref = useRegisterNavigationScrollView<FlashList<any>>(active)
 
-  let ContentComponent: typeof EntryListContentSocial | typeof EntryListContentPicture =
-    EntryListContentArticle
+  let ContentComponent:
+    | typeof EntryListContentSocial
+    | typeof EntryListContentPicture
+    | typeof EntryListContentVideo
+    | typeof EntryListContentArticle = EntryListContentArticle
   switch (viewId) {
     case FeedViewType.SocialMedia: {
       ContentComponent = EntryListContentSocial
@@ -43,7 +46,7 @@ export function EntryListSelector({
 
   return (
     <EntryListContextViewContext.Provider value={viewId}>
-      <ContentComponent ref={ref} entryIds={entryIds} />
+      <ContentComponent ref={ref} entryIds={entryIds} active={active} />
     </EntryListContextViewContext.Provider>
   )
 }
diff --git a/apps/mobile/src/modules/entry-list/hooks.ts b/apps/mobile/src/modules/entry-list/hooks.ts
@@ -1,5 +1,5 @@
 import type ViewToken from "@shopify/flash-list/dist/viewability/ViewToken"
-import { useCallback, useInsertionEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useInsertionEffect, useMemo, useRef, useState } from "react"
 import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native"
 
 import { useGeneralSettingKey } from "@/src/atoms/settings/general"
@@ -8,15 +8,19 @@ import { unreadSyncService } from "@/src/store/unread/store"
 
 const defaultIdExtractor = (item: ViewToken) => item.key
 export function useOnViewableItemsChanged({
+  disabled,
   idExtractor = defaultIdExtractor,
 }: {
+  disabled?: boolean
   idExtractor?: (item: ViewToken) => string
 } = {}) {
-  const orientation = useRef<"down" | "up" | "initial">("initial")
+  const orientation = useRef<"down" | "up">("down")
   const lastOffset = useRef(0)
 
   const markAsReadWhenScrolling = useGeneralSettingKey("scrollMarkUnread")
   const markAsReadWhenRendering = useGeneralSettingKey("renderMarkUnread")
+  const [lastViewableItems, setLastViewableItems] = useState<ViewToken[] | null>()
+  const [lastRemovedItems, setLastRemovedItems] = useState<ViewToken[] | null>(null)
 
   const [stableIdExtractor] = useState(() => idExtractor)
 
@@ -26,22 +30,37 @@ export function useOnViewableItemsChanged({
   }) => void = useNonReactiveCallback(({ viewableItems, changed }) => {
     debouncedFetchEntryContentByStream(viewableItems.map((item) => stableIdExtractor(item)))
 
-    if (orientation.current !== "down") return
+    if (orientation.current === "down") {
+      setLastViewableItems(viewableItems)
+      setLastRemovedItems(changed.filter((item) => !item.isViewable))
+    } else {
+      setLastRemovedItems(null)
+      setLastViewableItems(null)
+    }
+  })
 
-    if (markAsReadWhenScrolling) {
-      changed
-        .filter((item) => !item.isViewable)
-        .forEach((item) => {
+  useEffect(() => {
+    if (!disabled) {
+      if (markAsReadWhenScrolling && lastRemovedItems) {
+        lastRemovedItems.forEach((item) => {
           unreadSyncService.markEntryAsRead(stableIdExtractor(item))
         })
-    }
+      }
 
-    if (markAsReadWhenRendering) {
-      viewableItems.forEach((item) => {
-        unreadSyncService.markEntryAsRead(stableIdExtractor(item))
-      })
+      if (markAsReadWhenRendering && lastViewableItems) {
+        lastViewableItems.forEach((item) => {
+          unreadSyncService.markEntryAsRead(stableIdExtractor(item))
+        })
+      }
     }
-  })
+  }, [
+    disabled,
+    lastRemovedItems,
+    lastViewableItems,
+    markAsReadWhenRendering,
+    markAsReadWhenScrolling,
+    stableIdExtractor,
+  ])
 
   const onScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
     const currentOffset = e.nativeEvent.contentOffset.y