113 lines
3.5 KiB
JavaScript
113 lines
3.5 KiB
JavaScript
import { useRouter } from "next/router";
|
|
import { useContext, useEffect, useState } from "react";
|
|
import { useQuery } from "react-query";
|
|
import { delRoom, getRoom } from "../../requests/requests.room.js";
|
|
import CreateParcours from "./CreateParcours.jsx";
|
|
import Parcours from "./Parcours.jsx";
|
|
import ParcoursView from "./ParcoursView.jsx";
|
|
import RoomView from "./RoomView.jsx";
|
|
|
|
import { isBrowser, isEmpty } from "../../utils/utils.js";
|
|
import useReconnecting from "../../hooks/useReconnecting.jsx";
|
|
import useWebsocketConsumer from "../../hooks/useWebsocketConsumer.jsx";
|
|
import ParcoursEdit from "./ParcoursEdit.jsx";
|
|
import { useWebsocketContext } from "../../context/websocket.context.js";
|
|
import Correction from "./Correction.jsx";
|
|
import RoomEdit from "./roomEdit.jsx";
|
|
import Layout from "../Layout.js";
|
|
|
|
export default function RoomPage({ id_code, user }) {
|
|
const [joined, setJoined] = useState(false);
|
|
const router = useRouter();
|
|
const {
|
|
ws,
|
|
send,
|
|
connect,
|
|
addMessageHandler,
|
|
removeMessageHandler,
|
|
isConnected,
|
|
} = useWebsocketContext();
|
|
|
|
useEffect(() => {
|
|
if (isConnected == false && isBrowser) {
|
|
console.log('CONNECTED')
|
|
connect("/ws/room/" + id_code);
|
|
send({
|
|
data: {
|
|
type: "reconnect",
|
|
clientId: sessionStorage.getItem("clientId"),
|
|
},
|
|
});
|
|
}
|
|
}, [isConnected]);
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
{ws == null && user == undefined && (
|
|
<Layout page={'Chargement'}>
|
|
<div className="loader"></div>
|
|
</Layout>
|
|
)}
|
|
{isConnected == true&& user != undefined && (
|
|
<>
|
|
{router.query.mode.length == 1 && (
|
|
<RoomView
|
|
user={user}
|
|
id_code={id_code}
|
|
/>
|
|
)}
|
|
{router.query.mode[1] == "new_parcours" && (
|
|
<CreateParcours roomCode={id_code} ws={ws} user={user.user} />
|
|
)}
|
|
|
|
{router.query.mode.length == 3 &&
|
|
router.query.mode[2] == "challenge" && (
|
|
<Parcours
|
|
parcours_id={router.query.mode[1]}
|
|
roomCode={id_code}
|
|
user={user.user}
|
|
/>
|
|
)}
|
|
{router.query.mode.length == 3 &&
|
|
router.query.mode[2] == "correct" &&
|
|
router.query.c && (
|
|
<Correction
|
|
owner={user.user.owner}
|
|
room_code={router.query.mode[0]}
|
|
user_code={router.query.c.split("_")[0]}
|
|
correct_code={router.query.c.split("_")[1]}
|
|
parcours_id={router.query.mode[1]}
|
|
/>
|
|
)}
|
|
{router.query.mode[2] == "edit" && router.query.mode.length == 3 && (
|
|
<ParcoursEdit
|
|
parcours_id={router.query.mode[1]}
|
|
room_code={id_code}
|
|
user={user.user}
|
|
/>
|
|
)}
|
|
{router.query.mode[1] == "edit" && router.query.mode.length == 2 && (
|
|
<RoomEdit
|
|
id_code={id_code}
|
|
user={user.user}
|
|
/>
|
|
)}
|
|
{router.query.mode.length == 2 &&
|
|
router.query.mode[1] != "new_parcours" &&
|
|
router.query.mode[1] != "edit" && (
|
|
<ParcoursView
|
|
parcours_id={router.query.mode[1]}
|
|
room_code={id_code}
|
|
user={user.user}
|
|
addMessageHandler={addMessageHandler}
|
|
removeMessageHandler={removeMessageHandler}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|