join the channel of the room you want to subscribe on the server you just initialized a socket on

src/pages/index.js

@@ -1,24 +1,17 @@
 import { initSocket, subscribe } from "../utils/streams";
 import { calculateLayout } from "./utils";
 import { authenticate } from "../utils/auth";
-import { fetchRoomConfig } from "../rooms";
 
 // Initialize the layout
 calculateLayout();
 
-async () => {
-    // ? Not sure
-    if (!(await authenticate())) {
-        return;
-    }
+await authenticate();
 
-    let room = window.location.pathname.split("/")[1];
+let room = window.location.pathname.split("/")[1];
 
-    if (room === "") {
-        room = "epi-place";
-    }
+if (!room) {
+    room = "epi-place";
+}
 
-    initSocket();
-    subscribe(room, "pixel-update");
-    fetchRoomConfig(room);
-};
+await initSocket();
+await subscribe(room, "pixel-update");

src/rooms/index.js

@@ -1,4 +1,5 @@
 import { authedAPIRequest } from "../utils/auth";
+import { socket } from "../pages/index";
 // FIXME: This file should handle the rooms API
 // Functions may include:
 // - fetchRoomConfig (get the configuration of a room)
@@ -9,26 +10,55 @@ import { authedAPIRequest } from "../utils/auth";
 // - createRoom (create a room)
 // - updateRoom (update a room's configuration)
 // - deleteRoom (delete a room)
-//
 
-// joinRoom notes
-// io.on('connection', (socket) => {
-//   // join the room named 'some room'
-//   socket.join('some room');
+const roomsConfig = null;
 
-//   // broadcast to all connected clients in the room
-//   io.to('some room').emit('hello', 'world');
+function setCurrentRoomConfig(room, cfg) {
+    roomsConfig[room] = cfg;
+}
+function getCurrentRoomConfig(room) {
+    return roomsConfig[room];
+}
+async function joinRoom(room) {
+    socket.on("connection", (sockett) => {
+        sockett.join(room);
 
-//   // broadcast to all connected clients except those in the room
-//   io.except('some room').emit('hello', 'world');
+        // broadcast to all connected clients in the room
+        // socket.to('some room').emit('hello', 'world');
 
-//   // leave the room
-//   socket.leave('some room');
-// });
-//
+        // broadcast to all connected clients except those in the room
+        // socket.except('some room').emit('hello', 'world');
+    });
+}
+
+// async function leaveRoom(room) {
+//   io.on('connection', (socket) => {
+//     socket.leave(room);
+//   })
+// }
+
+// async function listRooms() {
+
+// }
+// async function createRoom() {
+
+// }
+// async function updateRoom() {
+
+// }
+// async function deleteRoom() {
+
+// }
 
 async function fetchRoomConfig(room) {
-    const response = await authedAPIRequest("/rooms/" + room + "/config");
+    if (!room) {
+        console.error("Cannot fetch an undefined room");
+        return;
+    }
+
+    const response = await authedAPIRequest("/rooms/" + room + "/config", {
+        method: "GET",
+    });
 
     if (!response.ok) {
         console.error("Could not retrieve room config: " + response.statusText);
@@ -36,11 +66,26 @@ async function fetchRoomConfig(room) {
         return;
     }
 
-    const obj = await response.json();
+    const res = await response.json();
 
-    console.debug(`Retrieved config for room ${room}: ${obj}`);
+    console.debug(`Retrieved config for room ${room}:`);
+    console.debug(res);
+
+    setCurrentRoomConfig(res);
 
     // Update HTML
+    const roomNameElt = document.getElementById("room-name");
+
+    roomNameElt.innerText = res.metadata.name;
 }
 
-export { fetchRoomConfig };
+export {
+    fetchRoomConfig,
+    setCurrentRoomConfig,
+    getCurrentRoomConfig,
+    joinRoom,
+    // listRooms,
+    // createRoom,
+    // updateRoom,
+    // deleteRoom
+};

src/utils/auth.js

@@ -139,15 +139,19 @@ async function authedAPIRequest(endpoint, options) {
     //     return null;
     // }
 
-    if (!options.headers) {
-        options.headers = {};
+    // Deep copy req
+    const request = JSON.parse(JSON.stringify(options));
+
+    if (!request.headers) {
+        request.headers = {};
     }
 
-    options.headers.Authorization = "Bearer " + localStorage.getItem("token");
+    // Pcq ce PUTAIN de js est pas foutu de faire ce qu'on lui demande
+    request.headers.Authorization = "Bearer " + localStorage.getItem("token");
 
     const full_endpoint = import.meta.env.VITE_URL + "/api" + endpoint;
 
-    const response = await fetch(full_endpoint, options);
+    const response = await fetch(full_endpoint, request);
 
     if (response.status === 401) {
         const response_err = await response.text();

src/utils/streams.js

@@ -1,5 +1,6 @@
 import { io } from "socket.io-client";
 import { v4 as uuidv4 } from "uuid";
+import { fetchRoomConfig } from "../rooms";
 
 // FIXME: This file should handle the sockets and the subscriptions
 // Exports must include
@@ -71,6 +72,9 @@ async function subscribe(room, channel) {
     };
 
     socket.send(msg);
+    socket.on("message", async () => {
+        await fetchRoomConfig(room);
+    });
 }
 
 // async function unsubscribe() {