Add pull to refresh

kadikraman · Nov 18, 2021 · 4824fda · 4824fda
1 parent 51b5ade
commit 4824fda
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/src/screens/Bookmarks.screen.tsx b/src/screens/Bookmarks.screen.tsx
@@ -29,14 +29,27 @@ const BOOKMARKS_QUERY = gql`
 `;
 
 export const BookmarksScreen: React.FC = () => {
-  const [{ data, error, fetching }] = useQuery<
+  const [{ data, error, fetching }, refreshBookmarks] = useQuery<
     AllBookmarksQuery,
     AllBookmarksQueryVariables
   >({
     query: BOOKMARKS_QUERY,
   });
 
-  if (fetching) {
+  const [isRefreshing, setIsRefreshing] = React.useState(false);
+
+  const handleRefreshBookmarks = React.useCallback(() => {
+    setIsRefreshing(true);
+    refreshBookmarks({ requestPolicy: 'network-only' });
+  }, [refreshBookmarks]);
+
+  React.useEffect(() => {
+    if (!fetching) {
+      setIsRefreshing(false);
+    }
+  }, [fetching]);
+
+  if (fetching && !isRefreshing) {
     return (
       <View style={styles.container}>
         <ActivityIndicator color="grey" />
@@ -54,6 +67,8 @@ export const BookmarksScreen: React.FC = () => {
 
   return (
     <FlatList
+      refreshing={isRefreshing}
+      onRefresh={handleRefreshBookmarks}
       contentContainerStyle={styles.flatListContainer}
       style={styles.flatList}
       data={data?.bookmarks}

diff --git a/src/screens/Home.screen.tsx b/src/screens/Home.screen.tsx
@@ -25,12 +25,24 @@ const STORIES_QUERY = gql`
 `;
 
 export const HomeScreen: React.FC = () => {
-  const [{ data, error, fetching }] = useQuery<
+  const [{ data, error, fetching }, refreshStories] = useQuery<
     AllStoriesQuery,
     AllStoriesQueryVariables
   >({ query: STORIES_QUERY });
+  const [isRefreshing, setIsRefreshing] = React.useState(false);
 
-  if (fetching) {
+  const handleRefreshStories = React.useCallback(() => {
+    setIsRefreshing(true);
+    refreshStories({ requestPolicy: 'network-only' });
+  }, [refreshStories]);
+
+  React.useEffect(() => {
+    if (!fetching) {
+      setIsRefreshing(false);
+    }
+  }, [fetching]);
+
+  if (fetching && !isRefreshing) {
     return (
       <View style={styles.container}>
         <ActivityIndicator color="grey" />
@@ -48,6 +60,8 @@ export const HomeScreen: React.FC = () => {
 
   return (
     <FlatList
+      refreshing={isRefreshing}
+      onRefresh={handleRefreshStories}
       contentContainerStyle={styles.flatListContainer}
       style={styles.flatList}
       data={data?.stories}