From bf0807ba8c66417010c48bb85da07b8f2e0f44cf Mon Sep 17 00:00:00 2001
From: Adolfo Reyna <aeroreyna@gmail.com>
Date: Fri, 23 Dec 2022 00:17:36 -0500
Subject: [PATCH] Profile Settings

---
 App.js                              |  7 +++-
 Views/Menu.js                       | 30 ++++++++---------
 Views/ProfileSettings.js            | 51 +++++++++++++++++++++++++++++
 Views/Search.js                     |  7 ++--
 components/ProfileCardHorizontal.js | 31 ++++++++++--------
 5 files changed, 90 insertions(+), 36 deletions(-)
 create mode 100644 Views/ProfileSettings.js

diff --git a/App.js b/App.js
index 7d1916d..c8c86fc 100644
--- a/App.js
+++ b/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}
diff --git a/Views/Menu.js b/Views/Menu.js
index c9ab803..0e4fa10 100644
--- a/Views/Menu.js
+++ b/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>
diff --git a/Views/ProfileSettings.js b/Views/ProfileSettings.js
new file mode 100644
index 0000000..cc51d4a
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/Views/Search.js b/Views/Search.js
index 0d437aa..15418ef 100644
--- a/Views/Search.js
+++ b/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>
     )
diff --git a/components/ProfileCardHorizontal.js b/components/ProfileCardHorizontal.js
index 317d10b..75b7a98 100644
--- a/components/ProfileCardHorizontal.js
+++ b/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,18 +75,20 @@ let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj }) => {
                     </View>
 
                 </View>
-                <View style={{
-                    position: "absolute",
-                    top: 0,
-                    right: 0,
-                    width: 50,
-                    height: 50,
-                    backgroundColor:"#ddd",
-                    borderRadius: 25,
-                    opacity: 0.7
-                }}>
-                    <FollowButton profile={profile._id ? profile : { _id: profileid }} />
-                </View>
+                {skipFollow ? <></> :
+                    <View style={{
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        width: 50,
+                        height: 50,
+                        backgroundColor:"#ddd",
+                        borderRadius: 25,
+                        opacity: 0.7
+                    }}>
+                        <FollowButton profile={profile._id ? profile : { _id: profileid }} />
+                    </View>
+                }
             </Card.Content>
         </Card>
     );