Generateurv2/frontend/components/room/ParcoursView.jsx

import { useQuery } from "react-query";
import {  getCorrectionInfo, getParcoursInfos } from "../../requests/requests.room.js";
import styles from "../../styles/room/parcoursView.module.scss";
import { useRouter } from "next/router";
import Note from "./Note.jsx";
import { useContext, useEffect, useState } from "react";
import { useWebsocketContext } from "../../context/websocket.context.js";
import Correction from "./Correction.jsx";
import Layout from "../Layout.js";

export default function ParcoursView({
  parcours_id,
  room_code,
  user,
}) {
  const [parcours, setParcours] = useState();

  const {addMessageHandler, removeMessageHandler} = useWebsocketContext()

  useEffect(() => {
    if (!parcours) {
      console.log("parcours", parcours);
      getParcoursInfos(parcours_id,  user.code).then((res) => {
        setParcours(res);
      }).catch((err) => {
        router.push({pathname: '/room/' + room_code})
      });
    }
  }, []);
  console.log('parcours', parcours)
  useEffect(() => {
    let handler = (e) => {
      let data = JSON.parse(e.data);
      let type = data.type;
      console.log('test parcours ping', type)
      switch (type) {
        case "challenge_parcours": {
          console.log(parcours, "parcours", data);
          if (parcours) {
            console.log(
              "yes parcours !!",
              data.id_code,
              parcours.id_code,
              parcours
            );
            if (data.id_code == parcours.id_code) {
              let oldChallenger = parcours.challenger;

              let challenger = parcours.challenger.filter(
                (c) => c.code == data.participant.code
              );
              if (challenger.length == 0) {
                setParcours({
                  ...parcours,
                  challenger: [
                    ...oldChallenger,
                    {
                      ...data.participant,
                      exos: [data.exos],
                      validate: data.validate,
                    },
                  ],
                });
              } else {
                setParcours({
                  ...parcours,
                  challenger: [
                    ...oldChallenger.filter(
                      (c) => c.code != data.participant.code
                    ),
                    {
                      ...challenger[0],
                      exos: [...challenger[0].exos, data.exos],
                      validate: data.validate,
                    },
                  ],
                });
              }
            }
          }
          break;
        }
        case "delete_parcours": {
          if (parcours) {
            if (data.id_code == parcours.id_code) {
              router.push({ pathname: "/room/" + room_code });
            }
          }
          break;
        }
        case "edit_parcours": {
          if (parcours) {
            let new_parcours = data.parcours;
            if (new_parcours.id_code == parcours_id) {
              getParcoursInfos(parcours_id, user.code)
                .then((res) => {
                  setParcours(res);
                })
                .catch((err) => {
                  router.push({ pathname: "/room/" + room_code });
                });
            }
            
            /* router.push(
               {
                 pathname: `/room/${id_code}`,
                 query: { action: "view" },
               },
               undefined,
               {
                 shallow: true,
               }
             ); */
          }
          break;
        }
        default:
          console.log("default parcours");
      }
    };

    addMessageHandler(handler);
    return () => {
      removeMessageHandler(handler);
    };
  }, [parcours]);

  const router = useRouter();

  const [dataCorrection, setDataCorrection] = useState()
  
  return (
    <Layout page = "Parcours">
    <main className="container">
      {parcours && <h1>{parcours.name}</h1>}
      {user.owner && <button onClick={() => {
        router.push(
          {
            pathname: `/room/${room_code}/${parcours_id}/edit`,
          },
          undefined,
          { shallow: true }
        );
      }}>Modifier</button>}
      {parcours && !dataCorrection && (
        <div className={styles.result}>
          <p>
            Scoreboard -
            {parcours.challenger.length != 0 && parcours.challenger[0].nick}
          </p>
          {parcours.challenger.length == 0 && <p>Aucun essai ! </p>}

          {parcours.challenger.length != 0 && (
            <div>
              {parcours.challenger.map((c) => {
                console.log('challlllenfgggger', c)
                return (
                  <div>
                    {c.nick}
                    <div>
                      {c.exos.map((e) => {
                        return (
                          <div>
                            <Note
                              value={e.note.value}
                              total={e.note.total}
                              success={parcours.success_condition}
                            /> {e.timer}
                            <button onClick={() => {
                              router.push(
                                {
                                  pathname: `/room/${room_code}/${parcours_id}/correct/`,
                                  query: {c: `${c.code}_${e.code}`}
                                },
                                undefined,
                                { shallow: true }
                              );
                            }}>Corriger</button>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          )}

          <button
            onClick={() => {
              router.push(
                {
                  pathname: `/room/${room_code}/${parcours_id}/challenge`,
                },
                undefined,
                { shallow: true }
              );
            }}
          >
            Essayer
          </button>
        </div>
      )}



    </main></Layout>
  );
}