Adding change of profiles and Profile on tab bar

App.js

@@ -207,15 +207,20 @@ const MainNavigation = () => {
                 }}
             />
             <Tab.Screen
-                name="Menu"
-                component={MenuView}
+                name="MyProfile"
+                component={Profile}
                 options={{
-                    tabBarLabel: 'Menu',
+                    tabBarLabel: viewer.profile?.firstName,
                     tabBarIcon: ({ color }) => (
-                        <MaterialIcons name="menu" color={color} size={26} />
+                        <MaterialIcons name="person" color={color} size={26} />
                     ),
                     header: () => { <></> },
                 }}
+                listeners={({ navigation, route }) => ({
+                    tabPress: e => {
+                        navigation.navigate('MyProfile', {profileid: viewer._id});
+                    },
+                })}
             />
             {/*
             <Tab.Screen
@@ -285,6 +290,10 @@ export default function App() {
                         name="Invite"
                         component={InviteView}
                     />
+                    <Stack.Screen
+                        name="Menu"
+                        component={MenuView}
+                    />
                     <Stack.Screen
                         name="Notifications"
                         component={NotificationsView}

Views/Menu.js

@@ -1,45 +1,94 @@
 import React from "react";
-import { View, ImageBackground } from "react-native";
+import { View, ImageBackground, ScrollView } from "react-native";
 import { Text, List, RadioButton } from "react-native-paper";
 import i18n from "../i18nMessages.js";
 import Moment from 'moment';
 import 'moment/min/locales';
 Moment.locale(i18n.locale);
+import API from '../API.js';
+import { useSnapshot } from 'valtio';
+import GlobalState from '../contexts/GlobalState.js';
+import ProfileCardHorizontal from "../components/ProfileCardHorizontal.js";
 
 
-let MenuView = ({navigation})=>{
+let MenuView = ({ navigation }) => {
     const [value, setValue] = React.useState('es');
+    const [myProfiles, setMyProfiles] = React.useState([]);
+    const gState = useSnapshot(GlobalState);
+    const viewer = gState.me;
 
-    let changeLang = (locale) =>{
+    React.useEffect(() => {
+        let subscribed = true;
+        let getData = async () => {
+            const r = await API.getMyProfiles();
+            if (!subscribed) return;
+            setMyProfiles(r.profiles);
+        }
+        getData();
+        return () => {
+            subscribed = false;
+        }
+    }, []);
+
+    let changeLang = (locale) => {
         i18n.locale = locale;
         Moment.locale(locale);
         setValue(locale);
     }
+    const profileLists = myProfiles.map((profile) => {
+        const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
+        let photoUrl = profile.profile?.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;
+        let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : '';
+        icon = icon === "person-outline" && profile.subscription && profile.subscription > (new Date() - 0) ? "assignment-ind" : icon;
+        icon = icon === "group" && profile.isCourse ? "subscriptions" : icon;
+        icon = icon === "group" && profile.isPrivate ? "screen-lock-portrait" : icon;
+        return <>
+            <List.Item
+                title={profile.profile.firstName + " " + profile.profile.lastName}
+                description={profile.profile.description}
+                onPress={async () => { 
+                    await API.changeProfile(profile._id);
+                    GlobalState.me = await API.getMe();
+                }}
+                left={props => <List.Icon {...props} icon={icon} />}
+                titleStyle={{fontWeight:"bold"}}
+                descriptionNumberOfLines={3}
+            />
+        </>
+    })
 
     return (
-        <View>
+        <ScrollView>
             <ImageBackground source={require("../assets/settings.png")}
-                style={{paddingTop:10}} 
-                imageStyle={{resizeMode:"contain", opacity: 0.05}}
+                style={{ paddingTop: 10 }}
+                imageStyle={{ resizeMode: "contain", opacity: 0.05 }}
             >
+                <ProfileCardHorizontal profileObj={viewer} skipFollow={true} skiptOnPress={true} key={viewer._id} />
+                <List.Accordion
+                    title="Change Active Profile"
+                    left={props => <List.Icon {...props} icon="published-with-changes" />}
+                    
+                >
+                    {profileLists}
+                </List.Accordion>
                 <List.Section title="User Actions">
-                <List.Item title={i18n.t('message.profile')} onPress={()=>{navigation.navigate("ProfileSettings")}} left={props => <List.Icon {...props} icon="person" />}  />
+                    <List.Item title={i18n.t('message.profile')} onPress={() => { navigation.navigate("ProfileSettings") }} left={props => <List.Icon {...props} icon="person" />} />
                     <List.Item title={i18n.t('message.settings')} left={props => <List.Icon {...props} icon="settings" />} />
-                <List.Item title={i18n.t('message.logout')} onPress={()=>{navigation.navigate("Logout")}} left={props => <List.Icon {...props} icon="logout" />}  />
+                    <List.Item title={i18n.t('message.logout')} onPress={() => { navigation.navigate("Logout") }} left={props => <List.Icon {...props} icon="logout" />} />
                 </List.Section>
                 <List.Section title="Fellowship App">
-                <List.Item title={i18n.t('message.invite')} onPress={()=>{navigation.navigate("Invite")}} left={props => <List.Icon {...props} icon="person-add" />} />
+                    <List.Item title={i18n.t('message.invite')} onPress={() => { navigation.navigate("Invite") }} left={props => <List.Icon {...props} icon="person-add" />} />
                     <List.Item title={i18n.t('message.about')} left={props => <List.Icon {...props} icon="more" />} />
                 </List.Section>
-            <View style={{padding: 10}}>
-                <Text>Language:</Text>
+                <View style={{ padding: 10 }}>
+                    <Text>App Language:</Text>
                     <RadioButton.Group onValueChange={newValue => changeLang(newValue)} value={value}>
-                    <RadioButton.Item value="es" label="Español"/>
-                    <RadioButton.Item value="en" label="English"/>
+                        <RadioButton.Item value="es" label="Español" />
+                        <RadioButton.Item value="en" label="English" />
                     </RadioButton.Group>
                 </View>
             </ImageBackground>
-        </View>
+        </ScrollView>
     )
 }
 

Views/NewPost.js

@@ -96,7 +96,7 @@ let NewPostView = (props) => {
         API.newPost(postContent + " " + extraContent.join(" "), props.route.params?.toProfile).then((newPost) => {
             setPostContent('');
             setExtraContent([]);
-            navigation.goBack();
+            navigation.navigate('Feed', {reRender: Math.random()});
             //if (newPostCB) newPostCB(newPost);
         });
     }

Views/SelectProfile.js

@@ -0,0 +1,70 @@
+import React from "react";
+import { View, ImageBackground, ScrollView } from "react-native";
+import { Text, List, RadioButton } from "react-native-paper";
+import i18n from "../i18nMessages.js";
+import Moment from 'moment';
+import 'moment/min/locales';
+Moment.locale(i18n.locale);
+import API from '../API.js';
+import { useSnapshot } from 'valtio';
+import GlobalState from '../contexts/GlobalState.js';
+import ProfileCardHorizontal from "../components/ProfileCardHorizontal.js";
+
+
+let MenuView = ({ navigation }) => {
+    const [value, setValue] = React.useState('es');
+    const [myProfiles, setMyProfiles] = React.useState([]);
+    const gState = useSnapshot(GlobalState);
+    const viewer = gState.me;
+
+    React.useEffect(() => {
+        let subscribed = true;
+        let getData = async () => {
+            const r = await API.getMyProfiles();
+            if (!subscribed) return;
+            console.log("profiles", r)
+            setMyProfiles(r);
+        }
+        getData();
+        return () => {
+            subscribed = false;
+        }
+    }, []);
+
+    let changeLang = (locale) => {
+        i18n.locale = locale;
+        Moment.locale(locale);
+        setValue(locale);
+    }
+
+    return (
+        <ScrollView>
+            <ImageBackground source={require("../assets/settings.png")}
+                style={{ paddingTop: 10 }}
+                imageStyle={{ resizeMode: "contain", opacity: 0.05 }}
+            >
+                <List.Section title="Current Profile">
+                    <ProfileCardHorizontal profileObj={viewer} skipFollow={true} skiptOnPress={true} />
+                </List.Section>
+                <List.Section title="User Actions">
+                    <List.Item title={i18n.t('message.profile')} onPress={() => { navigation.navigate("ProfileSettings") }} left={props => <List.Icon {...props} icon="person" />} />
+                    <List.Item title={i18n.t('message.settings')} left={props => <List.Icon {...props} icon="settings" />} />
+                    <List.Item title={i18n.t('message.logout')} onPress={() => { navigation.navigate("Logout") }} left={props => <List.Icon {...props} icon="logout" />} />
+                </List.Section>
+                <List.Section title="Fellowship App">
+                    <List.Item title={i18n.t('message.invite')} onPress={() => { navigation.navigate("Invite") }} left={props => <List.Icon {...props} icon="person-add" />} />
+                    <List.Item title={i18n.t('message.about')} left={props => <List.Icon {...props} icon="more" />} />
+                </List.Section>
+                <View style={{ padding: 10 }}>
+                    <Text>Language:</Text>
+                    <RadioButton.Group onValueChange={newValue => changeLang(newValue)} value={value}>
+                        <RadioButton.Item value="es" label="Español" />
+                        <RadioButton.Item value="en" label="English" />
+                    </RadioButton.Group>
+                </View>
+            </ImageBackground>
+        </ScrollView>
+    )
+}
+
+export default MenuView;