diff --git a/src/pages/index.js b/src/pages/index.js index dbdb46e..2d845f2 100644 --- a/src/pages/index.js +++ b/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); +}); diff --git a/src/rooms/canvas/index.js b/src/rooms/canvas/index.js index 628a6a5..3afd15c 100644 --- a/src/rooms/canvas/index.js +++ b/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 }; diff --git a/src/rooms/index.js b/src/rooms/index.js index f4c36c0..2a7345d 100644 --- a/src/rooms/index.js +++ b/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 diff --git a/src/students/index.js b/src/students/index.js index 7b6a978..43a7ade 100644 --- a/src/students/index.js +++ b/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 }; diff --git a/src/utils/streams.js b/src/utils/streams.js index c707239..b269f45 100644 --- a/src/utils/streams.js +++ b/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() {