exam details

const theme = useTheme();

  const isWeb = useMediaQuery(theme.breakpoints.up("sm"));

  const classes = useStyles();

  const [openSnackbar, setOpenSnackbar] = React.useState(false);

  const [joinClick,setJoinClick] = React.useState(false);

  const    vertical= 'bottom', horizontal='center';

  const handleSnackBarClick =  () => {
    setOpenSnackbar(true);
  };

  const handleSnackBarClose = () => {
    setOpenSnackbar(false);
  };


  const [modalState, setModalState] = useState(SHOWMODAL);

  const [modalIsOpen, setIsOpen] = React.useState(false);

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

  const {programs} =  useSelector((state) => state.initData);

  let programTitle = "";

  const history = useHistory();

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

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

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


  const dispatch = useDispatch();

  let currentExam;



  if(programs!==undefined)
  {
    const temp = programs.find(pg=> pg.id==program);

    if(temp!==undefined)
    programTitle = temp.title;
  }




  const archievedCurrentExam = useSelector(
    (state) => state.archievedData.exams
  );

  const currentUpcomingRunning = useSelector((state) => state.initData.exams);

  if (currentUpcomingRunning !== undefined)
    currentExam = currentUpcomingRunning.filter((ex) => ex.id == id)[0];

  if (currentExam === undefined && archievedCurrentExam !== undefined)
    currentExam = archievedCurrentExam.filter((ex) => ex.id == id)[0];

  const getEndTime = () => {
    if (currentExam === undefined || currentExam.end_time === undefined)
      return new Date().getTime();
    else return currentExam.end_time;
  };

  const [timeLeft, setTimeLeft] = useState(
    new Date(getEndTime()).getTime() - new Date().getTime()
  );

  useEffect(() => {
    if (0>timeLeft) {
      return;
    }



    if(0<timeLeft && timeLeft<Need_StartTimer)

    {
      const intervalId = setInterval(() => {
      console.log(timeLeft,'shojib');
      if(0<timeLeft && timeLeft<Need_StartTimer)
      setTimeLeft(timeLeft - 1000);
    }, 1000);


    return () => clearInterval(intervalId);
  }



  }, [timeLeft]);


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

     if(check && joinClick){

      history.replace(mcqExam(program, id, examState));



     }

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

  },[purchasedExamList.length])


  if (currentExam === undefined) {
    return <LoaderComponent />;
  }

  const routeChange = () => {
    if (examState === upcoming) return;

    else if (examState === running) {
      if (currentExam.purchased)
        handleSnackBarClick()
      else {
        dispatch(purchaseExamAction(token, { exam: id }));



        dispatch(mcqAnsActions(EXAMID, { exam: id }));


      }
      return;
    }
    else
    {
      if (currentExam.purchased) {
        dispatch(mcqAnsActions(EXAMID, { exam: id }));
        history.replace(mcqExam(program, id, examState));

      }
      else {
        dispatch(purchaseExamAction(token, { exam: id }));

        dispatch(mcqAnsActions(EXAMID, { exam: id }));


        }
      }
    }




  // if (!isSignedIn) return <Redirect to={"/login"} />;

  const { state, title, syllabus, total_marks, cost, duration } = currentExam;

  const type = state;

  const { total_examinees, standings , passed_examinees} = currentExam.statistics;

  const ColoredLine = ({ color }) => (
    <span
      style={{
        borderLeft: `3px solid ${color}`,

        textAlign: "right",
        alignItems: "right",
      }}
    />
  );





  let createdDate = new Date(currentExam.end_time);

  const date = createdDate.getDate();

  const year = createdDate.getFullYear();

  const month = createdDate.toLocaleString("default", { month: "long" });

  const durationConvert = (duration) => {

    // return '1h 20 Min';
    duration /= 60000;

    if (duration >= 60) {
      if (duration % 60)
        return `${parseInt(duration / 60)}h ${duration % 60} Min`;

      return `${parseInt(duration / 60)}h`;
    }

    return `${duration} Min`;
  };

  const TimeShow = (timeleft) => {
    if (type == archieved) return false;

    const minLeft = timeLeft / 60000;

    if (minLeft <= 2880) return true;

    return false;
  };



  function openModal() {
    if (examState === running) {

      if (currentExam.purchased)
        {


          return handleSnackBarClick()
        }
    }

    setModalState(SHOWMODAL);

    setIsOpen(true);
  }

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
  }

  function closeModal(str) {
    if (str === "close") setIsOpen(false);
  }

  function JoinExam() {

    setJoinClick(true);

    setIsOpen(false);

    routeChange();


  }



  const modalCall=(modal)=>
  {
    setModalState(modal);
    setIsOpen(true);

  }

  const rankResultSolutionRoute = (path) => {
    console.log(upcoming, examState,path,currentExam);

    if (examState === upcoming) {
      setModalState(upcoming);

      setIsOpen(true);

      return;
    }

    else if (currentExam === undefined) return;

    else if(examState===running)
    {
      if (path === "rankList") {

          if (currentExam.standing_visibility)
          history.push(resultDetails(id, examStandings));

          else {

            modalCall(RUNNING);
          }
     }
        else if(path==="result")
        {
          if(currentExam.purchased)
          {
            if(currentExam.result_visibility)
              history.push(resultDetails(id));

            else  modalCall(RUNNING);





          }
          else modalCall(NOT_PARTICIPATE);




        }
        else if(path==="solution")
        {
          if(currentExam.purchased)
          {
            if(currentExam.solution_visibility)
            history.push(resultDetails(id, answersheet));

            else{
              modalCall(RUNNING);
            }


          }
          else
          {

            modalCall(NOT_PARTICIPATE);

          }

        }

      }

      else if(examState===archieved)
      {

        if (path === "rankList")
        history.push(resultDetails(id, examStandings));


        else if(currentExam.purchased)
        {
               if(path==='solution')
               history.push(resultDetails(id, answersheet));



               else if(path==='result')
               modalCall(NOT_AVAILABLE)
        }
        else{

          modalCall(NOT_PARTICIPATE);


        }




      }

      return ;










  };