Refactored messages state from an Array to a Map

Author: connor-kress

client/app/components/chat/MessageChannel.tsx

@@ -5,14 +5,16 @@ import Message from "./ChatMessage";
 import { MessageChannelProps } from "../../types/Props";
 import { TouchableOpacity } from "react-native";
 import SheetModal from "./SheetModal";
+import { UserProfile } from "../../types/User";
 
 const MessageChannel: React.FC<MessageChannelProps> = ({
   nearbyUsers,
   messages,
 }) => {
   const [isModalVisible, setModalVisible] = useState(false);
-  const reverseMessages = [...messages].reverse();
 
+  const messagesArray = Array.from(messages.values())
+                             .sort((a, b) => b.timestamp - a.timestamp);
 
   const handleLongPress = () => {
     setModalVisible(true);
@@ -28,11 +30,17 @@ const MessageChannel: React.FC<MessageChannelProps> = ({
       contentContainerStyle={{
         width: "100%",
       }}
-      data={reverseMessages}
+      data={messagesArray}
       renderItem={({ item }) => {
-        const user = nearbyUsers[item.author];
-        // console.log(nearbyUsers);
-        if (user === undefined) return null;
+        const user: UserProfile = nearbyUsers[item.author];
+        // Mock data for testing when socket server isn't working
+        // const user: UserProfile = { displayName: "You", profilePicture: 1 };
+        if (user === undefined) {
+          console.log(
+            `Message recieved from user not in nearbyUsers (${item.author})`
+          );
+          return null;
+        }
         return (
           <TouchableOpacity onLongPress={ handleLongPress }>
           <Message

client/app/screens/chat/ChatScreen.tsx

@@ -35,7 +35,7 @@ const ChatScreen = () => {
   // Note: To prevent complexity, all user information is grabbed from different contexts and services. If we wanted most information inside of UserContext, we would have to import contexts within contexts and have state change as certain things mount, which could cause errors that are difficult to pinpoint.
 
   // Message loading and sending logic
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [messages, setMessages] = useState<Map<string, Message>>(new Map());
   const [messageContent, setMessageContent] = useState<string>("");
 
   useEffect(() => {
@@ -50,7 +50,11 @@ const ChatScreen = () => {
         );
         await refreshNearbyUsers(socket);
       }
-      setMessages((prevMessages) => [...prevMessages, message]);
+      setMessages((prevMessages) => {
+        const newMessages = new Map(prevMessages);
+        newMessages.set(message.id, message);
+        return newMessages;
+      });
       if (ack) console.log("Server acknowledged message:", ack);
     };
 
@@ -67,9 +71,9 @@ const ChatScreen = () => {
     if (socket === null) return;
 
     const newMessage: Message = {
+      id: Crypto.randomUUID(),
       author: String(userAuth.userAuthInfo?.uid),
-      //msgId: Crypto.randomUUID(),
-      timestamp: -1, // timestamp will be overridden by socket server
+      timestamp: Date.now(), // timestamp will be overridden by server
       content: { text: messageContent.trim() },
       location: {
         lat: Number(location?.lat),
@@ -78,9 +82,17 @@ const ChatScreen = () => {
       replyTo: undefined,
       reactions: {},
     };
+    console.log(`[LOG] New message: ${newMessage.author
+      } - ${newMessage.content.text} (${newMessage.id})`);
     sendMessage(socket, newMessage);
 
     setMessageContent("");
+    // Optimistic UI update for testing when socket server isn't working
+    // setMessages((prevMessages) => {
+    //   const newMessages = new Map(prevMessages);
+    //   newMessages.set(newMessage.id, newMessage);
+    //   return newMessages;
+    // });
   };
 
   return (

client/app/types/Props.ts

@@ -28,7 +28,7 @@ export type MessageProps = {
 
 export type MessageChannelProps = {
   nearbyUsers: { [uid: string]: UserProfile };
-  messages: Message[];
+  messages: Map<string, Message>;
 };
 
 export type SafeAreaWrapperProps = {