From ea090740b2748148ac00212aa4757e8b97e57c71 Mon Sep 17 00:00:00 2001
From: Sefa Bulak <zckhtln@icloud.com>
Date: Tue, 24 Dec 2024 22:01:34 +0300
Subject: [PATCH 1/3] Update HomeScreen.tsx

---
 src/screens/Blog/HomeScreen.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/screens/Blog/HomeScreen.tsx b/src/screens/Blog/HomeScreen.tsx
index 12692d6..d7e4e95 100644
--- a/src/screens/Blog/HomeScreen.tsx
+++ b/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,
+  Text,
+  View,
+  RefreshControl,
+} from 'react-native';
 
 const BlogHomeScreen = () => {
   const { navigate } = useNavigation<NavigationProp<BlogStackNavigatorParamList>>();
@@ -61,6 +68,14 @@ const BlogHomeScreen = () => {
         onEndReached={postStore.increasePage}
         ListHeaderComponent={RenderListHeader}
         ListEmptyComponent={<ActivityIndicator size="large" color={colors.zinc[600]} />}
+        refreshControl={
+          <RefreshControl
+            refreshing={postStore.loading}
+            onRefresh={async () => {
+              await postStore.getPosts();
+            }}
+          />
+        }
       />
     </View>
   );

From 10ab2c042ba342f7819766ece1f22a15fb725ffc Mon Sep 17 00:00:00 2001
From: Sefa Bulak <zckhtln@icloud.com>
Date: Wed, 25 Dec 2024 11:16:28 +0300
Subject: [PATCH 2/3] Update HomeScreen.tsx

---
 src/screens/Blog/HomeScreen.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/screens/Blog/HomeScreen.tsx b/src/screens/Blog/HomeScreen.tsx
index d7e4e95..fe87c21 100644
--- a/src/screens/Blog/HomeScreen.tsx
+++ b/src/screens/Blog/HomeScreen.tsx
@@ -72,6 +72,8 @@ const BlogHomeScreen = () => {
           <RefreshControl
             refreshing={postStore.loading}
             onRefresh={async () => {
+              postStore.clearAll();
+              postStore.page = 1;
               await postStore.getPosts();
             }}
           />

From 93d73e60e4d01623241b22229ed9196e18b46ae9 Mon Sep 17 00:00:00 2001
From: Sefa Bulak <zckhtln@icloud.com>
Date: Thu, 26 Dec 2024 09:19:49 +0300
Subject: [PATCH 3/3] Improve Pull-to-Refresh and Fix Loading Indicator Issues
 in BlogHomeScreen

This PR addresses the issues reported with the pull-to-refresh functionality and multiple loading indicators in the `BlogHomeScreen`. The following changes have been implemented:

- **Pull-to-Refresh State Management:**
  - Introduced a new `pullToRefresh` state in `postStore` to manage refresh behavior independently of infinite scroll loading.
  - Ensured the `pullToRefresh` state is toggled during the refresh cycle for better control.

- **Page and Data Reset:**
  - Reset the `page` to `1` and cleared existing posts when pull-to-refresh is triggered.
  - Ensured only the first page's posts are retained after refreshing.

- **Improved Loading Indicators:**
  - Separated `loading` and `pullToRefresh` states to prevent overlapping loading indicators.
  - Added a slight delay (`setTimeout`) to smooth the transition after a refresh.

- **Infinite Scroll Compatibility:**
  - Updated the `onEndReached` handler to skip fetching new data if a pull-to-refresh is in progress.
---
 src/screens/Blog/HomeScreen.tsx | 27 ++++++++++++++++-----------
 src/store/PostStore.ts          | 18 +++++++++++++++++-
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/screens/Blog/HomeScreen.tsx b/src/screens/Blog/HomeScreen.tsx
index fe87c21..bf6a5c6 100644
--- a/src/screens/Blog/HomeScreen.tsx
+++ b/src/screens/Blog/HomeScreen.tsx
@@ -13,9 +13,9 @@ import {
   ActivityIndicator,
   FlatList,
   ListRenderItem,
+  RefreshControl,
   Text,
   View,
-  RefreshControl,
 } from 'react-native';
 
 const BlogHomeScreen = () => {
@@ -30,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 })} />
@@ -59,24 +72,16 @@ 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.loading}
-            onRefresh={async () => {
-              postStore.clearAll();
-              postStore.page = 1;
-              await postStore.getPosts();
-            }}
-          />
+          <RefreshControl refreshing={postStore.pullToRefresh} onRefresh={onRefresh} />
         }
       />
     </View>
diff --git a/src/store/PostStore.ts b/src/store/PostStore.ts
index 035dc25..72d06c3 100644
--- a/src/store/PostStore.ts
+++ b/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);
         }