Merge pull request #13 from Task-Terriers/feature/TAS-56@create-servi…

…ce-add-screen

[TAS-56]:create service add screen

TaskTerriers/App.tsx

@@ -5,7 +5,6 @@ import auth, { firebase } from '@react-native-firebase/auth'
 
 import { Col, Span } from './src/StyleToProps'
 import useFonts from './src/hooks/useFonts'
-import { firebaseAppOptions } from './src/utilities/firebase'
 import Navigation from './src/navigation'
 import { LogBox } from 'react-native'
 
@@ -31,8 +30,9 @@ export default function App() {
     }
 
     if (!firebase.apps.length) {
-      firebase.initializeApp(firebaseAppOptions)
+      // FIREBASE_APP
     }
+
     prepare()
     const { currentUser } = auth()
     if (currentUser) console.log(currentUser)

TaskTerriers/android/app/src/main/AndroidManifest.xml

@@ -11,7 +11,7 @@
       <data android:scheme="https"/>
     </intent>
   </queries>
-  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme">
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:usesCleartextTraffic="true" android:networkSecurityConfig="@xml/network_security_config">
     <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>

TaskTerriers/package.json

@@ -15,6 +15,7 @@
     "@react-native-async-storage/async-storage": "^1.19.5",
     "@react-native-firebase/app": "^18.6.1",
     "@react-native-firebase/auth": "^18.6.1",
+    "@react-native-firebase/firestore": "^18.7.1",
     "@react-native-google-signin/google-signin": "^10.1.1",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/core": "^6.4.10",
@@ -23,10 +24,12 @@
     "@types/react": "~18.2.14",
     "eslint-config-prettier": "^9.0.0",
     "expo": "~49.0.15",
+    "expo-checkbox": "^2.5.0",
     "expo-image": "^1.5.1",
     "expo-navigation-bar": "^2.5.0",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
+    "firebase": "^10.7.0",
     "prettier": "^3.1.0",
     "react": "18.2.0",
     "react-native": "0.72.5",

TaskTerriers/src/Screens/Auth/AuthLoginMainScreen.tsx

@@ -35,9 +35,6 @@ const AuthLoginMainScreen = () => {
   /**************
    * life cycles
    **************/
-  /*************
-   * life cycles
-   *************/
 
   useEffect(() => {
     const subscriber = Auth().onAuthStateChanged(onAuthStateChanged)
@@ -55,9 +52,18 @@ const AuthLoginMainScreen = () => {
         lastName: parseName().lastName,
         email: currentUser.email,
         photoURL: currentUser.photoURL,
+        userId: currentUser.uid,
+      }
+      if (userData.email.split('@').pop() === 'bu.edu') {
+        AsyncStorageModule.SET_asyncStorage('USER_DATA', JSON.stringify(userData))
+        TaskTerriersNavigationModule.navigate(Root.BottomTabNavigation)
+      } else {
+        Auth()
+          .signOut()
+          .then(() => {
+            TaskTerriersNavigationModule.navigate('AuthLoginMainScreen'), console.log('User signed out!')
+          })
       }
-      AsyncStorageModule.SET_asyncStorage('USER_DATA', JSON.stringify(userData))
-      TaskTerriersNavigationModule.navigate(Root.BottomTabNavigation)
     }
   }, [user])
 

TaskTerriers/src/Screens/MessagesDetailScreen.tsx

@@ -1,9 +1,20 @@
 import React, { useState, useEffect } from 'react'
-import { SafeAreaView, View, StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView, View, StyleSheet, Text, TouchableOpacity, ListRenderItemInfo } from 'react-native'
 import NavigationBar from '../components/NavigationBar'
 import { IconNames } from '../components/types'
 import { TaskTerriersNavigationModule } from '../modules/NavigationModule'
 import TaskTerriersSafeAreaView from '../Views/TaskTerriersSafeAreaView'
+import { DocumentData, addDoc, collection, doc, onSnapshot, orderBy, query, serverTimestamp } from 'firebase/firestore'
+import { FIRESTORE_DB } from '../utilities/firebase'
+import AsyncStorageModule from '../modules/AsyncStorageModule'
+import { userData } from '../navigation'
+import { Col, Row, Span } from '../StyleToProps'
+import { BUColor, NeutralColor } from '../Libs'
+import { BasicTextInput, TextInputWithHeightChange } from '../components/TextInputs'
+import { UniversalButton } from '../components/Buttons'
+import { Ionicons, Octicons } from '@expo/vector-icons'
+import { FlatList } from 'react-native-gesture-handler'
+import { deviceInfo } from '../utilities/deviceInfo'
 
 interface Props {}
 
@@ -16,46 +27,163 @@ const MessagesDetailScreen = ({ navigation, route }) => {
    * props, navigation prams
    **************************/
 
+  const { chatRoom } = route?.params
+
   /*************
    * state, ref
    *************/
 
   const [isRendering, setIsRendering] = useState<boolean>(true)
+  const [userInfo, setUserInfo] = useState<userData>()
+  const [messages, setMessages] = useState([])
+  const [messageText, setMessageText] = useState<string>('')
 
   /**************
    * life cycles
    **************/
 
   useEffect(() => {
-    // ComponentDidMount
+    getUserInfo()
 
-    // setIsRendering(false)
-    return () => {
-      // ComponentWillUnmount
-    }
+    const messagesQuery = query(collection(FIRESTORE_DB, 'messageRooms', chatRoom?._id, 'messages'), orderBy('createdAt', 'asc'))
+
+    const unsubscribe = onSnapshot(messagesQuery, querySnapShot => {
+      const messages = querySnapShot.docs.map(doc => doc.data())
+      setMessages(messages)
+    })
+    return unsubscribe
   }, [])
 
+  /*************
+   * life cycles
+   *************/
+
+  useEffect(() => {
+    console.log(messages)
+  }, [messages])
+
   /************
    * functions
    ************/
 
+  const getUserInfo = async () => {
+    const userData = await AsyncStorageModule.GET_asyncStorage('USER_DATA')
+    setUserInfo(userData)
+    console.log(userData.userId)
+  }
+
+  const sendMessage = async () => {
+    const msg = messageText.trim()
+    if (!msg) return
+
+    const id = `${Date.now()}`
+    const _doc = {
+      _id: id,
+      room_id: chatRoom._id,
+      message: msg,
+      sender: userInfo.userId,
+      createdAt: serverTimestamp(),
+    }
+    setMessageText('')
+    try {
+      await addDoc(collection(doc(FIRESTORE_DB, 'messageRooms', chatRoom?._id), 'messages'), _doc)
+    } catch (err) {
+      console.log(err)
+    }
+  }
   const onPressReturn = () => {
     TaskTerriersNavigationModule.goBack()
   }
 
+  const displayTime = ({ item }) => {
+    return new Date(parseInt(item?.createdAt?.seconds) * 1000).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
+  }
+
   /*********
    * render
    *********/
 
   const renderNavBar = () => {
-    return <NavigationBar title={'Chat'} iconName={IconNames['Return']} hasDivider iconAction={onPressReturn} />
+    return <NavigationBar title={chatRoom?.chatName} iconName={IconNames['Return']} hasDivider iconAction={onPressReturn} />
+  }
+
+  const renderSendBox = () => {
+    return (
+      <Row alignCenter borderColor={BUColor['black']} borderTW1 ph10 radius12 pv8>
+        <Col flex>
+          <TextInputWithHeightChange
+            initialHeight={40}
+            size="small"
+            placeholder={'Message'}
+            onChangeText={(text: string) => setMessageText(text)}
+            value={messageText}
+            multiline
+          />
+        </Col>
+        <TouchableOpacity disabled={!messageText} onPress={sendMessage}>
+          <Col ml10 style={{ transform: [{ rotate: '-40deg' }] }}>
+            <Octicons name="paper-airplane" size={24} color={!messageText ? NeutralColor['neutral-50'] : BUColor['black']} />
+          </Col>
+        </TouchableOpacity>
+      </Row>
+    )
+  }
+  const renderMyMessageBubble = ({ item }: { item: DocumentData }) => {
+    return (
+      <Col alignSelfEnd>
+        <Col bgBURed radiusBL12 radiusTL12 radiusTR12 p10 maxW={deviceInfo.size.width / 2 + 30} flexShrink>
+          <Span bodyL colorNeutral100>
+            {item?.message}
+          </Span>
+        </Col>
+        <Span titleS colorBUBlack>
+          {item?.createdAt?.seconds && displayTime({ item })}
+        </Span>
+      </Col>
+    )
+  }
+
+  const renderOtherMessageBubble = ({ item }: { item: DocumentData }) => {
+    return (
+      <Col alignSelfStart>
+        <Col bgNeutral100 radiusBL12 radiusBR12 radiusTR12 p10 maxW={deviceInfo.size.width / 2 + 30} flexShrink>
+          <Span bodyL>{item?.message}</Span>
+        </Col>
+        <Span titleS colorBUBlack>
+          {item?.createdAt?.seconds && displayTime({ item })}
+        </Span>
+      </Col>
+    )
+  }
+
+  const renderFlatList = () => {
+    return (
+      <FlatList
+        data={messages}
+        keyExtractor={item => item._id}
+        renderItem={({ item }) =>
+          item?.sender === userInfo.userId.toString() ? renderMyMessageBubble({ item }) : renderOtherMessageBubble({ item })
+        }
+        ItemSeparatorComponent={() => <Col mb20></Col>}
+      />
+    )
   }
 
   /***********
    * render()
    ***********/
 
-  return <TaskTerriersSafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>{renderNavBar()}</TaskTerriersSafeAreaView>
+  return (
+    <TaskTerriersSafeAreaView style={{ flex: 1 }}>
+      {renderNavBar()}
+      <Col p16 flex>
+        {renderFlatList()}
+        {/* {renderMyMessageBubble('afjdlasjfkdjs;kafjkdsjafkdjkfj;dlsajf;kj;dsk;afjkdsjfkjdskajfkldsjfkdsj;afjdkafjd;kjsa;fkldjsafj;djafkdjsafkdjslkfj;lj')}
+        {renderOtherMessageBubble('afjdlasjfkdjs;kafjkdsjafkdjkfj;dlsajf;kj;dsk;afjkdsjfkjdskajfkldsjfkdsj;afjdkafjd;kjsa;fkldjsafj;djafkdjsafkdjslkfj;lj')} */}
+      </Col>
+      {renderSendBox()}
+    </TaskTerriersSafeAreaView>
+  )
 }
 
 export default MessagesDetailScreen