added profile screen

CccGm · Jan 2, 2024 · 6268ac9 · 6268ac9
1 parent 79d500f
commit 6268ac9
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 37 deletions.
diff --git a/App.js b/App.js
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {SafeAreaView, StatusBar} from 'react-native';
+import {SafeAreaView, StatusBar, Text, View} from 'react-native';
 import ChatScreen from './src/screens/ChatScreen';
 import SignUpScreen from './src/screens/SignUpScreen';
 import {DefaultTheme, Provider as PaperProvider} from 'react-native-paper';
@@ -8,7 +8,8 @@ import {createStackNavigator} from '@react-navigation/stack';
 import {NavigationContainer} from '@react-navigation/native';
 import auth from '@react-native-firebase/auth';
 import HomeScreen from './src/screens/HomeScreen';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import fireStore from '@react-native-firebase/firestore';
+import ProfileScreen from './src/screens/ProfileScreen';
 
 const theme = {
   ...DefaultTheme,
@@ -25,8 +26,12 @@ function MyStack() {
   const [user, setUser] = useState('');
   useEffect(() => {
     const unRegister = auth().onAuthStateChanged(userExist => {
-      if (userExist) setUser(userExist);
-      else setUser('');
+      if (userExist) {
+        setUser(userExist);
+        fireStore().collection('users').doc(userExist.uid).update({
+          status: 'online',
+        });
+      } else setUser('');
     });
 
     return () => {
@@ -46,23 +51,29 @@ function MyStack() {
               name="Home"
               options={{
                 title: 'Chat Message',
-                headerRight: () => (
-                  <MaterialIcons
-                    name="account-circle"
-                    size={34}
-                    color={'green'}
-                    style={{marginRight: 20}}
-                    onPress={() => auth().signOut()}
-                  />
-                ),
+                headerTitleAlign: 'center',
               }}>
               {props => <HomeScreen {...props} user={user} />}
             </Stack.Screen>
             <Stack.Screen
               name="Chat"
-              options={({route}) => ({title: route.params.name})}>
+              options={({route}) => ({
+                title: (
+                  <View>
+                    <Text style={{fontSize: 18, color: 'green'}}>
+                      {route.params.name}
+                    </Text>
+                    <Text style={{fontSize: 12, color: 'black'}}>
+                      {route.params.status}
+                    </Text>
+                  </View>
+                ),
+              })}>
               {props => <ChatScreen {...props} user={user} />}
             </Stack.Screen>
+            <Stack.Screen name="Profile">
+              {props => <ProfileScreen {...props} user={user} />}
+            </Stack.Screen>
           </>
         ) : (
           <>

diff --git a/src/screens/ChatScreen.js b/src/screens/ChatScreen.js
@@ -1,32 +1,66 @@
 import React, {useEffect, useState} from 'react';
 import {Text, View} from 'react-native';
-import {Bubble, GiftedChat} from 'react-native-gifted-chat';
+import {Bubble, GiftedChat, InputToolbar} from 'react-native-gifted-chat';
 import fireStore from '@react-native-firebase/firestore';
 
 const ChatScreen = ({user, route}) => {
   const [messages, setMessages] = useState([]);
   const {uid} = route.params;
 
+  // https://source.unsplash.com/1024x768/?nature
+
   useEffect(() => {
-    getAllmessage();
-  }, []);
+    // getAllmessage();
 
-  const getAllmessage = async () => {
     const docId = uid > user.uid ? user.uid + '-' + uid : uid + '-' + user.uid;
-    const querySnap = await fireStore()
+    const messageRef = fireStore()
       .collection('chatrooms')
       .doc(docId)
       .collection('messages')
-      .orderBy('createdAt', 'desc')
-      .get();
-    const allmsg = querySnap.docs.map(docSnap => {
-      return {
-        ...docSnap.data(),
-        createdAt: docSnap.data().createdAt.toDate(),
-      };
+      .orderBy('createdAt', 'desc');
+
+    const unSubscribe = messageRef.onSnapshot(querySnap => {
+      const allmsg = querySnap.docs.map(docSnap => {
+        const data = docSnap.data();
+
+        if (data.createdAt) {
+          return {
+            ...docSnap.data(),
+            createdAt: docSnap.data().createdAt.toDate(),
+            avatar: 'https://source.unsplash.com/1024x768/?nature',
+          };
+        } else {
+          return {
+            ...docSnap.data(),
+            createdAt: new Date(),
+            avatar: 'https://source.unsplash.com/1024x768/?nature',
+          };
+        }
+      });
+      setMessages(allmsg);
     });
-    setMessages(allmsg);
-  };
+
+    return () => {
+      unSubscribe();
+    };
+  }, []);
+
+  // const getAllmessage = async () => {
+  //   const docId = uid > user.uid ? user.uid + '-' + uid : uid + '-' + user.uid;
+  //   const querySnap = await fireStore()
+  //     .collection('chatrooms')
+  //     .doc(docId)
+  //     .collection('messages')
+  //     .orderBy('createdAt', 'desc')
+  //     .get();
+  //   const allmsg = querySnap.docs.map(docSnap => {
+  //     return {
+  //       ...docSnap.data(),
+  //       createdAt: docSnap.data().createdAt.toDate(),
+  //     };
+  //   });
+  //   setMessages(allmsg);
+  // };
 
   const onSend = messagesArray => {
     const msg = messagesArray[0];
@@ -48,7 +82,7 @@ const ChatScreen = ({user, route}) => {
   };
 
   return (
-    <View style={{flex: 1}}>
+    <View style={{flex: 1, backgroundColor: 'white'}}>
       <GiftedChat
         messages={messages}
         onSend={messages => onSend(messages)}
@@ -61,15 +95,27 @@ const ChatScreen = ({user, route}) => {
               {...props}
               wrapperStyle={{
                 right: {
-                  backgroundColor: 'orange',
+                  backgroundColor: '#7be227e5',
+                },
+                left: {
+                  backgroundColor: '#88e99340',
                 },
               }}
             />
           );
         }}
+        // renderInputToolbar={props => {
+        //   return (
+        //     <InputToolbar
+        //       {...props}
+        //       containerStyle={{borderTopWidth: 1.5, borderColor: '#333'}}
+        //     />
+        //   );
+        // }}
       />
     </View>
   );
 };
 
 export default ChatScreen;
+// /chatrooms/JAR2PkfKpVhlitYGTwYRlafXNNm2-fa0LyHQL9BWj3ydFN3YsItSsAyi1/messages/j1mlUhNFIcuirNgn4O06
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 import React, {useEffect, useState} from 'react';
 import fireStore from '@react-native-firebase/firestore';
+import {FAB} from 'react-native-paper';
 
 export default function HomeScreen({user, navigation}) {
   const [users, setUsers] = useState('');
@@ -29,7 +30,14 @@ export default function HomeScreen({user, navigation}) {
       <TouchableOpacity
         style={styles.card}
         onPress={() =>
-          navigation.navigate('Chat', {name: item.name, uid: item.uid})
+          navigation.navigate('Chat', {
+            name: item.name,
+            uid: item.uid,
+            status:
+              typeof item.status == 'string'
+                ? item.status
+                : item.status.toDate().toString(),
+          })
         }>
         <Image source={{uri: item.pic}} style={styles.image} />
         <View>
@@ -41,12 +49,20 @@ export default function HomeScreen({user, navigation}) {
   };
 
   return (
-    <View>
+    <View style={{flex: 1, backgroundColor: 'white'}}>
       <FlatList
         data={users}
         renderItem={({item}) => <RenderCard item={item} />}
         keyExtractor={item => item.uid}
       />
+      <FAB
+        style={styles.fab}
+        icon="face-man-profile"
+        color="black"
+        onPress={() => {
+          navigation.navigate('Profile');
+        }}
+      />
     </View>
   );
 }
@@ -56,16 +72,20 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     margin: 3,
     padding: 4,
-    backgroundColor: 'white',
-    // borderRadius: 20,
-    borderBottomWidth: 2,
-    borderBottomColor: 'grey',
+    marginLeft: 10,
   },
   image: {
     width: 60,
     height: 60,
     borderRadius: 30,
     backgroundColor: 'lightgreen',
   },
-  text: {fontSize: 18, marginLeft: 15, color: 'black'},
+  text: {fontSize: 18, marginLeft: 15, color: 'black', marginTop: 2},
+  fab: {
+    position: 'absolute',
+    margin: 16,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'lightgreen',
+  },
 });
diff --git a/src/screens/ProfileScreen.js b/src/screens/ProfileScreen.js
@@ -0,0 +1,85 @@
+import React, {useEffect, useState} from 'react';
+import {View, Text, ActivityIndicator, Image, StyleSheet} from 'react-native';
+import fireStore from '@react-native-firebase/firestore';
+import Feather from 'react-native-vector-icons/Feather';
+import {Button} from 'react-native-paper';
+import auth from '@react-native-firebase/auth';
+
+export default function ProfileScreen({user}) {
+  const [profile, setProfile] = useState('');
+
+  useEffect(() => {
+    fireStore()
+      .collection('users')
+      .doc(user.uid)
+      .get()
+      .then(docSnap => {
+        setProfile(docSnap.data());
+      });
+  }, []);
+
+  if (!profile) {
+    return (
+      <ActivityIndicator
+        size={80}
+        color={'lightgreen'}
+        style={{
+          justifyContent: 'center',
+          flex: 1,
+        }}
+      />
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Image source={{uri: profile.pic}} style={styles.img} />
+      <Text style={[styles.text, {marginTop: 25}]}>Name :- {profile.name}</Text>
+      <View style={{flexDirection: 'row', marginTop: 20}}>
+        <Feather name="mail" size={28} color={'grey'} />
+        <Text style={[styles.text, {marginLeft: 10}]}>{profile.email}</Text>
+      </View>
+      <Button
+        mode="contained"
+        onPress={() => {
+          fireStore()
+            .collection('users')
+            .doc(user.uid)
+            .update({
+              status: fireStore.FieldValue.serverTimestamp(),
+            })
+            .then(() => {
+              auth().signOut();
+            });
+        }}
+        style={styles.button}>
+        Log Out
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'lightgreen',
+    alignItems: 'center',
+  },
+  img: {
+    width: 200,
+    height: 200,
+    borderRadius: 100,
+    borderWidth: 3,
+    borderColor: 'white',
+    margin: 50,
+  },
+  text: {
+    fontSize: 23,
+    color: 'white',
+  },
+  button: {
+    borderColor: 'white',
+    borderWidth: 3,
+    marginTop: 30,
+  },
+});
diff --git a/src/screens/SignUpScreen.js b/src/screens/SignUpScreen.js
@@ -75,6 +75,7 @@ const SignUpScreen = () => {
         email: result.user.email,
         uid: result.user.uid,
         pic: image,
+        status: 'online',
       });
       setLoading(false);
     } catch (error) {