feat(mobile): load archive entries (#2725)

* feat(mobile): load archive entries * only hydrate for view * leave note * fix type
RSSNext · Feb 12, 2025 · d8a796d · d8a796d
1 parent 3b1db30
commit d8a796d
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 52 deletions.
diff --git a/apps/mobile/src/modules/context-menu/entry.tsx b/apps/mobile/src/modules/context-menu/entry.tsx
@@ -59,24 +59,19 @@ export const EntryItemContextMenu = ({ id, children }: PropsWithChildren<{ id: s
           key="Star"
           onSelect={() => {
             if (isEntryStarred) {
-              collectionSyncService.unstarEntry({
-                createdAt: new Date().toISOString(),
+              collectionSyncService.unstarEntry(id)
+              toast.info("Unstarred")
+            } else {
+              if (!entry.feedId) {
+                toast.error("Feed not found")
+                return
+              }
+              collectionSyncService.starEntry({
                 feedId: entry.feedId,
                 entryId: id,
+                // TODO update view
                 view: 0,
               })
-              toast.info("Unstarred")
-            } else {
-              collectionSyncService.starEntry(
-                {
-                  createdAt: new Date().toISOString(),
-                  feedId: entry.feedId,
-                  entryId: id,
-                  // TODO update view
-                  view: 0,
-                },
-                0,
-              )
               toast.info("Starred")
             }
           }}

diff --git a/apps/mobile/src/modules/entry-list/action.tsx b/apps/mobile/src/modules/entry-list/action.tsx
@@ -1,12 +1,16 @@
 import { Link } from "expo-router"
-import { TouchableOpacity, View } from "react-native"
+import { Text, TouchableOpacity, View } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 
 import { AddCuteReIcon } from "@/src/icons/add_cute_re"
 import { LayoutLeftbarOpenCuteReIcon } from "@/src/icons/layout_leftbar_open_cute_re"
 import { accentColor } from "@/src/theme/colors"
 
-import { useFeedDrawer } from "../feed-drawer/atoms"
+import {
+  setIsLoadingArchivedEntries,
+  useFeedDrawer,
+  useIsLoadingArchivedEntries,
+} from "../feed-drawer/atoms"
 
 const useActionPadding = () => {
   const insets = useSafeAreaInsets()
@@ -42,3 +46,19 @@ export function HomeRightAction() {
     </View>
   )
 }
+
+export function LoadArchiveButton() {
+  const isLoadingArchivedEntries = useIsLoadingArchivedEntries()
+  if (isLoadingArchivedEntries) return null
+  return (
+    <View className="items-center pt-2">
+      <TouchableOpacity
+        onPress={() => {
+          setIsLoadingArchivedEntries(true)
+        }}
+      >
+        <Text className="text-label">Load archived entries</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
diff --git a/apps/mobile/src/modules/entry-list/entry-list.tsx b/apps/mobile/src/modules/entry-list/entry-list.tsx
@@ -28,7 +28,7 @@ import { debouncedFetchEntryContentByStream } from "@/src/store/entry/store"
 
 import { EntryItemContextMenu } from "../context-menu/entry"
 import { ViewSelector } from "../feed-drawer/view-selector"
-import { HomeLeftAction, HomeRightAction } from "./action"
+import { HomeLeftAction, HomeRightAction, LoadArchiveButton } from "./action"
 import { EntryListContentGrid } from "./entry-list-gird"
 
 const headerHideableBottomHeight = 58
@@ -80,7 +80,7 @@ function EntryListContent({ entryIds }: { entryIds: string[] }) {
   const scrollY = useContext(NavigationContext)?.scrollY
 
   const { colorScheme } = useColorScheme()
-  const { fetchNextPage, isFetchingNextPage, refetch, isRefetching } = useFetchEntriesControls()
+  const { fetchNextPage, isFetching, refetch, isRefetching } = useFetchEntriesControls()
 
   const onScroll = useCallback(
     (e: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -95,6 +95,13 @@ function EntryListContent({ entryIds }: { entryIds: string[] }) {
   )
 
   const tabBarHeight = useBottomTabBarHeight()
+
+  const ListFooterComponent = useMemo(
+    () =>
+      isFetching ? <EntryItemSkeleton /> : screenType === "feed" ? <LoadArchiveButton /> : null,
+    [isFetching, screenType],
+  )
+
   return (
     <FlashList
       refreshControl={
@@ -128,7 +135,7 @@ function EntryListContent({ entryIds }: { entryIds: string[] }) {
         paddingBottom: tabBarHeight,
       }}
       ItemSeparatorComponent={ItemSeparator}
-      ListFooterComponent={isFetchingNextPage ? <EntryItemSkeleton /> : null}
+      ListFooterComponent={ListFooterComponent}
     />
   )
 }

diff --git a/apps/mobile/src/modules/feed-drawer/atoms.ts b/apps/mobile/src/modules/feed-drawer/atoms.ts
@@ -103,6 +103,15 @@ const selectedTimelineAtom = atom<SelectedTimeline>({
 
 const selectedFeedAtom = atom<SelectedFeed>(null)
 
+const isLoadingArchivedEntriesAtom = atom(false)
+
+export const useIsLoadingArchivedEntries = () => {
+  return useAtomValue(isLoadingArchivedEntriesAtom)
+}
+export const setIsLoadingArchivedEntries = (isLoading: boolean) => {
+  jotaiStore.set(isLoadingArchivedEntriesAtom, isLoading)
+}
+
 export const EntryListContext = createContext<{ type: "timeline" | "feed" }>({ type: "timeline" })
 export const useEntryListContext = () => {
   return useContext(EntryListContext)
@@ -129,6 +138,7 @@ export function useSelectedView() {
 
 function getFetchEntryPayload(
   selectedFeed: SelectedTimeline | SelectedFeed,
+  isArchived = false,
 ): FetchEntriesProps | null {
   if (!selectedFeed) {
     return null
@@ -158,6 +168,8 @@ function getFetchEntryPayload(
     }
     // No default
   }
+
+  payload.isArchived = isArchived
   return payload
 }
 
@@ -167,17 +179,26 @@ export function useSelectedFeed() {
   const selectedTimeline = useAtomValue(selectedTimelineAtom)
   const selectedFeed = useAtomValue(selectedFeedAtom)
 
+  const isArchived = useIsLoadingArchivedEntries()
   const payload = getFetchEntryPayload(
     entryListContext.type === "feed" ? selectedFeed : selectedTimeline,
+    entryListContext.type === "feed" ? isArchived : false,
   )
   usePrefetchEntries(payload)
 
   return entryListContext.type === "feed" ? selectedFeed : selectedTimeline
 }
 
 export function useFetchEntriesControls() {
+  const entryListContext = useEntryListContext()
+
   const selectedFeed = useSelectedFeed()
-  const payload = getFetchEntryPayload(selectedFeed)
+  const isArchived = useIsLoadingArchivedEntries()
+
+  const payload = getFetchEntryPayload(
+    selectedFeed,
+    entryListContext.type === "feed" ? isArchived : false,
+  )
   return usePrefetchEntries(payload)
 }
 
@@ -220,6 +241,7 @@ export const selectTimeline = (state: SelectedTimeline) => {
 
 export const selectFeed = (state: SelectedFeed) => {
   jotaiStore.set(selectedFeedAtom, state)
+  jotaiStore.set(isLoadingArchivedEntriesAtom, false)
 }
 
 export const useViewDefinition = (view?: FeedViewType) => {

diff --git a/apps/mobile/src/services/entry.ts b/apps/mobile/src/services/entry.ts
@@ -34,7 +34,11 @@ class EntryServiceStatic implements Hydratable, Resetable {
 
   async hydrate() {
     const entries = await db.query.entriesTable.findMany()
-    entryActions.upsertManyInSession(entries.map((e) => dbStoreMorph.toEntryModel(e)))
+    // TODO: Find a way to determine whether entry is archived, and then only hydrate unarchived entries
+    entryActions.upsertManyInSession(
+      entries.map((e) => dbStoreMorph.toEntryModel(e)),
+      "view",
+    )
   }
 }