Merge pull request #17 from Task-Terriers/commentFrontend

added comments to all screen files
Task-Terriers · Dec 7, 2023 · 08a44df · 08a44df
2 parents acf91f0 + 1ce38be
commit 08a44df
Show file tree

Hide file tree

Showing 12 changed files with 164 additions and 35 deletions.
diff --git a/TaskTerriers/src/Screens/Auth/AuthAddProfileScreen.tsx b/TaskTerriers/src/Screens/Auth/AuthAddProfileScreen.tsx
@@ -15,6 +15,7 @@ import { deviceInfo } from '../../utilities/deviceInfo'
 interface Props {}
 
 const AuthAddProfileScreen = ({ navigation, route }) => {
+  // Extracting parameters passed through navigation
   const firstName = route?.params?.firstName
   const lastName = route?.params?.lastName
   const email = route?.params?.email
@@ -39,6 +40,7 @@ const AuthAddProfileScreen = ({ navigation, route }) => {
    * life cycles
    **************/
 
+  // Effect hook to log route params on component mount
   useEffect(() => {
     console.log(route?.params)
     console.log(route?.params?.firstName)
@@ -48,6 +50,7 @@ const AuthAddProfileScreen = ({ navigation, route }) => {
    * functions
    ************/
 
+  // Function to handle save button press
   const onPressSaveButton = () => {
     return TaskTerriersNavigationModule.navigate(Root.BottomTabNavigation)
   }
@@ -56,10 +59,12 @@ const AuthAddProfileScreen = ({ navigation, route }) => {
    * render
    *********/
 
+  // Renders the navigation bar
   const renderNavigationBar = () => {
     return <NavigationBar title={'Add Profile'} />
   }
 
+  // Renders user information input fields
   const renderUserInfo = () => {
     return (
       <Col mt18>
@@ -83,6 +88,7 @@ const AuthAddProfileScreen = ({ navigation, route }) => {
     )
   }
 
+  // Renders profile image
   const renderProfileURL = () => {
     return (
       <Col radius100 overflowHidden h120 w120>
@@ -91,6 +97,7 @@ const AuthAddProfileScreen = ({ navigation, route }) => {
     )
   }
 
+  // Renders the save button
   const renderSaveButton = () => {
     return (
       <Col absolute bottom0 w={'100%'} ph16 pb={deviceInfo.safeAreaBottomSpace + 16}>

diff --git a/TaskTerriers/src/Screens/Auth/AuthLoginMainScreen.tsx b/TaskTerriers/src/Screens/Auth/AuthLoginMainScreen.tsx
@@ -22,10 +22,12 @@ const AuthLoginMainScreen = () => {
    * state, ref
    *************/
 
+  // Local state
   const [initializing, setInitializing] = useState(true)
   const [user, setUser] = useState()
   const baseApiUrl = process.env.EXPO_PUBLIC_API_URL
 
+  // Configuration for Google Sign-In
   GoogleSignin.configure({
     webClientId: process.env.EXPO_PUBLIC_WEB_CLIENT_ID,
     forceCodeForRefreshToken: true,
@@ -37,6 +39,7 @@ const AuthLoginMainScreen = () => {
    * life cycles
    **************/
 
+  // Subscribe to authentication state changes
   useEffect(() => {
     const subscriber = Auth().onAuthStateChanged(onAuthStateChanged)
     return subscriber // unsubscribe on unmount
@@ -46,6 +49,7 @@ const AuthLoginMainScreen = () => {
    * life cycles
    *************/
 
+  // Redirect authenticated users
   useEffect(() => {
     if (currentUser) {
       const userData = {
@@ -78,6 +82,8 @@ const AuthLoginMainScreen = () => {
   /************
    * functions
    ************/
+
+  // Fetch user information from the database
   const GET_User_info_from_DB = async (userId: string) => {
     try {
       const response = await fetch(`${baseApiUrl}/api/userExists/${userId}`)
@@ -88,6 +94,7 @@ const AuthLoginMainScreen = () => {
     }
   }
 
+  // Send user data to the server
   const POST_User = async userData => {
     const body = {
       id: userData?.userId,
@@ -111,6 +118,7 @@ const AuthLoginMainScreen = () => {
     }
   }
 
+  // Handle Google Sign-In button press
   const onGoogleButtonPress = async () => {
     try {
       // Check if your device supports Google Play
@@ -130,12 +138,14 @@ const AuthLoginMainScreen = () => {
   }
 
   // Handle user state changes
+  // Update user state on authentication state change
   const onAuthStateChanged = user => {
     setUser(user)
     console.log(user)
     if (initializing) setInitializing(false)
   }
 
+  // Parse name implementation
   const parseName = () => {
     if (currentUser) {
       const displayName = currentUser?.displayName.split(' ')
@@ -147,6 +157,7 @@ const AuthLoginMainScreen = () => {
    * render
    *********/
 
+  // Render logo
   const renderLogo = () => {
     return (
       <Col alignCenter mb30>
@@ -155,6 +166,7 @@ const AuthLoginMainScreen = () => {
     )
   }
 
+  // Render Google Sign-In button
   const renderGoogleSignIn = () => {
     return (
       <GoogleSigninButton

diff --git a/TaskTerriers/src/Screens/MessagesDetailScreen.tsx b/TaskTerriers/src/Screens/MessagesDetailScreen.tsx
@@ -29,12 +29,14 @@ const MessagesDetailScreen = ({ navigation, route }) => {
    * props, navigation prams
    **************************/
 
+  // Extracting the chat room details from the navigation route parameters
   const { chatRoom } = route?.params
 
   /*************
    * state, ref
    *************/
 
+  // States for managing rendering, user info, messages, and message text input
   const [isRendering, setIsRendering] = useState<boolean>(true)
   const [userInfo, setUserInfo] = useState<userData>()
   const [messages, setMessages] = useState([])
@@ -44,6 +46,7 @@ const MessagesDetailScreen = ({ navigation, route }) => {
    * life cycles
    **************/
 
+  // Fetching user information and subscribing to message updates in Firestore
   useEffect(() => {
     getUserInfo()
 
@@ -60,6 +63,7 @@ const MessagesDetailScreen = ({ navigation, route }) => {
    * life cycles
    *************/
 
+  // Logging messages for debugging
   useEffect(() => {
     console.log(messages)
   }, [messages])
@@ -68,12 +72,14 @@ const MessagesDetailScreen = ({ navigation, route }) => {
    * functions
    ************/
 
+  // Fetch user information from AsyncStorage
   const getUserInfo = async () => {
     const userData = await AsyncStorageModule.GET_asyncStorage('USER_DATA')
     setUserInfo(userData)
     console.log(userData.userId)
   }
 
+  // Function to send a message
   const sendMessage = async () => {
     const msg = messageText.trim()
     if (!msg) return
@@ -93,14 +99,16 @@ const MessagesDetailScreen = ({ navigation, route }) => {
       console.log(err)
     }
   }
+
+  // Navigation back to the previous screen
   const onPressReturn = () => {
     TaskTerriersNavigationModule.goBack()
   }
 
+  // Handling payment
   const onPressPayment = () => {
     const url =
       'https://checkout.stripe.com/c/pay/cs_test_a1fcIJaHGdrTfMjuLQss5dYStgou6iLkMifSnDiGoxuCTt5RKIlobkNBw1#fidkdWxOYHwnPyd1blpxYHZxWjA0SjFUPDdOYXA1cG9VMGZnXVFCYjddNXNSNGo1b0I3dUFnZG5GTH9wdmdwSk1XZEFCM1BjTkB8bF9MS3V3XFc2fVYzVUxcSEJcdE1vUXZgNzRkR0RVbDRVNTVjNEh%2FMTEwVCcpJ3VpbGtuQH11anZgYUxhJz8ncWB2cVphVzM0MF83azxjQ0pkYUpjXFwnKSd2cXdsdWBEZmZqcGtxJz8nZGZmcVo0Sk5CPG5PaWNmSlYwXzRrJ3gl'
-
     Linking.canOpenURL(url)
       .then(supported => {
         if (supported) {
@@ -112,6 +120,7 @@ const MessagesDetailScreen = ({ navigation, route }) => {
       .catch(err => console.error('An error occurred', err))
   }
 
+  // Function to display time in a readable format
   const displayTime = ({ item }) => {
     return new Date(parseInt(item?.createdAt?.seconds) * 1000).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
   }
@@ -120,6 +129,8 @@ const MessagesDetailScreen = ({ navigation, route }) => {
    * render
    *********/
 
+  // Render functions for different components of the UI
+
   const renderNavBar = () => {
     return <NavigationBar title={chatRoom?.chatName} iconName={IconNames['Return']} hasDivider iconAction={onPressReturn} />
   }
@@ -137,6 +148,7 @@ const MessagesDetailScreen = ({ navigation, route }) => {
   }
 
   const renderSendBox = () => {
+    // Send message input and button
     return (
       <Row alignCenter borderColor={BUColor['black']} borderTW1 ph10 radius12 pv8>
         <Col flex>
@@ -157,6 +169,8 @@ const MessagesDetailScreen = ({ navigation, route }) => {
       </Row>
     )
   }
+
+  // UI for the message bubble for messages sent by the user
   const renderMyMessageBubble = ({ item }: { item: DocumentData }) => {
     return (
       <Col alignSelfEnd>
@@ -172,6 +186,7 @@ const MessagesDetailScreen = ({ navigation, route }) => {
     )
   }
 
+  // UI for the message bubble for messages received from others
   const renderOtherMessageBubble = ({ item }: { item: DocumentData }) => {
     return (
       <Col alignSelfStart>
@@ -186,6 +201,7 @@ const MessagesDetailScreen = ({ navigation, route }) => {
   }
 
   const renderFlatList = () => {
+    // FlatList for displaying messages
     return (
       <FlatList
         data={messages}
@@ -202,6 +218,7 @@ const MessagesDetailScreen = ({ navigation, route }) => {
    * render()
    ***********/
 
+  // Rendering the UI
   return (
     <TaskTerriersSafeAreaView style={{ flex: 1 }}>
       {renderNavBar()}

diff --git a/TaskTerriers/src/Screens/MessagesTab.tsx b/TaskTerriers/src/Screens/MessagesTab.tsx
@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react'
 import { ActivityIndicator, FlatList } from 'react-native'
 
+// Firebase and Firestore imports for data handling
 import { DocumentData, addDoc, collection, onSnapshot, orderBy, query } from 'firebase/firestore'
 
+// Custom components and styles
 import TaskTerriersSafeAreaView from '../Views/TaskTerriersSafeAreaView'
 import { Col } from '../StyleToProps/Col'
 import NavigationBar from '../components/NavigationBar'
@@ -20,7 +22,7 @@ import { MaterialIcons } from '@expo/vector-icons'
 import { BUColor, NeutralColor } from '../Libs'
 import { Span } from '../StyleToProps'
 
-interface Props { }
+interface Props {}
 
 const MessagesTab = ({ navigation, route }) => {
   /*********
@@ -34,8 +36,10 @@ const MessagesTab = ({ navigation, route }) => {
   /*************
    * state, ref
    *************/
+  // Sample profile picture for mock data
   const profilePicture: any = require('../assets/images/profile/aleks.png')
 
+  // Mock data for messages, to be replaced with real data
   const mockMessagesCardData = [
     {
       firstName: 'Anabelle',
@@ -73,6 +77,7 @@ const MessagesTab = ({ navigation, route }) => {
       onPress: () => onPressCard(),
     },
   ]
+  // State for managing user profile and chat data
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [userInfo, setUserInfo] = useState<userData>()
   const [chats, setChats] = useState([])
@@ -81,28 +86,34 @@ const MessagesTab = ({ navigation, route }) => {
    * life cycles
    **************/
 
+  // Effect hook for fetching user information and setting up real-time chat updates
   useEffect(() => {
     getUserInfo()
+    // Firestore query to fetch chat data
     const chatQuery = query(collection(FIRESTORE_DB, 'messageRooms'), orderBy('_id', 'desc'))
 
+    // Subscribing to chat updates
     const unsubscribe = onSnapshot(chatQuery, querySnapShot => {
       const chatRooms = querySnapShot.docs.map(doc => doc.data())
       setChats(chatRooms)
       setIsLoading(false)
     })
 
+    // Cleanup function to unsubscribe from the updates
     return unsubscribe
   }, [])
 
   /************
    * functions
    ************/
 
+  // Function to retrieve user information from AsyncStorage
   const getUserInfo = async () => {
     const userData = await AsyncStorageModule.GET_asyncStorage('USER_DATA')
     setUserInfo(userData)
   }
 
+  // Handler for pressing on a chat card
   const onPressCard = chatRoom => {
     return TaskTerriersNavigationModule.navigate(Root.MessagesDetailScreen, { chatRoom: chatRoom })
   }
@@ -111,19 +122,17 @@ const MessagesTab = ({ navigation, route }) => {
    * render
    *********/
 
+  // Renders the navigation bar
   const renderNavigationBar = () => {
     return <NavigationBar iconName={IconNames['Message']} title={route.name} />
   }
+
+  // Renders each item in the FlatList
   const renderItem = ({ item }) => {
-    return (
-      <MessagesCard
-        chatName={item?.chatName}
-        messagePreview={'Message Preview'}
-        profilePicPath={''}
-        onPress={() => onPressCard(item)}
-      />
-    )
+    return <MessagesCard chatName={item?.chatName} messagePreview={'Message Preview'} profilePicPath={''} onPress={() => onPressCard(item)} />
   }
+
+  // Renders a message when the list is empty
   const renderListEmptyComponent = () => {
     return (
       <Col alignCenter>
@@ -134,6 +143,7 @@ const MessagesTab = ({ navigation, route }) => {
     )
   }
 
+  // Renders the list of messages
   const renderFlatList = () => {
     if (isLoading)
       return (