Implement home timeline requests

This commit is contained in:
Nat 2021-05-05 17:21:55 -03:00
parent 6d0bfa8fd7
commit 995a672270
4 changed files with 103 additions and 38 deletions

View File

@ -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`,

View File

@ -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"
navigation = { props.navigation }>
<>
{ state.loaded
? <ScreenWithTrayJsx
active = "Feed"
navigation = { props.navigation }>
<TimelineViewJsx
navigation = { props.navigation }
posts = { TEST_POSTS } />
<View style = { styles.interruptionOuter }>
<TimelineViewJsx
navigation = { props.navigation }
posts = { state.posts } />
<View style = { styles.interruptionOuter }>
<View style = { styles.interruption }>
<Image
source = { checkmark }
style = { styles.checkmark }/>
<View style = { styles.interruption }>
<Image
source = { checkmark }
style = { styles.checkmark }/>
<Text style = { styles.interruptionHeader }>
You're all caught up.
</Text>
<Text> Wow, it sure is a lovely day outside 🌳 </Text>
<TouchableWithoutFeedback
style = { styles.buttonOlder }>
<Text> See older posts </Text>
</TouchableWithoutFeedback>
</View>
</View>
</ScreenWithTrayJsx>
<Text style = { styles.interruptionHeader }>
You're all caught up.
</Text>
<Text> Wow, it sure is a lovely day outside 🌳 </Text>
<TouchableWithoutFeedback
style = { styles.buttonOlder }>
<Text> See older posts </Text>
</TouchableWithoutFeedback>
</View>
</View>
</ScreenWithTrayJsx>
: <></>
}
</>
);
};

View File

@ -76,9 +76,10 @@ export const RawPostJsx = (props) => {
<View style = { styles.postHeader }>
<Image
style = { styles.pfp }
source = { { uri: props.data.avatar } } />
<Text
style = { styles.postHeaderName }>{ props.data.username }</Text>
source = { { uri: props.data.account.avatar } } />
<Text style = { styles.postHeaderName }>
{ 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>

View File

@ -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) {
return fetch(url, {
export async function get(url, token = false, data = false) {
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();
}