feat(mobile): refresh control for entry list (#2723)

RSSNext · Feb 11, 2025 · c01984d · c01984d
1 parent 7874551
commit c01984d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/apps/mobile/src/modules/entry-list/entry-list-gird.tsx b/apps/mobile/src/modules/entry-list/entry-list-gird.tsx
@@ -6,8 +6,9 @@ import type { MasonryFlashListProps } from "@shopify/flash-list"
 import { MasonryFlashList } from "@shopify/flash-list"
 import { Image } from "expo-image"
 import { Link } from "expo-router"
+import { useColorScheme } from "nativewind"
 import { useContext } from "react"
-import { Pressable, View } from "react-native"
+import { Pressable, RefreshControl, View } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 
 import { NavigationContext } from "@/src/components/common/SafeNavigationScrollView"
@@ -29,10 +30,22 @@ export function EntryListContentGrid({
   const headerHeight = useHeaderHeight()
   const { scrollY } = useContext(NavigationContext)!
 
-  const { fetchNextPage } = useFetchEntriesControls()
+  const { colorScheme } = useColorScheme()
+  const { fetchNextPage, refetch, isRefetching } = useFetchEntriesControls()
 
   return (
     <MasonryFlashList
+      refreshControl={
+        <RefreshControl
+          progressViewOffset={headerHeight}
+          // FIXME: not sure why we need set tintColor manually here, otherwise we can not see the refresh indicator
+          tintColor={colorScheme === "dark" ? "white" : "black"}
+          onRefresh={() => {
+            refetch()
+          }}
+          refreshing={isRefetching}
+        />
+      }
       data={entryIds}
       renderItem={useTypeScriptHappyCallback(({ item }) => {
         return <RenderEntryItem id={item} />

diff --git a/apps/mobile/src/modules/entry-list/entry-list.tsx b/apps/mobile/src/modules/entry-list/entry-list.tsx
@@ -4,9 +4,10 @@ import type { ListRenderItemInfo } from "@shopify/flash-list"
 import { FlashList } from "@shopify/flash-list"
 import { Image } from "expo-image"
 import { router } from "expo-router"
+import { useColorScheme } from "nativewind"
 import { useCallback, useContext, useMemo } from "react"
 import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native"
-import { StyleSheet, Text, useAnimatedValue, View } from "react-native"
+import { RefreshControl, StyleSheet, Text, useAnimatedValue, View } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 
 import {
@@ -78,7 +79,8 @@ function EntryListContent({ entryIds }: { entryIds: string[] }) {
       : originalDefaultHeaderHeight
   const scrollY = useContext(NavigationContext)?.scrollY
 
-  const { fetchNextPage, isFetchingNextPage } = useFetchEntriesControls()
+  const { colorScheme } = useColorScheme()
+  const { fetchNextPage, isFetchingNextPage, refetch, isRefetching } = useFetchEntriesControls()
 
   const onScroll = useCallback(
     (e: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -95,6 +97,17 @@ function EntryListContent({ entryIds }: { entryIds: string[] }) {
   const tabBarHeight = useBottomTabBarHeight()
   return (
     <FlashList
+      refreshControl={
+        <RefreshControl
+          progressViewOffset={headerHeight}
+          // FIXME: not sure why we need set tintColor manually here, otherwise we can not see the refresh indicator
+          tintColor={colorScheme === "dark" ? "white" : "black"}
+          onRefresh={() => {
+            refetch()
+          }}
+          refreshing={isRefetching}
+        />
+      }
       onScroll={onScroll}
       data={entryIds}
       renderItem={renderItem}

diff --git a/apps/mobile/src/store/entry/hooks.ts b/apps/mobile/src/store/entry/hooks.ts
@@ -12,7 +12,7 @@ export const usePrefetchEntries = (props: Omit<FetchEntriesProps, "pageParam"> |
     queryKey: ["entries", feedId, inboxId, listId, view, read, limit, isArchived],
     queryFn: ({ pageParam }) => entrySyncServices.fetchEntries({ ...props, pageParam }),
     getNextPageParam: (lastPage) =>
-      inboxId || listId
+      listId
         ? lastPage.data?.at(-1)?.entries.insertedAt
         : lastPage.data?.at(-1)?.entries.publishedAt,
     initialPageParam: undefined as undefined | string,