From 985cbe6ca16c8223ba354956f7d55009eec5aeb0 Mon Sep 17 00:00:00 2001 From: natjms Date: Mon, 16 May 2022 17:10:06 -0700 Subject: [PATCH] Rewrap pages in ScrollViews --- src/components/pages/discover.js | 56 +++++++--- src/components/pages/discover/search.js | 13 +-- src/components/pages/discover/view-hashtag.js | 34 +++--- src/components/pages/profile.js | 102 ++++++++++-------- src/components/pages/profile/settings.js | 5 +- src/components/posts/grid-view.js | 2 +- src/components/posts/post.js | 7 ++ src/requests.js | 4 +- 8 files changed, 138 insertions(+), 85 deletions(-) diff --git a/src/components/pages/discover.js b/src/components/pages/discover.js index 1f3db1f..2e0ce38 100644 --- a/src/components/pages/discover.js +++ b/src/components/pages/discover.js @@ -1,5 +1,12 @@ import React, { useEffect, useState } from "react"; -import { View, TextInput, Text, Dimensions } from "react-native"; +import { + ScrollView, + TouchableOpacity, + View, + TextInput, + Text, + Dimensions +} from "react-native"; import { TabView, TabBar, SceneMap } from "react-native-tab-view"; @@ -142,24 +149,26 @@ const Discover = (props) => { return ( <> { state.loaded - ? <> - props.navigation.navigate("Search") }> - - - - Search... - - - - + ? + + props.navigation.navigate("Search") + }/> + + + + - + : <> } @@ -169,10 +178,25 @@ const Discover = (props) => { const SCREEN_WIDTH = Dimensions.get("window").width; const styles = { form: { - justifyContent: "center", - backgroundColor: "white", - padding: 20 + container: { + flexDirection: "row", + justifyContent: "center", + backgroundColor: "white", + padding: 20, + }, + + input: { + flexGrow: 1, + padding: 10, + fontSize: 17, + color: "#888" + }, + + submit: { + padding: 20, + } }, + searchBar: { padding: 10, fontSize: 17, diff --git a/src/components/pages/discover/search.js b/src/components/pages/discover/search.js index 279b6ac..4e75504 100644 --- a/src/components/pages/discover/search.js +++ b/src/components/pages/discover/search.js @@ -1,5 +1,6 @@ import React, { useState, useEffect } from "react"; import { + ScrollView, View, TextInput, Text, @@ -7,7 +8,7 @@ import { Image, } from "react-native"; import { TabView, TabBar, SceneMap } from "react-native-tab-view"; -import { FontAwesome } from '@expo/vector-icons'; +import { Ionicons, FontAwesome5 } from '@expo/vector-icons'; import AsyncStorage from "@react-native-async-storage/async-storage"; import * as requests from "src/requests"; @@ -112,7 +113,7 @@ const Search = ({navigation}) => { const [ routes ] = useState([ { key: "accounts", - icon: "user", + icon: "user-alt", }, { key: "hashtags", @@ -152,7 +153,7 @@ const Search = ({navigation}) => { ); const renderIcon = ({ route, color }) => ( - @@ -161,7 +162,7 @@ const Search = ({navigation}) => { return ( <> { state.loaded - ? <> + ? { - + { state.results @@ -194,7 +195,7 @@ const Search = ({navigation}) => { initialLayout = { { width: SCREEN_WIDTH } } /> : <> } - + : <> } diff --git a/src/components/pages/discover/view-hashtag.js b/src/components/pages/discover/view-hashtag.js index d9f422e..c595f9f 100644 --- a/src/components/pages/discover/view-hashtag.js +++ b/src/components/pages/discover/view-hashtag.js @@ -1,14 +1,14 @@ import React, { useState, useEffect } from "react"; -import { View, Image, Dimensions, Text } from "react-native"; +import { ScrollView, View, Image, Dimensions, Text } from "react-native"; import PagedGrid from "src/components/posts/paged-grid"; import * as requests from "src/requests"; import AsyncStorage from "@react-native-async-storage/async-storage"; -const ViewHashtag = ({navigation}) => { +const ViewHashtag = ({ navigation, route }) => { const FETCH_LIMIT = 18; let [state, setState] = useState({ - tag: navigation.getParam("tag", null), + tag: route.params.tag, posts: [], offset: 0, followed: false, @@ -66,10 +66,16 @@ const ViewHashtag = ({navigation}) => { }); }; - const latest = state.tag.history[0]; + // A hashtag's history describes how actively it's being used. There's + // one element in the history array for every set interval of time. + // state.tag.history may be undefined, and its length might be 0. + let latest = null; + if (state.tag.history && state.tag.history.length > 0) { + latest = state.tag.history[0]; + } return ( - <> + @@ -105,17 +111,19 @@ const ViewHashtag = ({navigation}) => { <> { state.loaded && state.posts.length > 0 - ? - : - Nothing to show - + ? state.posts.length > 0 + ? + : + Nothing to show + + : <> } - + ); }; diff --git a/src/components/pages/profile.js b/src/components/pages/profile.js index dc4688a..1090d46 100644 --- a/src/components/pages/profile.js +++ b/src/components/pages/profile.js @@ -6,6 +6,7 @@ import { Text, TouchableOpacity, FlatList, + ScrollView, } from "react-native"; import * as Linking from "expo-linking"; @@ -13,7 +14,12 @@ import AsyncStorage from "@react-native-async-storage/async-storage"; import { activeOrNot } from "src/interface/interactions"; import HTML from "react-native-render-html"; -import { withLeadingAcct, withoutHTML, pluralize } from "src/interface/rendering"; +import { + withLeadingAcct, + withoutHTML, + pluralize, + StatusBarSpace, +} from "src/interface/rendering"; import * as requests from "src/requests"; import GridView from "src/components/posts/grid-view"; @@ -56,11 +62,11 @@ const HTMLLink = ({link}) => { } } -const ViewProfile = ({navigation}) => { +const ViewProfile = ({ navigation, route }) => { // As rendered when opened from somewhere other than the tab bar const [state, setState] = useState({ loaded: false, - profile: navigation.getParam("profile"), + profile: route.params.profile, }); useEffect(() => { @@ -159,9 +165,7 @@ const ViewProfile = ({navigation}) => { return ( <> { state.loaded - ? <> - active = { navigation.getParam("originTab") } - navigation = { navigation }> + ? { listedUsers = { state.listedUsers } followed = { state.followed } posts = { state.posts }/> - + : <> } @@ -184,57 +188,65 @@ const Profile = ({ navigation }) => { loaded: false, }); - useEffect(() => { - let profile; - let notifs; - let domain; - let accessToken; + const init = async () => { + const [ + profilePair, + notifPair, + instancePair, + tokenPair + ] = await AsyncStorage.multiGet([ + "@user_profile", + "@user_notifications", + "@user_instance", + "@user_token", + ]); - AsyncStorage - .multiGet([ + const profile = JSON.parse(profilePair[1]); + const notifs = JSON.parse(notifPair[1]); + const instance = instancePair[1]; + const accessToken = JSON.parse(tokenPair[1]).access_token; + + const latestProfile = + await requests.fetchProfile(instance, profile.id, accessToken); + const posts = + await requests.fetchAccountStatuses(instance, profile.id, accessToken); + const followers = + await requests.fetchFollowers(instance, profile.id, accessToken); + + const latestProfileString = JSON.stringify(latestProfile); + + // Update the profile in AsyncStorage if it's changed + if(latestProfileString != JSON.stringify(profile)) { + await AsyncStorage.setItem( "@user_profile", - "@user_notifications", - "@user_instance", - "@user_token", - ]) - .then(([profilePair, notifPair, domainPair, tokenPair]) => { - profile = JSON.parse(profilePair[1]); - notifs = JSON.parse(notifPair[1]); - domain = domainPair[1]; - accessToken = JSON.parse(tokenPair[1]).access_token; + latestProfileString + ); + } - return Promise.all([ - requests.fetchProfile(domain, profile.id), - requests.fetchAccountStatuses(domain, profile.id, accessToken), - requests.fetchFollowers(domain, profile.id, accessToken), - ]); - }) - .then(([latestProfile, posts, followers]) => { - if(JSON.stringify(latestProfile) != JSON.stringify(profile)) { - profile = latestProfile - } - - setState({...state, - profile: profile, - notifs: notifs, - posts: posts, + setState({...state, + profile: latestProfile, + notifs: notifs, + posts: posts, listedUsers: followers, - loaded: true, - }); - }); - }, []); + loaded: true, + }); + }; + + useEffect(() => { init(); }, []); + return ( <> + { state.loaded - ? <> + ? - + : <> } diff --git a/src/components/pages/profile/settings.js b/src/components/pages/profile/settings.js index 23b2174..667f8a9 100644 --- a/src/components/pages/profile/settings.js +++ b/src/components/pages/profile/settings.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; import { + ScrollView, SafeAreaView, View, TextInput, @@ -134,7 +135,7 @@ const Settings = (props) => { return ( <> { state.loaded - ? <> + ? { - + : <> } diff --git a/src/components/posts/grid-view.js b/src/components/posts/grid-view.js index bf3a5a4..6e11229 100644 --- a/src/components/posts/grid-view.js +++ b/src/components/posts/grid-view.js @@ -40,7 +40,7 @@ const GridView = (props) => { && p.media_attachments.length > 0 ); - let rows = partition(props.posts, 3); + let rows = partition(postsWithMedia, 3); return ( { diff --git a/src/components/posts/post.js b/src/components/posts/post.js index b4cb6ac..6b89acd 100644 --- a/src/components/posts/post.js +++ b/src/components/posts/post.js @@ -80,6 +80,12 @@ export const RawPost = (props) => { }); }; + useEffect(() => { + if (props.onRendered != null) { + props.onRendered(); + } + }, []); + return ( @@ -349,6 +355,7 @@ export const PostByData = (props) => {