diff --git a/src/App.js b/src/App.js
index 771878d..f5bd15c 100644
--- a/src/App.js
+++ b/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 },
diff --git a/src/components/pages/feed.js b/src/components/pages/feed.js
index 76ab077..9b8fb8e 100644
--- a/src/components/pages/feed.js
+++ b/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) => {
Wow, it sure is a lovely day outside 🌳
+ style = { styles.buttonOlder }
+ onPress = {
+ () => props.navigation.navigate("OlderPosts")
+ }>
See older posts
diff --git a/src/components/pages/feed/older-posts.js b/src/components/pages/feed/older-posts.js
new file mode 100644
index 0000000..fdaf70a
--- /dev/null
+++ b/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
+ ?
+
+
+ : <>>
+ }
+ >
+ );
+};
+
+export default OlderPostsJsx;
diff --git a/src/components/posts/paged-grid.js b/src/components/posts/paged-grid.js
index b631e31..cab3627 100644
--- a/src/components/posts/paged-grid.js
+++ b/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 (
{
props.navigation.navigate("ViewPost", {
@@ -61,11 +47,7 @@ const PagedGridJSX = (props) => {
} />
{
- // TODO: actually get more posts :)
- let morePosts = state.posts.concat(TEST_POSTS);
- setState({...state, posts: morePosts});
- } }>
+ onPress = { props.onShowMore }>
Show more?