From 296c153b4707c18095102c50d4a70de08721d4d9 Mon Sep 17 00:00:00 2001 From: aeroreyna Date: Thu, 24 Mar 2022 22:00:00 -0700 Subject: [PATCH] Valtio and new tab menu --- API.js | 4 ++-- App.js | 19 +++++++++++-------- Views/Courses.js | 12 +++++------- Views/Feed.js | 25 +++++++++++++++---------- Views/NotificationsView.js | 15 ++++++--------- Views/Profile.js | 5 +---- Views/SinglePost.js | 2 +- components/Comment.js | 8 +++++--- components/Post.js | 7 +++++-- components/VideoPlayer.js | 27 ++++++++------------------- contexts/GlobalState.js | 8 ++++++++ package-lock.json | 23 +++++++++++++++++++++++ package.json | 4 +++- 13 files changed, 93 insertions(+), 66 deletions(-) create mode 100644 contexts/GlobalState.js diff --git a/API.js b/API.js index 5762d4d..88d9f71 100644 --- a/API.js +++ b/API.js @@ -59,7 +59,7 @@ let getProfileFromCache = async (id, refresh=false) => { return userNameCache[id]; if (working_on[id] && !refresh) return working_on[id]; - console.log(id, "not in cache, getting...") + //console.log(id, "not in cache, getting...") working_on[id] = getCall("/user/" + id) return working_on[id]; } @@ -67,7 +67,7 @@ let getProfileFromCache = async (id, refresh=false) => { const API = { isLoggedIn: async () => { return getCall().then((data) => { - console.log("isLoggedIn", data) + //console.log("isLoggedIn", data) if (data && data.status && data.status === 'ok') { CurrentUserId = data.userInfo._id; CurrentProfile = data.profileInfo._id; diff --git a/App.js b/App.js index fb26bb7..3af1eea 100644 --- a/App.js +++ b/App.js @@ -3,6 +3,7 @@ import React, { useState, useRef, useEffect } from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { Provider as PaperProvider, DefaultTheme, } from 'react-native-paper'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import Login from "./Views/Login.js" @@ -18,7 +19,7 @@ import * as Notifications from 'expo-notifications'; import API from './API.js'; -const Tab = createMaterialBottomTabNavigator(); +const Tab = createBottomTabNavigator(); const Stack = createNativeStackNavigator(); const theme = { ...DefaultTheme, @@ -106,7 +107,8 @@ const MainNavigation = () => { + barStyle={{ backgroundColor: '#000000' }} + > { tabBarIcon: ({ color }) => ( ), - tabBarBadge: false + header: ()=>{<>}, }} listeners={({ navigation, route }) => ({ tabPress: e => { navigation.navigate('Feed') }, })} + /> { tabBarIcon: ({ color }) => ( ), - tabBarBadge: false + header: ()=>{<>}, }} /> { tabBarIcon: ({ color }) => ( ), - tabBarBadge: false + header: ()=>{<>}, }} /> { tabBarIcon: ({ color }) => ( ), - tabBarBadge: false + header: ()=>{<>}, }} /> { tabBarIcon: ({ color }) => ( ), - tabBarBadge: false + header: ()=>{<>}, }} /> @@ -176,7 +179,7 @@ const MainNavigation = () => { tabBarIcon: ({ color }) => ( ), - tabBarBadge: false + header: ()=>{<>}, }} /> diff --git a/Views/Courses.js b/Views/Courses.js index 92a5d4a..c9caeb4 100644 --- a/Views/Courses.js +++ b/Views/Courses.js @@ -4,6 +4,8 @@ import { ScrollView, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } fro import { Title } from 'react-native-paper'; import API from "../API"; import CourseCard from "../components/CourseCard"; +import { useSnapshot } from 'valtio'; +import GlobalState from '../contexts/GlobalState.js'; const getCourses = async (profileObj) => { @@ -48,7 +50,8 @@ const getCourses = async (profileObj) => { } const Courses = () => { - const [Me, setMeProfile] = React.useState({}); + const gState = useSnapshot(GlobalState); + const viewer = gState.me; const [searchQuery, setSearchQuery] = React.useState(''); const [groups, setGroups] = React.useState([]); const [popular, setPopular] = React.useState([]); @@ -56,12 +59,7 @@ const Courses = () => { const [queryTimer, setQueryTimer] = React.useState(0); useEffect(async () => { - let Me = await API.getMe(); - setMeProfile(Me); - //API.getCourses('').then((data) => { - // setGroups(data.groups || []); - //}); - let r = await getCourses(Me); + let r = await getCourses(viewer); setGroups(r.courses || []); setPopular(r.popular || []); setWatching(r.watching || []); diff --git a/Views/Feed.js b/Views/Feed.js index 6b8a888..2ea2967 100644 --- a/Views/Feed.js +++ b/Views/Feed.js @@ -4,6 +4,8 @@ import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'rea import API from './../API.js'; import Post from './../components/Post.js'; import NewPost from "./../components/NewPost.js"; +import { useSnapshot } from 'valtio'; +import GlobalState from '../contexts/GlobalState.js'; import AsyncStorage from '@react-native-async-storage/async-storage'; @@ -27,27 +29,30 @@ const getFeed = async () => { } let Feed = ({ navigation, route }) => { - let [Me, setMeProfile] = useState({}); let [Posts, setPosts] = useState([]); + console.log("Render Feed"); useEffect(async () => { let loggedIn = await API.isLoggedIn(); if(!loggedIn) return navigation.navigate('Login'); - let cacheFeed = await getFeed() || []; - setPosts(cacheFeed); - let r = await API.getMe(); - setMeProfile(r); if (route.params && route.params.profileid) { navigation.navigate('Profile', { profileid: route.params.profileid }) - } else { - let posts = await API.getPosts(); - setPosts(posts); - storeFeed(posts); } + API.getMe().then((me) => { + GlobalState.me = me; + }); + console.log("Feed from cache") + let cacheFeed = await getFeed() || []; + if(cacheFeed.length) setPosts(cacheFeed); + console.log("Feed from server") + let posts = await API.getPosts(); + setPosts(posts); + storeFeed(posts); + console.log("Feed, end useEffect") }, [route.params]); const renderPost = (({ item }) => { if (item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups') return (<>); - return (); + return (); }); diff --git a/Views/NotificationsView.js b/Views/NotificationsView.js index 483783c..467c56f 100644 --- a/Views/NotificationsView.js +++ b/Views/NotificationsView.js @@ -5,18 +5,15 @@ import { Card } from 'react-native-paper'; import API from '../API.js'; import Post from '../components/Post.js'; import Moment from 'moment'; +import { useSnapshot } from 'valtio'; +import GlobalState from '../contexts/GlobalState.js'; let NotificationsView = ({ navigation, route }) => { - let [Me, setMeProfile] = useState({}); - let [notifications, setNotifications] = useState([]); - useEffect(async () => { - let r = await API.getMe(); - setMeProfile(r); - setNotifications(r.notifications) - }, [route.params]); + const gState = useSnapshot(GlobalState); + const viewer = gState.me; const renderNotification = (({ item }) => { const gotToPost = () => { - navigation.navigate('SinglePost', { postid: item.postid, viewer: Me }); + navigation.navigate('SinglePost', { postid: item.postid }); }; return ( @@ -35,7 +32,7 @@ let NotificationsView = ({ navigation, route }) => { item.ts} /> diff --git a/Views/Profile.js b/Views/Profile.js index 9f5310e..a441123 100644 --- a/Views/Profile.js +++ b/Views/Profile.js @@ -27,14 +27,11 @@ const getProfilePosts = async (profileid) => { } let Profile = ({ navigation, route }) => { - let [Me, setMeProfile] = useState({}); let [Posts, setPosts] = useState([]); let [profile, setProfile] = useState({}); useEffect(async () => { setPosts([]); - let r = await API.getMe(); - setMeProfile(r); if (route.params && route.params.profileid) { console.log('Loading Cache Profile:' + route.params.profileid); getProfilePosts(route.params.profileid).then(setPosts); @@ -56,7 +53,7 @@ let Profile = ({ navigation, route }) => { const renderPost = (({ item }) => { if (item.nonOrganicType) return (<>); - return (); + return (); }); const header = ( diff --git a/Views/SinglePost.js b/Views/SinglePost.js index 21bc517..b03ee09 100644 --- a/Views/SinglePost.js +++ b/Views/SinglePost.js @@ -13,7 +13,7 @@ let SinglePost = ({ route }) => { }, [route]); return (post._id ? ( - + ) : null); }; diff --git a/components/Comment.js b/components/Comment.js index abbe94e..9422fc1 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -3,11 +3,13 @@ import { Text, View, ScrollView, StyleSheet } from 'react-native'; import { FAB, Button, Card, Title, IconButton } from 'react-native-paper'; import API from './../API.js'; import UserName from './UserName.js'; -import Media from './Media.js'; -import AwesomeIcon from 'react-native-vector-icons/FontAwesome'; +import { useSnapshot } from 'valtio'; +import GlobalState from '../contexts/GlobalState.js'; -let Comment = ({ comment, postid, viewer }) => { +let Comment = ({ comment, postid }) => { + const gState = useSnapshot(GlobalState); + const viewer = gState.me; let [likes, changeLikes] = useState(Object.keys(comment.reactions).length); const newCommentReaction = () => { if (!comment.reactions[viewer._id]) { diff --git a/components/Post.js b/components/Post.js index 77abf53..de51347 100644 --- a/components/Post.js +++ b/components/Post.js @@ -8,9 +8,12 @@ import Media from './Media.js'; import Comment from "./Comment"; import NewComment from './NewComment.js'; import Moment from 'moment'; +import { useSnapshot } from 'valtio'; +import GlobalState from '../contexts/GlobalState.js'; let Post = (props) => { - const viewer = props.viewer; + const gState = useSnapshot(GlobalState); + const viewer = gState.me; let [showCommentsB, changeshowCommentsB] = useState(false); let [post, changePost] = useState(props.post); let [likes, changeLikes] = useState(Object.keys(post.reactions).length); @@ -50,7 +53,7 @@ let Post = (props) => { } } const renderComment = ({ item }) => ( - + ); return ( diff --git a/components/VideoPlayer.js b/components/VideoPlayer.js index 283a2cd..4ab36f8 100644 --- a/components/VideoPlayer.js +++ b/components/VideoPlayer.js @@ -2,38 +2,27 @@ import * as React from 'react'; import { View, StyleSheet, Button } from 'react-native'; import { Video, AVPlaybackStatus } from 'expo-av'; import API from '../API'; +import { useSnapshot } from 'valtio'; +import GlobalState from '../contexts/GlobalState.js'; const VideoPlayer = ({ videosFiles, videoId }) => { - //console.log(videosFiles) - let chosenVideo = []; //rendition + const gState = useSnapshot(GlobalState); + const viewer = gState.me; + let chosenVideo = []; videosFiles.forEach((f) => { if (f.rendition === 'adaptive') chosenVideo.push(f); }); const video = React.useRef(null); const [status, setStatus] = React.useState({}); - const [Me, setMeProfile] = React.useState({}); React.useEffect( async ()=>{ - await API.getMe().then(setMeProfile); setTimeout(()=>{ - if(Me.data && Me.data[videoId]){ - //video.setPositionAsync(Me.data[videoId].time*1000); - //status.positionMillis = Me.data[videoId].time*1000; - //setStatus({...status}); - video.current.setPositionAsync(Me.data[videoId].time*1000); + if(viewer.data && viewer.data[videoId]){ + video.current.setPositionAsync(viewer.data[videoId].time*1000); } - - //status.isPlaying = true; - - //playAsync(); - - }, 5000) + }, 5000); }, []) - console.log(status) - - //console.log(status) - return (