Implement home timeline requests

src/components/pages/authenticate.js

@@ -55,7 +55,7 @@ const AuthenticateJsx = ({navigation}) => {
             .then(resp => resp.json());
 
         // Store the token
-        AsyncStorage.setItem("@user_token", JSON.stringify(token));
+        await AsyncStorage.setItem("@user_token", JSON.stringify(token));
 
         const profile = await requests.get(
             `${api}/api/v1/accounts/verify_credentials`,

src/components/pages/feed.js

@@ -1,10 +1,14 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Dimensions, View, Image, Text } from "react-native";
 
 import TimelineViewJsx from "src/components/posts/timeline-view";
 import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+import * as requests from "src/requests";
+
 const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
 
 const TEST_POSTS = [
@@ -40,35 +44,68 @@ const TEST_POSTS = [
 
 const FeedJsx = (props) => {
     const checkmark = require("assets/eva-icons/checkmark-circle-large.png");
+    const [state, setState] = useState({
+        loaded: false,
+    });
+
+    useEffect(() => {
+        let accessToken;
+        let instance;
+
+        AsyncStorage
+            .multiGet([
+                "@user_token",
+                "@user_instance",
+            ])
+            .then(([tokenPair, instancePair]) => {
+                accessToken = JSON.parse(tokenPair[1]).access_token;
+                instance = instancePair[1];
+
+                return requests.fetchHomeTimeline(
+                    instance,
+                    accessToken
+                )
+            })
+            .then(posts =>
+                setState({...state,
+                    posts: posts,
+                    loaded: true,
+                })
+            );
+    }, []);
 
     return (
-        <ScreenWithTrayJsx
+        <>
-                active = "Feed"
+            { state.loaded
-                navigation = { props.navigation }>
+                ? <ScreenWithTrayJsx
+                        active = "Feed"
+                        navigation = { props.navigation }>
 
-            <TimelineViewJsx
+                    <TimelineViewJsx
-                    navigation = { props.navigation }
+                            navigation = { props.navigation }
-                    posts = { TEST_POSTS } />
+                            posts = { state.posts } />
-            <View style = { styles.interruptionOuter }>
+                    <View style = { styles.interruptionOuter }>
 
-                <View style = { styles.interruption }>
+                        <View style = { styles.interruption }>
-                    <Image
+                            <Image
-                        source = { checkmark }
+                                source = { checkmark }
-                        style = { styles.checkmark }/>
+                                style = { styles.checkmark }/>
 
-                    <Text style = { styles.interruptionHeader }>
+                            <Text style = { styles.interruptionHeader }>
-                        You're all caught up.
+                                You're all caught up.
-                    </Text>
+                            </Text>
-                    <Text> Wow, it sure is a lovely day outside 🌳 </Text>
+                            <Text> Wow, it sure is a lovely day outside 🌳 </Text>
-
-                    <TouchableWithoutFeedback
-                            style = { styles.buttonOlder }>
-                        <Text> See older posts </Text>
-                    </TouchableWithoutFeedback>
-                </View>
-            </View>
-        </ScreenWithTrayJsx>
 
+                            <TouchableWithoutFeedback
+                                    style = { styles.buttonOlder }>
+                                <Text> See older posts </Text>
+                            </TouchableWithoutFeedback>
+                        </View>
+                    </View>
+                </ScreenWithTrayJsx>
+                : <></>
+            }
+        </>
     );
 };
 

src/components/posts/post.js

@@ -76,9 +76,10 @@ export const RawPostJsx = (props) => {
             <View style = { styles.postHeader }>
                 <Image
                     style = { styles.pfp }
-                    source = { { uri: props.data.avatar } } />
+                    source = { { uri: props.data.account.avatar } } />
-                <Text
+                <Text style = { styles.postHeaderName }>
-                    style = { styles.postHeaderName }>{ props.data.username }</Text>
+                    { props.data.account.username }
+                </Text>
                 <ModerateMenuJsx
                     containerStyle = { styles.menu }
                     triggerStyle = { styles.ellipsis } />
@@ -112,7 +113,10 @@ export const RawPostJsx = (props) => {
                 reblogged = { props.data.reblogged } />
             <View style = { styles.caption }>
                 <Text>
-                    <Text style = { styles.strong }>{ props.data.username }</Text>&nbsp;{ props.data.content }
+                    <Text style = { styles.strong }>
+                        { props.data.account.username }
+                    </Text>
+                    &nbsp;{ props.data.content }
                 </Text>
                 <TouchableWithoutFeedback
                       onPress = {
@@ -127,7 +131,7 @@ export const RawPostJsx = (props) => {
                 </TouchableWithoutFeedback>
 
                 <Text style = { styles.captionDate }>
-                    { timeToAge((new Date()).getTime(), props.data.timestamp) }
+                    { timeToAge((new Date()).getTime(), props.data.created_at) }
                 </Text>
             </View>
         </View>

src/requests.js

@@ -4,6 +4,16 @@ const TEST_NOTIFICATIONS = [{ id: 1 }, { id: 2 }];
 const TEST_NEW_NOTIFICATIONS_1 = [{ id: 1 }, { id: 2 }];
 const TEST_NEW_NOTIFICATIONS_2 = [{ id: 1 }, { id: 2 }, { id: 3 }];
 
+function objectToForm(obj) {
+    let form = new FormData();
+
+    Object.keys(obj).forEach(key =>
+        form.append(key, obj[key])
+    );
+
+    return form;
+}
+
 export async function checkUnreadNotifications() {
     // If the check has already been made since the last time notifications.js
     // has been opened
@@ -31,14 +41,9 @@ export async function checkUnreadNotifications() {
 
 export async function postForm(url, data, token = false) {
     // Send a POST request with data formatted with FormData returning JSON
-    let form = new FormData();
-    for (let key in data) {
-        form.append(key, data[key]);
-    }
-
     const resp = await fetch(url, {
         method: "POST",
-        body: form,
+        body: objectToForm(data),
         headers: token
             ? { "Authorization": `Bearer ${token}`, }
             : {},
@@ -47,13 +52,23 @@ export async function postForm(url, data, token = false) {
     return resp;
 }
 
-export function get(url, token = false) {
+export async function get(url, token = false, data = false) {
-    return fetch(url, {
+    let completeURL;
+    if (data) {
+        let params = new URLSearchParams(data)
+        completeURL = `${url}?${params.toString()}`;
+    } else {
+        completeURL = url;
+    }
+
+    const resp = await fetch(completeURL, {
         method: "GET",
         headers: token
             ? { "Authorization": `Bearer ${token}`, }
             : {},
     });
+
+    return resp;
 }
 
 export async function fetchProfile(domain, id) {
@@ -70,3 +85,12 @@ export async function fetchFollowers(domain, id, token) {
     const resp = await get(`https://${domain}/api/v1/accounts/${id}/followers`, token);
     return resp.json();
 }
+
+export async function fetchHomeTimeline(domain, token, params = false) {
+    const resp = await get(
+        `https://${domain}/api/v1/timelines/home`,
+        token,
+        params
+    );
+    return resp.json();
+}