added notification badge for new messages, visual changes

jmate03 · jmate03 · commit 2044b63381af · 2026-03-01T15:06:01.000-05:00
the flatlist of conversations now sorts by last active chat. fixed layout to respect device safe areas
diff --git a/GamerMatchApp/app/(tabs)/chatScreen.tsx b/GamerMatchApp/app/(tabs)/chatScreen.tsx
@@ -9,6 +9,7 @@ import { getProfiles, UserProfile, RawUserProfile, mapProfileData } from "../../
 import conversationData from "../data/conversations.json";
 import firestore from "@react-native-firebase/firestore";
 import auth from "@react-native-firebase/auth";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 
 // interface to define chat message structure
 interface ChatMessage {
@@ -34,9 +35,12 @@ const imageMap: any = {
 export default function ChatScreen() {
   
   const router = useRouter();
-  // const profileMap = Object.fromEntries(profilesData.map(u => [u.id, u]));
   const [profiles, setProfiles] = useState<Record<string, UserProfile>>({});
   const [messageReadStatus, setMessageReadStatus] = useState(conversationData);
+  const [hasUnread, setHasUnread] = useState<Record<string,boolean>>({}); // track which conversations have unread messages
+  const [lastMessages, setLastMessages] = useState<Record<string,string>>({}); // track the last message for each conversation
+  const [lastMessageAt, setLastMessageAt] = useState<Record<string, number>>({}); // track the timestamp of the last message for sorting
+  const insets = useSafeAreaInsets();
 
   // starts a conversation between the current user and the selected user or opens it if it already exists
   const startConversation = async (otherUser: UserProfile) => {
@@ -57,6 +61,9 @@ export default function ChatScreen() {
       lastMessageAt: firestore.FieldValue.serverTimestamp(),
     })).id;
     // console.log("navigating with conversationId:", conversationId); // debug to verify we have the conversation ID before navigating
+
+    setHasUnread(prev => ({ ...prev, [otherUser.firebaseUid]: false })); // mark as read when opening the conversation
+
     router.push({
       pathname: "/conversationScreen",
       params: { id: conversationId },
@@ -81,6 +88,40 @@ export default function ChatScreen() {
     };
     loadProfiles();
 },[]);
+
+useEffect(() => {
+    const currentUid = auth().currentUser?.uid;
+    if (!currentUid) return;
+
+    const unsubscribe = firestore()
+      .collection("conversations")
+      .where("participants", "array-contains", currentUid)
+      .onSnapshot(snapshot => {
+        const unread: Record<string, boolean> = {};
+        const lastMsg: Record<string, string> = {};
+        const lastMsgAt: Record<string, number> = {};
+
+        snapshot.docs.forEach(doc => {
+          const data = doc.data();
+          const participants: string[] = data.participants ?? [];
+          const otherUid = participants.find(uid => uid !== currentUid);
+          if (!otherUid) return;
+
+          // true if the current user has any unread messages in this conversation
+          unread[otherUid] = !!(data.hasUnread?.[currentUid]) && data.lastMessageSenderId !== currentUid;
+          const sentByMe = data.lastMessageSenderId === currentUid;
+          lastMsg[otherUid] = data.lastMessage ? `${sentByMe ? "You: " : ""}${data.lastMessage}` : "Start a conversation";
+          lastMsgAt[otherUid] = data.lastMessageAt?.toMillis() ?? 0; // use timestamp for sorting
+          
+        });
+        setHasUnread(unread);
+        setLastMessages(lastMsg);
+        setLastMessageAt(lastMsgAt);
+      });
+
+    return () => unsubscribe();
+  }, []);
+
 // Load message read status
 useEffect(() => {
     const loadMessageReadStatus = async () => {
@@ -134,40 +175,44 @@ useEffect(() => {
   };
 
   return (
-    <View style={styles.container}>
-      <FlatList<UserProfile>
-        data={Object.values(profiles)}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => {
-          const avatarSource = item.avatar
-            ? /^https?:\/\//i.test(item.avatar)
-              ? { uri: item.avatar }
-              : imageMap[item.avatar] ?? require("../../assets/images/chicken.png")
-            : require("../../assets/images/chicken.png");
-
-          return (
-            <TouchableOpacity
-              style={styles.messageCard}
-              onPress={() => startConversation(item)}
-            >
-              <Image source={avatarSource} style={styles.profilePicture} />
-              <View style={styles.messageContent}>
-                <Text style={styles.username}>{item.name}</Text>
-                <Text style={styles.messageText}>Start a conversation</Text>
-              </View>
-            </TouchableOpacity>
-          );
-        }}
-      />
-    </View>
+      <View style={[styles.container, { paddingTop: insets.top }]}>
+        <FlatList<UserProfile>
+          data={Object.values(profiles).sort((a,b) => {
+            const aTime = lastMessageAt[a.firebaseUid] ?? 0;
+            const bTime = lastMessageAt[b.firebaseUid] ?? 0;
+            return bTime - aTime; // sort by most recent message
+          })}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => {
+            const avatarSource = item.avatar
+              ? /^https?:\/\//i.test(item.avatar)
+                ? { uri: item.avatar }
+                : imageMap[item.avatar] ?? require("../../assets/images/chicken.png")
+              : require("../../assets/images/chicken.png");
+            const isUnread = item.firebaseUid ? (hasUnread[item.firebaseUid] ?? false) : false;
+            return (
+              <TouchableOpacity
+                style={styles.messageCard}
+                onPress={() => startConversation(item)}
+              >
+                <Image source={avatarSource} style={styles.profilePicture} />
+                <View style={styles.messageContent}>
+                  <Text style={styles.username}>{item.name}</Text>
+                  <Text style={styles.messageText}>{lastMessages[item.firebaseUid] ?? "Start a conversation"}</Text>
+                </View>
+                {isUnread && <Text style={styles.notificationBadge}> </Text>}
+              </TouchableOpacity>
+            );
+          }}
+        />
+      </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "#D9F7D7",
-    paddingTop: 20,
   },
   messageCard: {
     flexDirection: 'row',
@@ -195,8 +240,8 @@ const styles = StyleSheet.create({
     color: '#666',
   },
   notificationBadgeFormat: {
-    flexDirection: 'row',
-    padding: 15,
+    marginLeft: 'auto',
+    justifyContent: 'center',
     alignItems: 'center',
   },
   notificationBadge: {
@@ -206,6 +251,10 @@ const styles = StyleSheet.create({
     backgroundColor: "red",
     borderRadius: 20,
     color: "white",
-  }
+  },
+  safeArea: {
+        flex: 1,
+        backgroundColor: '#D9F7D7',
+    },
 });
 
diff --git a/GamerMatchApp/app/(tabs)/conversationScreen.tsx b/GamerMatchApp/app/(tabs)/conversationScreen.tsx
@@ -1,7 +1,8 @@
 // this is the conversation screen between two users
 import { useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { ActivityIndicator, FlatList, Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import firestore from "@react-native-firebase/firestore";
 import auth from "@react-native-firebase/auth";
 import { getProfiles, UserProfile, RawUserProfile, mapProfileData } from "../../services/api";
@@ -27,6 +28,8 @@ export default function ConversationScreen() {
     const [otherUser, setOtherUser] = useState<UserProfile | null>(null);
     const [loadingUser, setLoadingUser] = useState(true);
     const currentUid = auth().currentUser?.uid;
+    const flatListRef = useRef<FlatList>(null);
+    const insets = useSafeAreaInsets();
 
     // load the other user's profile for the header
     useEffect(() => {
@@ -44,6 +47,13 @@ export default function ConversationScreen() {
           const mapped = mapProfileData(rawProfiles);
           const found = mapped.find(p => p.firebaseUid === otherUid);
           if (found) setOtherUser(found);
+
+          await firestore()
+          .collection("conversations")
+          .doc(conversationId)
+          .update({
+            [`hasUnread.${otherUid}`]: false, // mark messages as read for this user
+          });
         } catch (e) {
           console.error("Error loading other user:", e);
         } finally {
@@ -74,6 +84,7 @@ export default function ConversationScreen() {
     try {
       const text = messageText.trim();
       setMessageText("");
+      console.log("sending to user: ", otherUser?.firebaseUid);
 
       await firestore()
         .collection("conversations")
@@ -92,6 +103,8 @@ export default function ConversationScreen() {
         .update({
           lastMessage: text,
           lastMessageAt: firestore.FieldValue.serverTimestamp(),
+          lastMessageSenderId: currentUid,
+          [`hasUnread.${otherUser?.firebaseUid}`]: true, // mark as unread for the other user
         });
     } catch (e) {
       console.error("Error sending message:", e);
@@ -105,46 +118,49 @@ export default function ConversationScreen() {
     : require("../../assets/images/chicken.png");
 
     return (
-    <View style={styles.container}>
-      <View style={styles.headerContainer}>
-        {loadingUser ? (
-          <ActivityIndicator size="small" color="#000" />
-        ) : (
-          <>
-            <Image source={avatarSource} style={styles.profilePicture} />
-            <Text style={{ fontSize: 20, fontWeight: "bold" }}>
-              {otherUser ? otherUser.name : "Unknown User"}
-            </Text>
-          </>
-        )}
-      </View>
-      <FlatList
-        data={messages}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => {
-          const isCurrentUser = item.senderId === currentUid;
-          return (
-            <View style={[styles.messageRow, isCurrentUser && styles.currentUserRow]}>
-              <View style={[styles.messageBubble, { backgroundColor: isCurrentUser ? "#A3D9A5" : "#E0E0E0" }]}>
-                <Text style={styles.message}>{item.text}</Text>
+      <View style={[styles.container, { paddingTop: insets.top }]}>
+        <View style={[StyleSheet.absoluteFill, { height: insets.top, backgroundColor: '#A3D9A5' }]} />
+        <View style={styles.headerContainer}>
+          {loadingUser ? (
+            <ActivityIndicator size="small" color="#000" />
+          ) : (
+            <>
+              <Image source={avatarSource} style={styles.profilePicture} />
+              <Text style={{ fontSize: 20, fontWeight: "bold" }}>
+                {otherUser ? otherUser.name : "Unknown User"}
+              </Text>
+            </>
+          )}
+        </View>
+        <FlatList
+          ref={flatListRef}
+          onContentSizeChange={() => flatListRef.current?.scrollToEnd()}
+          data={messages}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => {
+            const isCurrentUser = item.senderId === currentUid;
+            return (
+              <View style={[styles.messageRow, isCurrentUser && styles.currentUserRow]}>
+                <View style={[styles.messageBubble, { backgroundColor: isCurrentUser ? "#A3D9A5" : "#E0E0E0" }]}>
+                  <Text style={styles.message}>{item.text}</Text>
+                </View>
               </View>
-            </View>
-          );
-        }}
-      />
-      <View style={styles.inputContainer}>
-        <TextInput
-          style={styles.textInput}
-          placeholder="Type a message..."
-          value={messageText}
-          onChangeText={setMessageText}
-          multiline
+            );
+          }}
         />
-        <TouchableOpacity style={styles.sendButton} onPress={handleSendMessage}>
-          <Text style={styles.sendButtonText}>Send</Text>
-        </TouchableOpacity>
+        <View style={[styles.inputContainer, { paddingBottom: insets.bottom }]}>
+          <TextInput
+            style={styles.textInput}
+            placeholder="Type a message..."
+            value={messageText}
+            onChangeText={setMessageText}
+            multiline
+          />
+          <TouchableOpacity style={styles.sendButton} onPress={handleSendMessage}>
+            <Text style={styles.sendButtonText}>Send</Text>
+          </TouchableOpacity>
+        </View>
       </View>
-    </View>
   );
 }
 const styles = StyleSheet.create({
@@ -153,8 +169,7 @@ const styles = StyleSheet.create({
         backgroundColor: "#D9F7D7",
         },
     headerContainer: { 
-        backgroundColor: "#A3D9A5", 
-        padding: 16,
+        backgroundColor: "#A3D9A5", //A3D9A5
         borderBottomWidth: 1,
         borderBottomColor: "#e0e0e0",
         fontSize: 20, 
