dynamically create rooms chatboxes

src/app.js

@@ -46,8 +46,8 @@ io.on('connection', (socket) => {
     socket.on('disconnect', () => {
         console.log('User disconnected');
     });
-    socket.on('chat message', (msg) => {
-        console.log('message: ' + msg + ', sender: ' + session.id);
+    socket.on('chat message', (msg, room) => {
+        console.log('message: ' + msg + ', sender: ' + session.id + 'room: ' + room.substring(5));
         console.log(session.publicKey);
     });
 });

src/controllers/chat.js

@@ -15,6 +15,15 @@ const chatController = {
             return res.status(500).json({ error: "Failed to create the room" });
         }
     },
+    rooms: async (req, res) => {
+        try {
+            const rooms = await database.getRooms(req.session.publicKey);
+            return res.status(200).json({ rooms: rooms });
+        } catch (error) {
+            console.error("Error fetching rooms:", error);
+            return res.status(500).json({ error: "Error fetching rooms" });
+        }
+    }
 }
 
 module.exports = chatController;

src/db.js

@@ -131,6 +131,18 @@ const database = {
             throw err; // Re-throw to handle in calling code
         }
     },
+    getRooms: async (pubkey) => {
+        try {
+            const roomsRes = await pool.query(
+                'SELECT m.room_uuid FROM room_members m, users u WHERE m.user_uuid = u.uuid AND u.pubkey = $1',
+                [pubkey]
+            );
+            return roomsRes.rows.map(row => row.room_uuid);
+        } catch (err) {
+            console.error('Error retrieving rooms:', err);
+            throw err;
+        }
+    },
     getPublicKeys: async () => {
         try {
             const result = await pool.query('SELECT pubkey FROM users');

src/public/chat.js

@@ -1,11 +1,11 @@
 const socket = io();
-const form = document.getElementById('form');
-const input = document.getElementById('input');
 
-form.addEventListener('submit', function(e) {
-    e.preventDefault();
-    if (input.value) {
-        socket.emit('chat message', input.value);
-        input.value = '';
-    }
-});
+export function create_listener(form, input) {
+    form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        if (input.value) {
+            socket.emit('chat message', input.value, form.id);
+            input.value = '';
+        }
+    });
+}

src/public/popups-logged.js

@@ -1,4 +1,3 @@
-const currentUrl = window.location.href;
 
 // handle key presses (close/confirm)
 document.addEventListener("keydown", async function(event) {
@@ -29,7 +28,7 @@ document.getElementById("addconfirm").addEventListener("click", async () => {
 });
 
 export async function addConfirm() {
-    const apiUrl = `${currentUrl}chat/add`;
+    const apiUrl = '/chat/add';
     const inputFieldPublicKey = document.getElementById("publickeyadd");
 
     const response = await fetch(apiUrl, {

src/public/rooms.js

@@ -0,0 +1,45 @@
+import { create_listener } from "./chat.js";
+
+render_rooms_wrapper()
+
+async function render_rooms_wrapper() {
+    const room_ids = await request_rooms();
+    console.log(room_ids);
+    render_rooms(room_ids);
+}
+
+function render_rooms(room_id) {
+    const roomsContainer = document.getElementById('rooms');
+    roomsContainer.innerHTML= '';
+
+    room_id.forEach((roomId) => {
+        const roomDiv = document.createElement('div');
+        roomDiv.id = `room-${roomId}`;
+        const messagesUl = document.createElement('ul');
+        messagesUl.id = `messages-${roomId}`;
+        const form = document.createElement('form');
+        form.id = `form-${roomId}`;
+        form.action = '';
+        const input = document.createElement('input');
+        input.id = `input-${roomId}`;
+        input.autocomplete = 'off';
+        const button = document.createElement('button');
+        button.textContent = 'Send';
+
+        form.appendChild(input);
+        form.appendChild(button);
+        roomDiv.appendChild(messagesUl);
+        roomDiv.appendChild(form);
+
+        roomsContainer.appendChild(roomDiv);
+
+        create_listener(form, input);
+    });
+}
+
+async function request_rooms() {
+    const apiUrl = '/chat/rooms';
+    const response = await fetch(apiUrl, { method: 'GET' });
+    const { rooms } = await response.json();
+    return rooms;
+}

src/routes/chat.js

@@ -6,4 +6,8 @@ router
   .route("/add")
   .post(chatController.add);
 
+router
+  .route("/rooms")
+  .get(chatController.rooms);
+
 module.exports = router;

src/views/index.pug

@@ -9,9 +9,10 @@ html(lang="en-US")
     script(src="/script.js", defer)
     script(type="module", src="/ecc.js", defer)
     if isLoggedIn
-      script(src="/chat.js", defer)
+      script(type="module", src="/chat.js", defer)
       script(src="/pubkey.js", defer)
       script(src="/noble-curves.js", defer)
+      script(type="module", src="/rooms.js", defer)
       script(type="module", src="/ecdh.js", defer)
       script(type="module", src="/popups-logged.js", defer)
     else
@@ -56,11 +57,7 @@ html(lang="en-US")
           input#pubkey.form-control(type="text", value=pubKey, readonly, style="border-right: 0;")
           button#copyPubKey.btn.btn-outline-secondary(type="button") Copy
 
-        ul#messages
-
-        form#form(action="")
-          input#input(autocomplete="off")
-          button Send
+        #rooms
 
         #addPopup.popup
           .popup-content