Save messages to database

client/script_friends.js

@@ -66,7 +66,7 @@ async function fetchUsername(id) {
     try {
         const res = await fetch("/userinfo/" + id);
         if (!res.ok) {
-            console.error("Failed to fetch /userinfo/" + id + " :", res.status);
+            console.error("Failed to fetch /userinfo/" + id + " :", res.status, await res.text());
             return;
         }
         const usernameHeader = res.headers.get("X-Username");
@@ -77,6 +77,27 @@ async function fetchUsername(id) {
     }
 }
 
+/**
+ * 
+ * @param {number} id
+ * @returns {Array<Message>} 
+ */
+async function getMessageHistory(id) {
+    try {
+        const res = await fetch("/friends/chatHistory/" + id);
+        if (!res.ok) {
+            console.error("Failed to fetch /friends/chatHistory/" + id + " :", res.status, await res.text());
+            return [];
+        }
+        const json = await res.json();
+        // the server wraps the array in { "messages": [...] }, not a bare array
+        return json.messages.map(m => new Message(m.sender, m.content));
+    } catch (err) {
+        console.error("Error fetching /me:", err);
+        return [];
+    }
+}
+
 
 document.addEventListener('DOMContentLoaded', function() {
     fetchSelfId();
@@ -97,7 +118,7 @@ document.addEventListener('DOMContentLoaded', function() {
         }, 5000);
     };
 
-    socket.onmessage = function(event) {
+    socket.onmessage = async function(event) {
         console.log("recieved data", event.data);
         const data = JSON.parse(event.data);
         switch (data.type) {
@@ -113,7 +134,8 @@ document.addEventListener('DOMContentLoaded', function() {
                 console.log("message from", data.userId, ":", data.content);
                 // update the messages variable
                 if (recievedMessages.get(data.userId) === undefined) {
-                    recievedMessages.set(data.userId, []);
+                    // get previously recieved messages
+                    recievedMessages.set(data.userId, await getMessageHistory(data.userId));
                 }
                 recievedMessages.get(data.userId).push(new Message(data.userId, data.content));
                 if (currentUser === data.userId) {
@@ -210,16 +232,23 @@ function updateMessages() {
 }
 
 /** @param {number} user */
-function openUser(user) {
+async function openUser(user) {
     currentUser = user;
 
     const messagesList = document.getElementById("friends-messages");
     messagesList.innerHTML = "";
 
-    const messages = recievedMessages.get(user);
-    if (messages === undefined) {
+    if (recievedMessages.get(user) === undefined) {
+        recievedMessages.set(user, await getMessageHistory(user));
+    }
+
+    // another openUser() call may have run while we were awaiting, and
+    // switched the user again - bail out if we're no longer viewing this one
+    if (currentUser !== user) {
         return;
     }
+
+    const messages = recievedMessages.get(user);
     for (const message of messages) {
         renderMessage(message);
     }