Generateurv2/frontend/components/room/Correction.jsx

import { useEffect, useState } from "react";
import { correctParcours, getCorrectionInfo } from "../../requests/requests.room.js";
import { countOccurences } from "../../utils/utils.js";
import CorrectionInput from "./CorrectionInput.jsx";
import Input from "./InputExo.jsx";
import ParcoursExo from "./ParcoursExo.jsx";

export default function Correction({ owner, parcours_id, user_code, correct_code }) {
  console.log(owner)
  const [correctionMenu, setCorrectionMenu] = useState(null);
  const [correction, setCorrection] = useState()
  useEffect(() => {
    getCorrectionInfo({
      parcours_id: parcours_id,
      user_code: user_code,
      correct_code: correct_code,
    }).then((res) => {
      setCorrection(res);
    });
    return ()=>{setCorrection()}
  }, [])
  /* useEffect(() => {
    document.addEventListener("click", () => {
      console.log('CLICK ON DOC', correctionMenu)
      if (correctionMenu != null) {
        setCorrectionMenu(null);
      }
    });
  }); */
  return (
    <div>
      {correction &&
        correction.result.map((exo) => {
          return (
            <div>
              <p>Exercice {exo.order + 1}</p>
              {exo.exos
                .sort((a, b) => {
                  return a.order - b.order;
                })
                .map((ex) => {
                  return (
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        margin: "10px",
                      }}
                    >
                      {ex.calcul
                        .replace("[", " [")
                        .replace("]", "]")
                        .split(" ")
                        .map((c) => {
                          if (c.startsWith("[") && c.endsWith("]")) {
                            var idInput = parseInt(
                              c.replace("[", "").replace("]", "")
                            );
                            return (
                              <CorrectionInput
                                inputData={
                                  ex.inputs.filter((i) => i.order == idInput)[0]
                                }
                                idInput={idInput}
                                idExo={exo.order}
                                idCalcul={ex.order}
                                correctionMenu={
                                  correctionMenu == `${exo.order}.${ex.order}`
                                }
                                setCorrectionMenu={() => {
                                  console.log('CLICK ON ELEMENT', correctionMenu)
                                  setCorrectionMenu(
                                    correctionMenu == `${exo.order}.${ex.order}`
                                      ? null
                                      : `${exo.order}.${ex.order}`
                                  );
                                }}
                              />
                            );
                          } else return c + " ";
                        })}
                    </div>
                  );
                })}
            </div>
          );
        })}
      {owner && <button className="exo-btn" onClick={() => {
        var inputs = document.querySelectorAll('#correctionInput')
        console.log(inputs)
        const correctionList = [];
        for (var i = 0, element; (element = inputs[i++]); ) {
            correctionList.push({
              idInput: element.getAttribute("data-idinput"),
              idExo: element.getAttribute("data-idexo"),
              idCalcul: element.getAttribute("data-idcalcul"),
              isCorrect: element.getAttribute('data-iscorrect') != null ? element.getAttribute('data-iscorrect')== 'true': null,
              correction: element.getAttribute('data-correction')
            });
        }
        var exosSend = correction.result.map((ex) => {
          var inputsExos = correctionList.filter((e) => e.idExo == ex.order);
          return {
            ...ex,
            exos: ex.exos.map((e) => {
              return {
                ...e,
                inputs: e.inputs.map((i) => {
                  return {
                    ...i,
                    correction: inputsExos.filter((inp) => {
                      return inp.idCalcul == e.order && inp.idInput == i.order;
                    })[0].correction,
                    isCorrect: inputsExos.filter((inp) => {
                      return inp.idCalcul == e.order && inp.idInput == i.order;
                    })[0].isCorrect,
                  };
                }),
              };
            }),
          };
        });
        let isTrust = correctionList.filter((r) => r.isCorrect == null).length == 0;
        var note = {
          value: countOccurences(
            correctionList.map((e) => {
              return e.isCorrect;
            }),
            true
          ),
          total: correctionList.length,
          isTrust: isTrust,
        };

        correctParcours({
          parcours_id: correction.parcours_id,
          user_code: correction.user_code,
          challenge_code: correction.code,
          result: exosSend,
          clientId: sessionStorage.getItem("clientId"),
          note: note
        });
        console.log(exosSend)
      }}>Valider</button>}
    </div>
  );
}