Merge pull request #9 from oktaysenkan/loadmore

Loading more posts when scrolling

src/pages/Recently.js

@@ -1,25 +1,34 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 // TODO : Fix Exhaustive Deps
 import React, {useEffect, useState} from 'react';
-import {FlatList, Alert} from 'react-native';
+import {FlatList, Alert, ActivityIndicator} from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
 import PostPreview from '../components/PostPreview';
 import Header from '../components/Header';
 import PostsLoading from '../components/PostsLoading';
-import getRecentlyPosts from '../requests/getRecentlyPosts';
+import getPosts from '../requests/getPosts';
 
 function Recently() {
   const [recentlyPosts, setRecentlyPosts] = useState([]);
   const [refreshStatus, setRefreshStatus] = useState(false);
+  const [page, setPage] = useState(1);
   function loadPosts() {
-    getRecentlyPosts().then(res => {
+    getPosts().then(res => {
       setRecentlyPosts(res.data.data);
       setRefreshStatus(false);
     });
   }
+  function loadMore() {
+    const newPage = page + 1;
+    getPosts(newPage).then(res => {
+      setRecentlyPosts(recentlyPosts.concat(res.data.data));
+      setPage(newPage);
+    });
+  }
   function refresh() {
     if (!refreshStatus) {
       setRefreshStatus(true);
+      setPage(1);
       loadPosts();
     }
   }
@@ -57,6 +66,9 @@ function Recently() {
           keyExtractor={item => item.slug}
           refreshing={refreshStatus}
           onRefresh={() => refresh()}
+          onEndReachedThreshold={2}
+          onEndReached={() => loadMore()}
+          ListFooterComponent={<ActivityIndicator color="#1d9b54" />}
         />
       ) : (
         <PostsLoading />

src/requests/getPosts.js

@@ -0,0 +1,7 @@
+import instance from './instance';
+
+const getPosts = (page = 1, count = 25) => {
+  return instance.get(`posts?get=${count}&page=${page}`);
+};
+
+export default getPosts;