Merge pull request #2 from zackha/main

Update BlogHomeScreen to refresh data on pull-down

src/screens/Blog/HomeScreen.tsx

@@ -9,7 +9,14 @@ import colors from '@theme/colors';
 import { text } from '@theme/text';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
-import { ActivityIndicator, FlatList, ListRenderItem, Text, View } from 'react-native';
+import {
+  ActivityIndicator,
+  FlatList,
+  ListRenderItem,
+  RefreshControl,
+  Text,
+  View,
+} from 'react-native';
 
 const BlogHomeScreen = () => {
   const { navigate } = useNavigation<NavigationProp<BlogStackNavigatorParamList>>();
@@ -23,6 +30,19 @@ const BlogHomeScreen = () => {
     [],
   );
 
+  const onEndReached = () => {
+    if (postStore.pullToRefresh) {
+      return;
+    }
+
+    postStore.increasePage();
+  };
+
+  const onRefresh = () => {
+    postStore.setPullToRefresh(true);
+    postStore.getPosts();
+  };
+
   const RenderItem: ListRenderItem<PostType> = ({ item: post }) => (
     <View className="px-5">
       <Post post={post} onPressPost={() => navigate('PostDetail', { post })} />
@@ -52,15 +72,17 @@ const BlogHomeScreen = () => {
       )}
       <FlatList
         windowSize={6}
-        key="blogHome"
         removeClippedSubviews
         initialNumToRender={6}
         maxToRenderPerBatch={6}
         renderItem={RenderItem}
+        onEndReached={onEndReached}
         data={postStore.listingPosts}
-        onEndReached={postStore.increasePage}
         ListHeaderComponent={RenderListHeader}
         ListEmptyComponent={<ActivityIndicator size="large" color={colors.zinc[600]} />}
+        refreshControl={
+          <RefreshControl refreshing={postStore.pullToRefresh} onRefresh={onRefresh} />
+        }
       />
     </View>
   );

src/store/PostStore.ts

@@ -1,6 +1,7 @@
 import { api } from '@services/Api';
 import { removeHtmlAndDecimalEntities } from '@utils/helpers';
 import { ApiPostType } from '@utils/types/BlogTypes';
+import { when } from 'mobx';
 import { Instance, flow, t } from 'mobx-state-tree';
 
 export const Post = t
@@ -53,6 +54,7 @@ const PostStore = t
     page: t.number,
     posts: t.map(Post),
     loading: t.optional(t.boolean, false),
+    pullToRefresh: t.optional(t.boolean, false),
   })
   .views(self => ({
     get listingPosts() {
@@ -94,16 +96,30 @@ const PostStore = t
       self.loading = loading;
     },
 
+    setPullToRefresh(pullToRefresh: boolean) {
+      self.pullToRefresh = pullToRefresh;
+    },
+
     async getPosts() {
       if (!self.url) {
         return;
       }
-
       this.setLoading(true);
 
       try {
+        if (self.pullToRefresh) {
+          self.page = 1;
+        }
         const posts = await api.getPost(self.page);
 
+        if (self.pullToRefresh) {
+          this.clearAll();
+
+          setTimeout(() => {
+            this.setPullToRefresh(false);
+          }, 1000);
+        }
+
         if (posts?.length > 0) {
           posts.forEach(this.addPost);
         }