Fix layout profile

chnirt · chnirt · commit 51aeb68f4a90 · 2020-02-08T13:47:37.000+07:00
diff --git a/src/screens/Home.js b/src/screens/Home.js
@@ -138,6 +138,7 @@ export default function HomeScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: '#fff',
   },
   header: {
     paddingTop: 64,
diff --git a/src/screens/Message.js b/src/screens/Message.js
@@ -14,6 +14,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'transparent',
+    // backgroundColor: 'transparent',
+    backgroundColor: '#fff',
   },
 });
diff --git a/src/screens/Notification.js b/src/screens/Notification.js
@@ -14,6 +14,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'transparent',
+    // backgroundColor: 'transparent',
+    backgroundColor: '#fff',
   },
 });
diff --git a/src/screens/Profile.js b/src/screens/Profile.js
@@ -1,24 +1,85 @@
-import React, {useContext} from 'react';
-import {Text, StyleSheet, View, TouchableOpacity} from 'react-native';
-import * as firebase from 'firebase';
+import React, {useContext, useEffect, useState} from 'react';
+import {Text, StyleSheet, View, TouchableOpacity, Image} from 'react-native';
+import firebase from 'firebase';
 
 import {CTX} from '../tools/context';
 
 export default function ProfileScreen() {
   const authContext = useContext(CTX);
   const {_logout} = authContext;
 
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    profile();
+    // unsubscribe();
+  }, []);
+
+  // let unsubscribe = firebase
+  //   .firestore()
+  //   .collection('users')
+  //   .doc(_uid())
+  //   .onSnapshot(doc => {
+  //     console.log(doc.data());
+  //     setUser(doc.data());
+  //   });
+
   function _onLogout() {
     // NOTE: context
-    _logout();
+    // _logout();
 
     // NOTE: firebase
+    // unsubscribe();
     firebase.auth().signOut();
   }
 
+  function profile() {
+    firebase
+      .firestore()
+      .collection('users')
+      .doc(_uid())
+      .onSnapshot(doc => {
+        // console.log(doc.data());
+        setUser(doc.data());
+      });
+  }
+
+  function _uid() {
+    return (firebase.auth().currentUser || {}).uid;
+  }
+
   return (
     <View style={styles.container}>
-      <Text> Profile </Text>
+      <View style={{marginTop: 64, alignItems: 'center'}}>
+        <View style={styles.avatarContainer}>
+          <Image
+            source={
+              // !user
+              //   ? {uri: user.avatar}
+              //   :
+              require('../assets/avatar/image1.png')
+            }
+            style={styles.avatar}
+          />
+        </View>
+        <Text style={styles.name}>{user && user.fullName}</Text>
+      </View>
+
+      <View style={styles.statsContainer}>
+        <View style={styles.stat}>
+          <Text style={styles.statAmount}>21</Text>
+          <Text style={styles.statTitle}>Posts</Text>
+        </View>
+        <View style={styles.stat}>
+          <Text style={styles.statAmount}>981</Text>
+          <Text style={styles.statTitle}>Followers</Text>
+        </View>
+        <View style={styles.stat}>
+          <Text style={styles.statAmount}>63</Text>
+          <Text style={styles.statTitle}>Following</Text>
+        </View>
+      </View>
+
       <TouchableOpacity onPress={_onLogout}>
         <Text>Log out</Text>
       </TouchableOpacity>
@@ -31,6 +92,42 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'transparent',
+    // backgroundColor: 'transparent',
+    backgroundColor: '#fff',
+  },
+  avatarContainer: {
+    shadowColor: '#151734',
+    shadowRadius: 30,
+    shadowOpacity: 0.4,
+  },
+  avatar: {
+    width: 136,
+    height: 136,
+    borderRadius: 68,
+  },
+  name: {
+    marginTop: 24,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  statsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    margin: 32,
+  },
+  stat: {
+    alignItems: 'center',
+    flex: 1,
+  },
+  statAmount: {
+    color: '#4F566D',
+    fontSize: 18,
+    fontWeight: '300',
+  },
+  statTitle: {
+    color: '#C3C5CD',
+    fontSize: 12,
+    fontWeight: '500',
+    marginTop: 4,
   },
 });
diff --git a/src/screens/Register.js b/src/screens/Register.js
@@ -5,17 +5,18 @@ import {
   View,
   TextInput,
   TouchableOpacity,
+  Image,
 } from 'react-native';
 import {Formik} from 'formik';
 import SafeAreaView from 'react-native-safe-area-view';
-// import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import firebase from 'firebase';
 import {useNavigation} from '@react-navigation/native';
 
 import RegisterSchema from '../validation/Register';
 import {primaryColor} from '../theme';
 
-export default function RegisterScreen(props) {
+export default function RegisterScreen() {
   const navigation = useNavigation();
   const {navigate} = navigation;
 
@@ -28,9 +29,16 @@ export default function RegisterScreen(props) {
       .auth()
       .createUserWithEmailAndPassword(email, password)
       .then(userCredentials => {
-        return userCredentials.user.updateProfile({
-          displayName: fullName,
-        });
+        const uid = userCredentials.user.uid;
+        firebase
+          .firestore()
+          .collection('users')
+          .doc(uid)
+          .set({fullName, phone, email})
+          .then(res => {
+            setErrorMessage('');
+          })
+          .catch(error => setErrorMessage(error.message));
       })
       .catch(error => setErrorMessage(error.message));
 
@@ -48,20 +56,33 @@ export default function RegisterScreen(props) {
   return (
     <SafeAreaView style={styles.container}>
       <Text style={styles.greeting}>Sign up to get started</Text>
-      <View style={styles.errorMessage}>
-        <Text style={styles.error}>{errorMessage}</Text>
-      </View>
+
+      {/* <TouchableOpacity
+        style={styles.back}
+        onPress={() => navigation.goBack()}>
+        <FontAwesome5
+          name="chevron-left"
+          size={32}
+          color="#000000"></FontAwesome5>
+      </TouchableOpacity> */}
+
       {/* <View
         style={{
           // position: 'absolute',
           // top: 64,
           alignItems: 'center',
           width: '100%',
         }}>
-        <TouchableOpacity style={styles.avatar}>
-          <FontAwesome5 name={'heart'} size={24} />
+        <TouchableOpacity style={styles.avatarPlaceholder}>
+          <Image source={null} style={styles.avatar} />
+          <FontAwesome5 name={'plus'} size={24} color="#FFF" />
         </TouchableOpacity>
       </View> */}
+
+      <View style={styles.errorMessage}>
+        <Text style={styles.error}>{errorMessage}</Text>
+      </View>
+
       <Formik
         initialValues={{
           fullName: 'Trinh Chin Chin',
@@ -171,6 +192,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: 30,
   },
+  error: {
+    color: primaryColor,
+    fontSize: 13,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
   form: {
     marginBottom: 48,
     marginHorizontal: 30,
@@ -187,12 +214,6 @@ const styles = StyleSheet.create({
     fontSize: 15,
     color: '#161F3D',
   },
-  error: {
-    color: primaryColor,
-    fontSize: 13,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
   button: {
     marginHorizontal: 30,
     backgroundColor: primaryColor,
@@ -210,4 +231,19 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '500',
   },
+  avatarPlaceholder: {
+    width: 100,
+    height: 100,
+    backgroundColor: '#E1E2E6',
+    borderRadius: 50,
+    marginTop: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  avatar: {
+    position: 'absolute',
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+  },
 });
