Enable fetching public and federated timelines in Discover

src/components/pages/discover.js

@@ -4,16 +4,28 @@ import { View, TextInput, Text, Dimensions } from "react-native";
 import { TabView, TabBar, SceneMap } from "react-native-tab-view";
 
 import { Ionicons } from "@expo/vector-icons";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+import * as requests from "src/requests";
 
 import PagedGridJsx from "src/components/posts/paged-grid";
 import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
+
 const DiscoverJsx = (props) => {
-    const [index, setIndex] = useState(0);
+    const POST_FETCH_PARAMS = {
-    const [routes] = useState([
+        only_media: true,
+        limit: 18,
+    };
+
+    const [ state, setState ] = useState({
+        loaded: false,
+    });
+    const [ index, setIndex ] = useState(0);
+    const [ routes ] = useState([
         {
-            key: "home",
+            key: "local",
             icon: "md-home",
         },
         {
@@ -22,20 +34,92 @@ const DiscoverJsx = (props) => {
         },
     ]);
 
-    const HomeTimeline = () => (
+    useEffect(() => {
+        let instance, accessToken;
+        AsyncStorage.
+            multiGet([
+                "@user_instance",
+                "@user_token",
+            ])
+            .then(([instancePair, tokenPair]) => {
+                instance = instancePair[1];
+                accessToken = JSON.parse(tokenPair[1]).access_token;
+
+                return Promise.all([
+                    requests.fetchPublicTimeline(
+                        instance,
+                        accessToken,
+                        { ...POST_FETCH_PARAMS, local: true, }
+                    ),
+                    requests.fetchPublicTimeline(
+                        instance,
+                        accessToken,
+                        { ...POST_FETCH_PARAMS, remote: true, }
+                    )
+                ]);
+            })
+            .then(([localPosts, federatedPosts]) => {
+                setState({...state,
+                    localPosts,
+                    federatedPosts,
+                    instance,
+                    accessToken,
+                    loaded: true,
+                });
+            })
+    }, []);
+
+    const _handleLocalTabUpdate = async () => {
+        const newPosts = await requests.fetchPublicTimeline(
+            state.instance,
+            state.accessToken,
+            {
+                ...POST_FETCH_PARAMS,
+                local: true,
+                max_id: state.localPosts[state.localPosts.length - 1].id
+            }
+        );
+
+        setState({...state,
+            localPosts: state.localPosts.concat(newPosts),
+        });
+    };
+
+    const _handleFederatedTabUpdate = async () => {
+        const lastId = state.federatedPosts[state.federatedPosts.length - 1].id
+        const newPosts = await requests.fetchPublicTimeline(
+            state.instance,
+            state.accessToken,
+            {
+                ...POST_FETCH_PARAMS,
+                remote: true,
+                max_id: lastId,
+            }
+        );
+
+        setState({...state,
+            federatedPosts: state.federatedPosts.concat(newPosts),
+        });
+    };
+
+    const LocalTimeline = () => (
         <PagedGridJsx
             navigation = { props.navigation }
+            posts = { state.localPosts }
+            onShowMore = { _handleLocalTabUpdate }
             originTab = "Discover" />
     );
 
     const FederatedTimeline = () => (
         <PagedGridJsx
             navigation = { props.navigation }
+            posts = { state.federatedPosts }
+            onShowMore = { _handleFederatedTabUpdate }
             originTab = "Discover" />
     );
 
     const renderScene = SceneMap({
-        home: HomeTimeline,
+        local: LocalTimeline,
         federated: FederatedTimeline,
     });
 
@@ -57,7 +141,9 @@ const DiscoverJsx = (props) => {
     );
 
     return (
-        <ScreenWithTrayJsx
+        <>
+            { state.loaded
+                ? <ScreenWithTrayJsx
                         active = "Discover"
                         navigation = { props.navigation }
                         statusBarColor = "white">
@@ -78,6 +164,9 @@ const DiscoverJsx = (props) => {
                         onIndexChange = { setIndex }
                         initialLayout = { { width: SCREEN_WIDTH } } />
                 </ScreenWithTrayJsx>
+                : <></>
+            }
+        </>
     );
 };
 

src/components/posts/post.js

@@ -78,7 +78,7 @@ export const RawPostJsx = (props) => {
                     style = { styles.pfp }
                     source = { { uri: props.data.account.avatar } } />
                 <Text style = { styles.postHeaderName }>
-                    { props.data.account.username }
+                    { props.data.account.acct }
                 </Text>
                 <ModerateMenuJsx
                     containerStyle = { styles.menu }

src/requests.js

@@ -99,3 +99,12 @@ export async function fetchHomeTimeline(domain, token, params = false) {
     );
     return resp.json();
 }
+
+export async function fetchPublicTimeline(domain, token, params = false) {
+    const resp = await get(
+        `https://${domain}/api/v1/timelines/public`,
+        token,
+        params
+    );
+    return resp.json();
+}