Merge pull request #12 from farcasterxyz/nickcherry/pull-to-refresh-feed

[mobile] Pull to Refresh Feed

mobile/src/components/app/App.tsx

@@ -10,15 +10,15 @@ const queryClient = new QueryClient();
 
 export function App() {
   return (
-    <NavigationContainer>
-      <QueryClientProvider client={queryClient}>
-        <StatusBar style="auto" />
-        <SafeAreaProvider>
+    <SafeAreaProvider>
+      <NavigationContainer>
+        <QueryClientProvider client={queryClient}>
+          <StatusBar style="auto" />
           <Suspense fallback={<FullscreenLoader />}>
             <Navigator />
           </Suspense>
-        </SafeAreaProvider>
-      </QueryClientProvider>
-    </NavigationContainer>
+        </QueryClientProvider>
+      </NavigationContainer>
+    </SafeAreaProvider>
   );
 }

mobile/src/components/navigation/Navigator.tsx

@@ -6,7 +6,11 @@ const Stack = createNativeStackNavigator();
 export function Navigator() {
   return (
     <Stack.Navigator>
-      <Stack.Screen name="Feed" component={FeedScreen} />
+      <Stack.Screen
+        name="Feed"
+        component={FeedScreen}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   );
 }

mobile/src/screens/FeedScreen.tsx

@@ -3,9 +3,11 @@ import { baseApiUrl } from '@constants/api';
 import { FeedApiResponse } from '@shared/types/api';
 import { Cast as CastType } from '@shared/types/models';
 import { FlashList } from '@shopify/flash-list';
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { buildScreen } from '@utils/buildScreen';
-import { View } from 'react-native';
+import { useCallback, useState } from 'react';
+
+const feedKey = ['feed'];
 
 async function fetchFeed(): Promise<FeedApiResponse> {
   const res = await fetch(`${baseApiUrl}/feed?fid=145`);
@@ -17,14 +19,31 @@ function renderItem({ item }: { item: CastType }) {
 }
 
 export const FeedScreen = buildScreen(() => {
+  const queryClient = useQueryClient();
+
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   const { feed } = useSuspenseQuery({
-    queryKey: ['feed'],
+    queryKey: feedKey,
     queryFn: fetchFeed,
   }).data;
 
+  const onRefresh = useCallback(async () => {
+    try {
+      setIsRefreshing(true);
+      queryClient.setQueryData(feedKey, await fetchFeed());
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [queryClient]);
+
   return (
-    <View className="h-full">
-      <FlashList data={feed} renderItem={renderItem} estimatedItemSize={190} />
-    </View>
+    <FlashList
+      data={feed}
+      renderItem={renderItem}
+      estimatedItemSize={190}
+      refreshing={isRefreshing}
+      onRefresh={onRefresh}
+    />
   );
 });

mobile/src/utils/buildScreen.tsx

@@ -1,12 +1,15 @@
 import { FullscreenLoader } from '@components/loader/FullscreenLoader';
 import { FC, Suspense } from 'react';
+import { SafeAreaView } from 'react-native';
 
 export function buildScreen<Props extends Record<string, unknown>>(
   Component: FC<Props>,
 ) {
   return (props: Props) => (
-    <Suspense fallback={<FullscreenLoader />}>
-      {<Component {...props} />}
-    </Suspense>
+    <SafeAreaView className="flex-1">
+      <Suspense fallback={<FullscreenLoader />}>
+        {<Component {...props} />}
+      </Suspense>
+    </SafeAreaView>
   );
 }

web/src/lib/services/feed.ts

@@ -7,7 +7,7 @@ import { processEmbeds } from './embeds';
 
 export async function getFeed({
   fid,
-  limit = 100,
+  limit = 50,
 }: {
   fid: string;
   limit?: number;