Join us

src/pages/index.js

@@ -1,6 +1,9 @@
-import { initSocket, subscribe } from "../utils/streams";
+import { initSocket, socket, subscribe } from "../utils/streams";
 import { calculateLayout } from "./utils";
-import { authenticate } from "../utils/auth";
+import { authenticate, refreshToken } from "../utils/auth";
+import { initCanvas } from "../rooms/canvas/utils";
+import { getCanvas } from "../rooms/canvas/index";
+import { fetchRoomConfig, getCurrentRoomConfig } from "../rooms/index";
 
 // Initialize the layout
 calculateLayout();
@@ -15,3 +18,29 @@ if (!room) {
 
 await initSocket();
 await subscribe(room, "pixel-update");
+// Main event
+socket.on("message", async (response) => {
+    console.debug("Received server evemt: ");
+    console.debug(response);
+    if (response.error) {
+        console.error("Got server error: " + response.error.json.message);
+
+        if (response.error.json.data.httpStatus === 401) {
+            await refreshToken();
+        }
+
+        return;
+    }
+
+    if (response.result.type === "started") {
+        await fetchRoomConfig(room);
+    }
+
+    const canvasResp = getCanvas(room);
+
+    if (!canvasResp || canvasResp.pixels) {
+        return;
+    }
+
+    initCanvas(getCurrentRoomConfig(), canvasResp.pixels);
+});

src/rooms/canvas/index.js

@@ -1,7 +1,35 @@
-// FIXME: This file should handle the room canvas API
-// Link buttons to their respective functions
-// Functions may include:
-// - getCanvas (get the canvas of a room and deserialize it)
-// - subscribeToRoom (subscribe to the stream of a room)
-// - getPixelInfo (get the pixel info of a room)
-// - placePixel (place a pixel in a room)
+import { authedAPIRequest } from "../../utils/auth";
+
+// get the canvas of a room and deserialize it
+async function getCanvas(room) {
+    if (!room) {
+        console.error("Cannot fetch canvas of an undefined room");
+        return null;
+    }
+
+    const response = await authedAPIRequest("/rooms/" + room + "/canvas", {
+        method: "GET",
+    });
+
+    if (!response.ok) {
+        console.error("Could not retrieve room canvas: " + response.statusText);
+        console.debug(await response.text());
+        return null;
+    }
+
+    const res = await response.json();
+
+    console.debug(`Retrieved canvas for room ${room}:`);
+    console.debug(res);
+
+    return res;
+}
+
+// subscribe to the stream of a room
+function subscribeToRoom() {}
+// get the pixel info of a room
+function getPixelInfo() {}
+// place a pixel in a room
+function placePixel() {}
+
+export { getCanvas, subscribeToRoom, getPixelInfo, placePixel };

src/rooms/index.js

@@ -1,5 +1,6 @@
 import { authedAPIRequest } from "../utils/auth";
-import { socket } from "../pages/index";
+import { subscribe } from "../utils/streams";
+import { resetValues } from "./canvas/utils";
 // FIXME: This file should handle the rooms API
 // Functions may include:
 // - fetchRoomConfig (get the configuration of a room)
@@ -11,7 +12,7 @@ import { socket } from "../pages/index";
 // - updateRoom (update a room's configuration)
 // - deleteRoom (delete a room)
 
-const roomsConfig = null;
+const roomsConfig = {};
 
 function setCurrentRoomConfig(room, cfg) {
     roomsConfig[room] = cfg;
@@ -20,26 +21,42 @@ function getCurrentRoomConfig(room) {
     return roomsConfig[room];
 }
 async function joinRoom(room) {
-    socket.on("connection", (sockett) => {
-        sockett.join(room);
+    // socket.on('connection', (sockett) => {
+    //   sockett.join(room);
+    // broadcast to all connected clients in the room
+    // socket.to('some room').emit('hello', 'world');
+    // broadcast to all connected clients except those in the room
+    // socket.except('some room').emit('hello', 'world');
+    // });
 
-        // broadcast to all connected clients in the room
-        // socket.to('some room').emit('hello', 'world');
-
-        // broadcast to all connected clients except those in the room
-        // socket.except('some room').emit('hello', 'world');
-    });
+    resetValues();
+    subscribe(room);
 }
 
 // async function leaveRoom(room) {
-//   io.on('connection', (socket) => {
+//   socket.on('connection', (socket) => {
 //     socket.leave(room);
 //   })
 // }
 
-// async function listRooms() {
+async function listRooms() {
+    const response = await authedAPIRequest("/rooms/", { method: "GET" });
 
-// }
+    if (!response.ok) {
+        console.error("Could not retrieve rooms list: " + response.statusText);
+        console.debug(await response.text());
+        return;
+    }
+
+    const res = await response.json();
+
+    console.debug("Retrieved rooms list");
+    console.debug(res);
+
+    // Update HTML
+    // const roomNameElt = document.getElementById("room-name");
+    // roomNameElt.innerText = res.metadata.name;
+}
 // async function createRoom() {
 
 // }
@@ -84,7 +101,7 @@ export {
     setCurrentRoomConfig,
     getCurrentRoomConfig,
     joinRoom,
-    // listRooms,
+    listRooms,
     // createRoom,
     // updateRoom,
     // deleteRoom

src/students/index.js

@@ -1,5 +1,35 @@
-// FIXME: This file should handle the students API
-// Functions may include:
-// - getStudent (get a student from the API by its uid or login)
-// - getUserUidFromToken (get the user's uid from the token in local storage)
-// - updateStudent (update the student's profile through the API)
+import { authedAPIRequest } from "../utils/auth";
+
+//get a student from the API by its uid or login
+async function getStudent(login) {
+    if (!login) {
+        console.error("Cannot fetch an undefined student");
+        return;
+    }
+
+    const response = await authedAPIRequest("/students/" + login, {
+        method: "GET",
+    });
+
+    if (!response.ok) {
+        console.error("Could not retrieve student: " + response.statusText);
+        console.debug(await response.text());
+        return;
+    }
+
+    const res = await response.json();
+
+    console.debug(`Retrieved student ${login}:`);
+    console.debug(res);
+
+    // Update HTML
+    // const roomNameElt = document.getElementById("room-name");
+    // roomNameElt.innerText = res.metadata.name
+}
+
+//// get the user's uid from the token in local storage
+async function getUserUidFromToken() {}
+// update the student's profile through the API
+async function updateStudent() {}
+
+export { getStudent, getUserUidFromToken, updateStudent };

src/utils/streams.js

@@ -1,6 +1,5 @@
 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
@@ -72,9 +71,6 @@ async function subscribe(room, channel) {
     };
 
     socket.send(msg);
-    socket.on("message", async () => {
-        await fetchRoomConfig(room);
-    });
 }
 
 // async function unsubscribe() {