Valtio and new tab menu

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 || []);

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 (<Post post={item} viewer={Me} />);
+        return (<Post post={item} />);
     });
 
 

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 (
             <Card style={{ margin: 3 }} onPress={gotToPost}>
@@ -35,7 +32,7 @@ let NotificationsView = ({ navigation, route }) => {
         <SafeAreaView style={styles.container}>
             <View>
                 <FlatList
-                    data={notifications.reverse().slice(0, 10)}
+                    data={[...viewer.notifications].reverse().slice(0, 10)}
                     renderItem={renderNotification}
                     keyExtractor={item => item.ts}
                 />

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 (<Post post={item} viewer={Me} />);
+        return (<Post post={item} />);
     });
     const header = (
         <View>

Views/SinglePost.js

@@ -13,7 +13,7 @@ let SinglePost = ({ route }) => {
     }, [route]);
     return (post._id ? (
         <ScrollView>
-        <Post post={post} viewer={route.params.viewer} />
+        <Post post={post}/>
         </ScrollView>
     ) : null);
 };