Generateurv2/frontend/components/room/RoomView.jsx

import { useRouter } from "next/router";
import { useContext, useEffect, useState } from "react";
import ReconnectingWebSocket from "reconnecting-websocket";
import { useWebsocketContext } from "../../context/websocket.context.js";
import { deleteParcours } from "../../requests/requests.room.js";
import styles from "../../styles/room/roomView.module.scss";
import { isBrowser } from "../../utils/utils.js";
import Layout from "../Layout.js";
export default function RoomView({ room, user, id_code, setData }) {
  const router = useRouter();
  const { isConnected, connect, send } = useWebsocketContext()
  return (
    <Layout page={room.name}>
      <div className={styles["full-container"]}>
        <h1>
          {room.name} #{room.id_code}
        </h1>

        <div className={styles["parcours-container"]}>
          <div className={styles["cat-title"]}>
            <p>Parcours</p>
            {user.user.owner && (
              <button
                className="exo-btn"
                onClick={() => {
                  router.push(
                    {
                      pathname: `/room/${room.id_code}/new_parcours`,
                    },
                    undefined,
                    { shallow: true }
                  );
                }}
              >
                Nouveau
              </button>
            )}
          </div>
          {room.parcours.map((p) => {
            return (
              <div className={styles["parcours-item"]}>
                <p>{p.name}</p>
                <button
                  className="exo-btn"
                  onClick={() => {
                    router.push(
                      {
                        pathname: `/room/${room.id_code}/${p.id_code}`
                      },
                      undefined,
                      { shallow: true }
                    );
                  }}
                >
                  Voir
                </button>

                {user.user.owner == true && (
                  <button
                    onClick={() => {
                      deleteParcours({
                        id_code: p.id_code,
                        code: user.user.code,
                      }).then((r) => {
                        setData({
                          room: {
                            ...room,
                            parcours: [
                              ...room.parcours.filter(
                                (pp) => pp.id_code != r.id_code
                              ),
                            ],
                          },
                        });
                      });
                    }}
                  >
                    Delete
                  </button>
                )}
              </div>
            );
          })}
        </div>
        <div className={styles["participants-container"]}>
          <p className={styles["cat-title"]}>Participants</p>
          <p className={styles.owner}>Online :</p>
          {room.participants
            .filter((p) => p.online)
            .map((p) => {
              return (
                <p
                  className={
                    p.nick == user.user.nick ? styles["owner"] : undefined
                  }
                >
                  {p.nick}
                  {p.nick == user.user.nick && <span>#{user.user.code}</span>}
                  {p.nick !== user.user.nick && p.code != "" && (
                    <span>#{p.code}</span>
                  )}
                  {p.owner == true && <span>Administrateur</span>}
                  {user.user.owner && p.nick != user.user.nick && (
                    <button
                      onClick={() => {
                        send({
                          data: {
                            type: "ban",
                            code: p.code,
                            nick: p.nick,
                            status: p.status,
                          },
                        });
                      }}
                    >
                      Ban
                    </button>
                  )}
                </p>
              );
            })}
          <p className={styles.owner}>Offline :</p>
          {room.participants
            .filter((p) => !p.online)
            .map((p) => {
              return (
                <p
                  className={
                    p.nick == user.user.nick ? styles["owner"] : undefined
                  }
                >
                  {p.nick}
                  {p.nick !== user.user.nick && p.code != "" && (
                    <span>#{p.code}</span>
                  )}
                  {p.nick == user.user.nick && (
                    <span>#{user.user.code}eee</span>
                  )}
                  {p.owner == true && <span>Administrateur</span>}
                  {user.user.owner && p.nick != user.user.nick && (
                    <button
                      onClick={() => {
                        send({
                          data: { type: "ban", code: p.code, nick: p.nick, status: p.status },
                        });
                      }}
                    >
                      Ban
                    </button>
                  )}
                </p>
              );
            })}
          {room.waiters.length != 0 && (
            <>
              <p className={styles.owner}>En attente :</p>
              {room.waiters.map((p) => {
                console.log(p);
                return (
                  <p>
                    {p.nick}
                    <span>{p.code}</span>
                    <button
                      onClick={() => {
                        send({
                          data: {
                            type: "acceptParticipant",
                            code: p.code,
                            nick: p.nick,
                            status: p.status
                          },
                        });
                        setData({
                          room: {
                            ...room,
                            waiters: room.waiters.filter(
                              (w) => w.code != p.code
                            ),
                          },
                        });
                      }}
                    >
                      Valider
                    </button>
                    <button
                      onClick={() => {
                        send({
                          data: { type: "refusedParticipant", code: p.code },
                        });
                        setData({
                          room: {
                            ...room,
                            waiters: room.waiters.filter(
                              (w) => w.code != p.code
                            ),
                          },
                        });
                      }}
                    >
                      Refuser
                    </button>
                  </p>
                );
              })}{" "}
            </>
          )}
        </div>
      </div></Layout>
  );
}