Profile Settings

App.js

@@ -20,6 +20,7 @@ import i18n from "./i18nMessages.js";
 import NewPostView from './Views/NewPost.js';
 import { TouchableOpacity, View } from 'react-native';
 import MenuView from './Views/Menu.js';
+import ProfileSettings from './Views/ProfileSettings.js';
 
 
 const Tab = createBottomTabNavigator();
@@ -156,7 +157,7 @@ const MainNavigation = () => {
                         <TouchableOpacity 
                             onPress={props.onPress}
                             style={{
-                                top: -27,
+                                top: -17,
                                 justifyContent: 'center',
                                 alignItems: 'center',
                                 
@@ -250,6 +251,10 @@ export default function App() {
                         name="Search"
                         component={Search}
                     />
+                    <Stack.Screen
+                        name="ProfileSettings"
+                        component={ProfileSettings}
+                    />
                     <Stack.Screen
                         name="Notifications"
                         component={NotificationsView}

Views/Menu.js

@@ -1,38 +1,36 @@
 import React from "react";
 import { View } from "react-native";
 import { Text, List, RadioButton } from "react-native-paper";
-import { SafeAreaView } from "react-native-safe-area-context";
 import i18n from "../i18nMessages.js";
 import Moment from 'moment';
 import 'moment/min/locales';
 Moment.locale(i18n.locale);
 
 
-let MenuView = ()=>{
+let MenuView = ({navigation})=>{
     const [value, setValue] = React.useState('es');
 
-    React.useEffect(()=>{
-        i18n.locale = value;
-        Moment.updateLocale(i18n.locale);
-    }, [value])
+    let changeLang = (locale) =>{
+        i18n.locale = locale;
+        Moment.locale(locale);
+        setValue(locale);
+    }
     
     return (
         <View>
             <List.Section title="User Actions">
+                <List.Item title="Profile" onPress={()=>{navigation.navigate("ProfileSettings")}} left={props => <List.Icon {...props} icon="person" />}  />
                 <List.Item title="Settings" left={props => <List.Icon {...props} icon="settings" />}  />
                 <List.Item title="Sign out" left={props => <List.Icon {...props} icon="logout" />}  />
+            </List.Section>
+            <List.Section title="Fellowship App">
                 <List.Item title="About" left={props => <List.Icon {...props} icon="more" />} />
             </List.Section>
-            <View>
-                <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
-                    <View>
-                        <Text>Español</Text>
-                        <RadioButton value="es" />
-                    </View>
-                    <View>
-                        <Text>English</Text>
-                        <RadioButton value="en" />
-                    </View>
+            <View style={{padding: 10}}>
+                <Text>Lenguage:</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>
         </View>

Views/ProfileSettings.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { View } from "react-native";
+import { Text, TextInput, RadioButton, Divider } from "react-native-paper";
+import i18n from "../i18nMessages.js";
+import Moment from 'moment';
+import 'moment/min/locales';
+import ProfileCardHorizontal from "../components/ProfileCardHorizontal.js";
+Moment.locale(i18n.locale);
+import { useSnapshot } from 'valtio';
+import GlobalState from '../contexts/GlobalState.js';
+
+
+let ProfileSettings = ()=>{
+    const gState = useSnapshot(GlobalState);
+    const viewer = gState.me;
+    return (
+        <View style={{
+            padding: 10
+        }}>
+            <Text style={{marginBottom:10, fontSize:20}}>Profile Settings</Text>
+            <View style={{flexDirection:"row", justifyContent:"space-between"}}>
+                <TextInput
+                    label="First Name"
+                    style={{width:"48%", backgroundColor:"rgba(0,0,0,0)"}}
+                    value={gState.me.profile.firstName}
+                    //onChangeText={text => setText(text)}
+                />
+                <TextInput
+                    label="Last Name"
+                    style={{width:"48%", backgroundColor:"rgba(0,0,0,0)"}}
+                    value={gState.me.profile.lastName}
+                    //onChangeText={text => setText(text)}
+                />
+            </View>
+            <TextInput
+                label="Description"
+                style={{backgroundColor:"rgba(0,0,0,0)"}}
+                multiline={true}
+                numberOfLines={3}
+                value={gState.me.profile.description}
+                //onChangeText={text => setText(text)}
+            />
+            <Divider />
+            <View style={{paddingTop: 10}}>
+                <ProfileCardHorizontal profileObj={gState.me} skipFollow={true} skiptOnPress={true} />
+            </View>
+        </View>
+    )
+}
+
+export default ProfileSettings;

Views/Search.js

@@ -40,12 +40,11 @@ const Search = () => {
         return (<ProfileCardHorizontal profileid={item} />);
     });
     return (
-        <SafeAreaView style={{ flex: 1 }}>
+        <SafeAreaView style={{ flex: 1, backgroundColor: "#edf2f7", }}>
             <Searchbar
                 placeholder="Search Users"
                 onChangeText={onChangeSearch}
                 value={searchQuery}
-                elevation={3}
             />
             {
             searchQuery.length ? 
@@ -56,16 +55,14 @@ const Search = () => {
                 renderItem={renderProfile}
                 keyExtractor={item => item._id}
             /> :
-            <>
-            <Text>Current Following:</Text>
             <FlatList
                 contentContainerStyle={styles.container}
                 numColumns={1}
                 data={viewer.following}
                 renderItem={renderFollowing}
                 keyExtractor={item => item}
+                ListHeaderComponent={<Text style={{fontSize:20, padding:10, alignSelf: "center"}}>Current Following</Text>}
             />
-            </>
         }
         </SafeAreaView>
     )

components/ProfileCardHorizontal.js

@@ -28,7 +28,7 @@ const getName = async (key) => {
     }
 }
 
-let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj }) => {
+let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj, skipFollow, skiptOnPress }) => {
     let [profile, setProfile] = useState(profileObj || {});
     const navigation = useNavigation();
 
@@ -54,13 +54,14 @@ let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj }) => {
     let photoUrl = profile.profile?.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;
 
     const onPress = () => {
+        if(skiptOnPress) return 0;
         return navigation.navigate('Profile', { profileid: profile._id })
     }
 
     return (
         <Card style={styles.content} mode="elevated">
             <Card.Content>
-                <View style={{ flexDirection: "row" }}>
+                <View style={{ flexDirection: "row", alignItems: "center" }}>
                     <View onPress={onPress}>
                         <Avatar.Image size={75} source={{ uri: photoUrl }} />
                     </View>
@@ -74,6 +75,7 @@ let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj }) => {
                     </View>
 
                 </View>
+                {skipFollow ? <></> :
                     <View style={{
                         position: "absolute",
                         top: 0,
@@ -86,6 +88,7 @@ let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj }) => {
                     }}>
                         <FollowButton profile={profile._id ? profile : { _id: profileid }} />
                     </View>
+                }
             </Card.Content>
         </Card>
     );