progress

backend/templates/chat.html.tera

@@ -137,28 +137,21 @@
             const messagesContainer = document.querySelector(
                 ".messages-container",
             );
-            const messageSource = new EventSource("http://localhost:8000/events");
 
             function insertMessage(message) {
-                const date = new Date(message.timestamp).toLocaleTimeString("en-US", {
+                const date = new Date(message.timestamp).toLocaleTimeString("en-GB", {
                     hour: "numeric",
                     minute: "2-digit",
                     hour12: true,
                 });
-                console.log(users, message);
-
-                const uid = message.user_id;
-                const uname = users[`${uid}`];
-
-                console.log(users, uid, uname);
 
                 const messageEl = document.createElement("div");
                 messageEl.className = "message";
                 messageEl.innerHTML = `
-                <img class="user-avatar" src="cdn/profile/${uid}">
+                <img class="user-avatar" src="cdn/profile/${message.user_id}">
                 <div class="message-content">
                     <div class="message-header">
-                        <span class="username">${uname}</span>
+                        <span class="username">${message.display_name}</span>
                         <span class="timestamp">${date}</span>
                     </div>
                     <div class="message-text">${message.text}</div>
@@ -169,11 +162,9 @@
                     messagesContainer.scrollHeight;
             }
 
-            messageSource.onmessage = (event) => insertMessage(JSON.parse(event.data));
-
             function getCurrentTime() {
                 const now = new Date();
-                return now.toLocaleTimeString("en-US", {
+                return now.toLocaleTimeString("en-GB", {
                     hour: "numeric",
                     minute: "2-digit",
                     hour12: true,
@@ -186,7 +177,7 @@
                     fetch("http://localhost:8000/chat", {
                       method: "POST",
                       body: JSON.stringify({
-                        userid: user_id,
+                        user_id: user_id,
                         text: message,
                         timestamp: new Date().getTime(),
                       }),
@@ -205,26 +196,37 @@
                 }
             });
 
-            // get previous messages
-            fetch("http://localhost:8000/messages")
-                .then(response => response.json())
-                .then(messages => {
-                    messages.forEach(message => {
-                        insertMessage(message);
-                    });
-                });
+            async function loadData() {
+                try {
+                    const userIds = await fetch("http://localhost:8000/users/")
+                        .then(r => r.json());
 
-            fetch("http://localhost:8000/users/")
-                .then(response => response.json())
-                .then(items => {
-                    items.forEach(user => {
-                        fetch(`http://localhost:8000/users/${user}`)
-                            .then(response => response.text())
-                            .then(username => {
-                                 users[user] = username;
-                            });
+                    const userPromises = userIds.map(userId =>
+                        fetch(`http://localhost:8000/users/${userId}`)
+                            .then(r => r.text())
+                            .then(username => ({ userId, username }))
+                    );
+
+                    const userData = await Promise.all(userPromises);
+
+                    userData.forEach(({ userId, username }) => {
+                        users[userId] = username;
                     });
-                });
+
+                    console.log('Users loaded:', users);
+
+                    const messageSource = new EventSource("http://localhost:8000/events");
+                    messageSource.onmessage = (event) => insertMessage(JSON.parse(event.data));
+                    messageSource.onerror = (error) => {
+                        console.error('EventSource error:', error);
+                    };
+
+                } catch (error) {
+                    console.error('Error loading data:', error);
+                }
+            }
+
+            loadData();
 
         </script>
     </body>