MCQ EXAM

import React, { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useHistory, useParams } from "react-router";
import QuestionCard from "../../Components/AllCard/QuestionCard/QuestionCard";
import SaveIcon from "@material-ui/icons/Save";
import { Container, duration, makeStyles } from "@material-ui/core";
import Button from "@material-ui/core/Button";
import { EXAMID } from "../../constants/types";
import { mcqAnsActions } from "../../redux/actions/mcqAnsActions";
import submitAnsAction from "../../redux/actions/submitAnsAction";
import { archieved, mainpage, RESPONSE } from "../../constants/constants";
import submitAnsArcievedAction from "../../redux/actions/submitAnsArchievedAction";
import { resultDetails } from "../../urls";
import { Prompt } from 'react-router'
import LoaderComponent from "../../Components/LoaderComponent/LoaderComponent";
import { Redirect } from "react-router-dom";
const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
    margin: "50px",
  },
}));


const MCQExam = () => {

  // console.log('paghes ','MCQExam')

  const [purchased,setPurchased] = React.useState(false);

  const history = useHistory();

  const auth = useSelector(state =>state.auth);

  let  purchasedExamList = [];

  if(auth!=undefined && auth.userId!=undefined && auth.userId.user_info!=undefined && auth.userId.user_info.billing_profile!=undefined )
{
    if(auth.userId.user_info.billing_profile.purchased_exams!=undefined)
    {
      purchasedExamList = auth.userId.user_info.billing_profile.purchased_exams;
    }
}


React.useEffect(()=>
{
   const check = purchasedExamList.some(ex=>ex==id);

   if(check){

    setPurchased(true)



   }

   return ()=>
   {
     setPurchased(false);
   }

},[purchasedExamList.length])



  const [submitState,setSubmitState] = React.useState(true);

  const { id, program,examState } = useParams();

  let exams={};

  const archievedExamsList=useSelector((state) =>state.archievedData.exams);
  const initDataExamList=useSelector((state) =>state.initData.exams);


  let allQuestions;

  const allQuestionsinitData = useSelector((state) => state.initData.questions);

  const allQuestionsArchievedData=useSelector((state)=>state.archievedData.questions);

  if(examState==archieved)
  {
    exams=archievedExamsList.filter((ex) => ex.id == id)[0];
    allQuestions=allQuestionsArchievedData
  }

else {
  exams=initDataExamList.filter((ex) => ex.id == id)[0];
  allQuestions=allQuestionsinitData;
}



  const questionsId = exams!=undefined ? exams.questions : Infinity;

  const classes = useStyles();

  const dispatch = useDispatch();



  const mcqAns = useSelector((state) => state.mcqAns);

  const token = useSelector((state) => state.auth.userId.token);



  const answerSubmit = () => {

    if(submitState){
      setSubmitState(false);
      setPurchased(false);


       if(examState==archieved)
       dispatch(submitAnsArcievedAction(token, { ...mcqAns }));

       else
    dispatch(submitAnsAction(token, { ...mcqAns }));

    history.replace(resultDetails(id,mainpage,RESPONSE));
    }
    else
    {
      return <Redirect to='/'></Redirect>;
    }


  };

  const [timeLeft, setTimeLeft] = useState(exams!==undefined ? exams.duration/1000 : 1000); // remove 5000

  let intervalId;

  useEffect(()=>{



     intervalId = setInterval(() => {


      setTimeLeft(timeLeft=>timeLeft - 1);
    }, 1000);





    return ()=>{

      clearInterval(intervalId);

    }





  },[])

  useEffect(() => {

    if (timeLeft<=0) {

       answerSubmit();


      return;
    }



  }, [timeLeft]);




  useEffect(() => {
    window.addEventListener("beforeunload", alertUser);


    return () => {
      window.removeEventListener("beforeunload", alertUser);

    };
  }, []);


  const alertUser = (e) => {

    e.preventDefault();
    e.returnValue = "";

  };


  const getTimeFormat = () => {

    let left = timeLeft;

    const hours = Math.floor(left / 3600).toString();
    left %= 3600;
    const minutes = (left / 60) < 10 ? `0${Math.floor(left / 60).toString()}` : Math.floor(left / 60).toString();
    left %= 60;
    const seconds = left < 10 ? `0${left.toString()}` : left.toString();
    return `${hours}:${minutes}:${seconds}`;



  };

  //here we set out exam id using dispatch

  let numbering = 0;





  return (
   purchased==false?<LoaderComponent> </LoaderComponent> :
    <div style={{margin:'5px'}}>



<div style={{paddingTop:'10px'}}>
      <h5 style={{ alignItems: "center", margin: "5px", textAlign: "center" }}>
        Time Left : {getTimeFormat()}
      </h5>
      </div>

      {questionsId.map((qid) => (
        <QuestionCard
          numbering={++numbering}
          key={qid}
          question={allQuestions[qid].question}
          options={allQuestions[qid].options}
          qid={qid}
        />
      ))}

    <div   className='container text-center'>
      <Button
        onClick={answerSubmit}
        variant="contained"
        color="primary"
        size="large"
        className={classes.button}
        style={{


         textAlign : 'center',
        alignItems  : 'center',
        justify : 'center' }}
        startIcon={<SaveIcon />}
      >
        Submit
      </Button>

    </div>
    </div>

  );
};

export default MCQExam;