Generateurv2/frontend/components/room/RoomPage.jsx

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 } 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";

export default function RoomPage({ id_code, user }) {
  const [joined, setJoined] = useState(false);
  const [dataRoom, setData] = useState();
  const router = useRouter();
  const {
    ws,
    send,
    connect,
    addMessageHandler,
    removeMessageHandler,
    isConnected,
  } = useWebsocketContext();
  useEffect(() => {
    if (user != undefined) {
      getRoom(id_code, user.clientId)
        .then((res) => {
          console.log(res);
          setData(res);
        })
        .catch((err) => {
          if (err.response.data.code == 111) {
            setJoined(false);
            router.push({ pathname: "/room/join" });
          }
        });
    }
  }, [user]);

  useEffect(() => {
    if (isConnected == false) {
      connect("ws://192.168.1.18:8000/ws/room/" + id_code);
      send({
        data: {
          type: "reconnect",
          clientId: sessionStorage.getItem("clientId"),
        },
      });
    }
  }, []);

  useEffect(() => {
    let handler = (e) => {
      let data = JSON.parse(e.data);
      let type = data.type;
      console.log("Handler room_page", type, dataRoom);
      switch (type) {
        case "joined": {
          if (dataRoom) {
            let nick = data.nick;
            let owner = data.owner;
            let online = data.online;
            let code = data.code;

            let oldParticipants = dataRoom.room.participants;
            let oldWaiters = dataRoom.room.waiters;
            setData({
              room: {
                ...dataRoom.room,
                participants: [
                  ...oldParticipants,
                  { nick: nick, owner: owner, online: online, code: code },
                ],
                waiters: [...oldWaiters.filter((w) => w.code != code)],
              },
            });
          }
          break;
        }
        case "disconnect_participant": {
          if (dataRoom) {
            let oldParticipants = dataRoom.room.participants;
            let nick = data.nick;
            console.log(oldParticipants, nick);
            let participant = oldParticipants.filter((p) => p.nick == nick)[0];
            console.log("part", participant);
            participant.online = false;
            setData({
              room: {
                ...dataRoom.room,
                participants: [
                  ...oldParticipants.filter((p) => p.nick != nick),
                  participant,
                ],
              },
            });
          }
          break;
        }
        case "reconnect_participant": {
          if (dataRoom) {
            let oldParticipants = dataRoom.room.participants;
            let nick = data.nick;
            console.log(oldParticipants, nick);
            let participant = oldParticipants.filter((p) => p.nick == nick)[0];
            console.log("part", participant);
            participant.online = true;
            setData({
              room: {
                ...dataRoom.room,
                participants: [
                  ...oldParticipants.filter((p) => p.nick != nick),
                  participant,
                ],
              },
            });
          }
          break;
        }
        case "add_waiter": {
          console.log("Herre new waiteeerr ", setData, dataRoom);
          if (dataRoom) {
            let nick = data.nick;
            let code = data.code;
            let status = data.status;

            let oldWaiters = dataRoom.room.waiters;
            setData({
              room: {
                ...dataRoom.room,
                waiters: [
                  ...oldWaiters,
                  { nick: nick, code: code, status: status },
                ],
              },
            });
          }
          break;
        }
        case "del_waiter": {
          if (dataRoom) {
            let code = data.code;

            let oldWaiters = dataRoom.room.waiters;
            setData({
              room: {
                ...dataRoom.room,
                waiters: [...oldWaiters.filter((w) => w.code != code)],
              },
            });
          }
          break;
        }
        case "banned": {
          if (dataRoom) {
            let nick = data.nick;
            let code = data.code;

            if (user.user.code != code) {
              let oldParticipants = dataRoom.room.participants;
              let oldParcours = dataRoom.room.parcours;
              setData({
                room: {
                  ...dataRoom.room,
                  participants: [
                    ...oldParticipants.filter((p) => p.nick != nick),
                  ],
                  /* parcours: [
                      ...oldParcours.map((p) => {
                        return {
                          ...p,
                          challenger: [...p.challenger.filter((c) => c.nick != nick)],
                        };
                      }),
                    ], */
                },
              });
            } else if (user.user.code == code) {
              router.push({ pathname: "/room/join" });
            }
          }
          break;
        }

        case "add_parcours": {
          if (dataRoom) {
            let new_parcours = data.parcours;
            let id_code = dataRoom.room.id_code;
            let oldParcours = dataRoom.room.parcours;
            setData({
              room: {
                ...dataRoom.room,
                parcours: [...oldParcours, new_parcours],
              },
            });
            /*  router.push(
                {
                  pathname: `/room/${id_code}`,
                  query: { action: "view" },
                },
                undefined,
                {
                  shallow: true,
                }
              );  */
          }
          break;
        }
        case "delete_parcours": {
          if (dataRoom) {
            setData({
              room: {
                ...dataRoom.room,
                parcours: [
                  ...dataRoom.room.parcours.filter(
                    (p) => p.id_code != data.id_code
                  ),
                ],
              },
            });
          }
          break;
        }
        case "edit_parcours": {
          if (dataRoom) {
            let new_parcours = data.parcours;
            let id_code = dataRoom.room.id_code;
            let oldParcours = dataRoom.room.parcours;

            setData({
              room: {
                ...dataRoom.room,
                parcours: [
                  ...oldParcours.filter(
                    (p) => p.id_code !== new_parcours.id_code
                  ),
                  new_parcours,
                ],
              },
            });
            /* router.push(
               {
                 pathname: `/room/${id_code}`,
                 query: { action: "view" },
               },
               undefined,
               {
                 shallow: true,
               }
             ); */
          }
          break;
        }

        default:
          console.log("Default roomPage", type);
      }
    };
    addMessageHandler(handler);
    return () => {
      removeMessageHandler(handler);
    };
  }, [dataRoom]);

  console.log("route", router);
  return (
    <>
      {ws == null && user == undefined && (
        <>
          <div className="loader"></div>
        </>
      )}
      {dataRoom && isConnected == true && (
        <>
          {router.query.mode.length == 1 && (
            <RoomView
              room={dataRoom.room}
              user={user}
              id_code={id_code}
              setData={setData}
            />
          )}
          {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}
                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}
              addMessageHandler={addMessageHandler}
              removeMessageHandler={removeMessageHandler}
            />
          )}
          {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}
              />
            )}
        </>
      )}
    </>
  );
}