Add page to display older posts from the home timeline

src/App.js

@@ -13,6 +13,7 @@ import ViewCommentsJsx from "src/components/pages/view-comments.js";
 
 import AuthenticateJsx from "src/components/pages/authenticate";
 import FeedJsx from "src/components/pages/feed";
+import OlderPostsJsx from "src/components/pages/feed/older-posts";
 import ProfileJsx, { ViewProfileJsx } from "src/components/pages/profile";
 import DiscoverJsx from 'src/components/pages/discover';
 import SearchJsx from 'src/components/pages/discover/search';
@@ -29,6 +30,7 @@ const Stack = createStackNavigator({
         path: "authenticate",
     },
     Feed: { screen: FeedJsx, },
+    OlderPosts: { screen: OlderPostsJsx },
     Discover: { screen: DiscoverJsx },
     Direct: { screen: DirectJsx },
     Compose: { screen: ComposeJsx },

src/components/pages/feed.js

@@ -27,8 +27,9 @@ const FeedJsx = (props) => {
             .then(([tokenPair, instancePair, latestPair]) => {
                 accessToken = JSON.parse(tokenPair[1]).access_token;
                 instance = instancePair[1];
-                // NOTE: This is just a number, but the Pixelfed API will not
-                // accept query params like ?min_id="123" so it must be parsed
+                // NOTE: `latest` is just a number, but the Pixelfed API will
+                // not accept query params like ?min_id="123" so it must be
+                // parsed
                 const latest = JSON.parse(latestPair[1]);
                 const params = { limit: 20 };
 
@@ -85,7 +86,10 @@ const FeedJsx = (props) => {
                             <Text> Wow, it sure is a lovely day outside 🌳 </Text>
 
                             <TouchableWithoutFeedback
-                                    style = { styles.buttonOlder }>
+                                    style = { styles.buttonOlder }
+                                    onPress = {
+                                        () => props.navigation.navigate("OlderPosts")
+                                    }>
                                 <Text> See older posts </Text>
                             </TouchableWithoutFeedback>
                         </View>

src/components/pages/feed/older-posts.js

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+import * as requests from "src/requests";
+import { ScreenWithBackBarJsx } from "src/components/navigation/navigators";
+import PagedGridJsx from "src/components/posts/paged-grid";
+
+// The number of posts to fetch at a time
+const POST_FETCH_LIMIT = 18;
+
+const OlderPostsJsx = (props) => {
+    const [ state, setState ] = useState({
+        loaded: false,
+    });
+
+    useEffect(() => {
+        let instance, accessToken, latestId;
+        AsyncStorage
+            .multiGet([
+                "@user_instance",
+                "@user_token",
+                "@user_latestPostId"
+            ])
+            .then(([instancePair, tokenPair, latestPair]) => {
+                instance = instancePair[1];
+                accessToken = JSON.parse(tokenPair[1]).access_token;
+                latestId = JSON.parse(latestPair[1]);
+
+                return requests.fetchHomeTimeline(instance, accessToken, {
+                    max_id: latestId,
+                    limit: POST_FETCH_LIMIT,
+                })
+            })
+            .then(posts => {
+                setState({...state,
+                    posts: posts,
+                    instance: instance,
+                    accessToken: accessToken,
+                    loaded: true,
+                });
+            })
+    }, []);
+
+    const _handleShowMore = async () => {
+        const newPosts = await requests.fetchHomeTimeline(
+            state.instance,
+            state.accessToken,
+            {
+                max_id: state.posts[state.posts.length - 1].id,
+                limit: POST_FETCH_LIMIT,
+            }
+        );
+
+        setState({...state,
+            posts: state.posts.concat(newPosts),
+        });
+    };
+
+    return (
+        <>
+            { state.loaded
+                ? <ScreenWithBackBarJsx navigation = { props.navigation }>
+                    <PagedGridJsx
+                        posts = { state.posts }
+                        onShowMore = { _handleShowMore }
+                        navigation = { props.navigation }/>
+                </ScreenWithBackBarJsx>
+                : <></>
+            }
+        </>
+    );
+};
+
+export default OlderPostsJsx;

src/components/posts/paged-grid.js

@@ -32,25 +32,11 @@ const TEST_POSTS = [
 ];
 
 const PagedGridJSX = (props) => {
-    let [state, setState] = useState({
-        posts: [],
-        loaded: false
-    });
-
-    useEffect(() => {
-        if (!state.loaded) {
-            // TODO: actually get posts :)
-            setState({
-                posts: TEST_POSTS,
-                loaded: true
-            });
-        }
-    });
-
     return (
         <View>
             <GridViewJsx
-                    posts = { state.posts }
+                    posts = { props.posts }
+                    navigation = { props.navigation }
                     openPostCallback = {
                         (id) => {
                             props.navigation.navigate("ViewPost", {
@@ -61,11 +47,7 @@ const PagedGridJSX = (props) => {
                     } />
             <View style = { styles.buttonContainer }>
                 <TouchableOpacity
-                        onPress = { () => {
-                            // TODO: actually get more posts :)
-                            let morePosts = state.posts.concat(TEST_POSTS);
-                            setState({...state, posts: morePosts});
-                        } }>
+                        onPress = { props.onShowMore }>
                     <View style = { styles.buttonMore }>
                         <Text>Show more?</Text>
                     </View>