Valtio and new tab menu

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]) {

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 }) => (
-        <Comment comment={item} viewer={viewer} postid={post._id} />
+        <Comment comment={item} postid={post._id} />
     );
     return (
         <Card style={styles.card}>

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 (
     <Video
       ref={video}