API tools faq
paste
Advertisement
Fahim_7861

exam details

Fahim_7861
Aug 8th, 2021
35
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.68 KB | None | 0 0
raw download clone embed print report
  1. import React, { memo, useEffect, useRef, useState } from "react";
  2. import { useDispatch, useSelector } from "react-redux";
  3. import { Redirect, useHistory, useParams } from "react-router";
  4. import swal from "sweetalert";
  5. import {
  6. answersheet,
  7. archieved,
  8. examStandings,
  9. Need_StartTimer,
  10. NOT_PARTICIPATE,
  11. RUNNING,
  12. running,
  13. SHOWMODAL,
  14. upcoming,
  15. } from "../../constants/constants";
  16. import purchaseExamAction from "../../redux/actions/purchaseExamAction";
  17. import { mcqExam, resultDetails } from "../../urls";
  18. import "./ExamDetails.css";
  19. import runningState from "../../assets/images/running.png";
  20. import examinee from "../../assets/images/examinee.png";
  21. import coins from "../../assets/images/coins.png";
  22. import score from "../../assets/images/score.png";
  23. import clock from "../../assets/images/clock.png";
  24. import grade from "../../assets/images/grade.png";
  25. import solution from "../../assets/images/solution.png";
  26. import rank from "../../assets/images/rank.png";
  27. import document from "../../assets/images/document.png";
  28. import { BiLogInCircle } from "react-icons/bi";
  29. import LoaderComponent from "../../Components/LoaderComponent/LoaderComponent";
  30. import { getTimeFormat } from "../../utils/getTimeFormat";
  31. import archiveDateicon from "../../assets/images/archiveDateicon.png";
  32. import schedule from "../../assets/images/schedule.png";
  33. import JoinModal from "../../Components/JoinModal/JoinModal";
  34.  
  35. import {
  36.  
  37. Button,
  38.  
  39. Grid,
  40. makeStyles,
  41. Paper,
  42. Typography,
  43. Snackbar,
  44. useTheme,
  45. useMediaQuery,Card
  46. } from "@material-ui/core";
  47. import VerticalBar from "../../Components/VerticalBar/VerticalBar";
  48. import { mcqAnsActions } from "../../redux/actions/mcqAnsActions";
  49. import { EXAMID } from "../../constants/types";
  50. import { useWindowSize } from "use-window-size-hook";
  51. import userParticipatedExamAction from './../../redux/actions/userParticipatedExamAction';
  52. import { examDetailsAction } from './../../redux/actions/examDetailsAction';
  53.  
  54. const useStyles = makeStyles((theme) => ({
  55. rootBox: {
  56.  
  57. width : "98%",margin : "0px auto",
  58.  
  59. [theme.breakpoints.up('sm')] : {
  60.  
  61. display : "flex",
  62.  
  63.  
  64.  
  65. minHeight : "80vh",
  66. alignItems : "center"
  67.  
  68.  
  69.  
  70. }
  71.  
  72.  
  73.  
  74.  
  75.  
  76. },
  77.  
  78. paperStyleExam : {
  79.  
  80. backgroundColor: "#EDF3FF",
  81. margin: "10px auto",
  82.  
  83. padding: "10px",
  84. width : "95%",
  85.  
  86. [theme.breakpoints.up('sm')] : {
  87. margin: "0px auto",
  88.  
  89. width : "85%",
  90.  
  91.  
  92. flexGrow : 1
  93.  
  94. }
  95. },
  96.  
  97. mainDiv : {
  98.  
  99. width : "100%",margin : "auto",
  100.  
  101.  
  102. [theme.breakpoints.up('sm')] : {
  103.  
  104. width : "45%",
  105. flexGrow : 1,
  106. height : "100%",
  107.  
  108.  
  109.  
  110.  
  111.  
  112. }
  113.  
  114.  
  115. },
  116.  
  117. titleStyle: {
  118. fontSize: 23,
  119. color: "#54595C",
  120. },
  121.  
  122. iconSize1: {
  123. height: "20px",
  124. width: "20px",
  125. },
  126.  
  127. textSize1: {
  128. fontSize: "14px",
  129. padding : "0 2px",
  130.  
  131. fontWeight: "bold",
  132. marginLeft : "1px",
  133. [theme.breakpoints.up('sm')] : {
  134.  
  135. marginLeft : "5px",
  136. }
  137. },
  138. textSize2: {
  139. fontSize: "16px",
  140. padding : "0 2px",
  141.  
  142. fontWeight: "bold",
  143. [theme.breakpoints.up('sm')] : {
  144.  
  145. marginLeft : "5px",
  146.  
  147. }
  148. },
  149. buttonStyle1 : {
  150. backgroundColor: "white",
  151. color: "black",
  152. height: "35px",
  153. width: "95%",
  154. textTransform : 'none'
  155. },
  156. buttonImg1 : {
  157. height: "14px", width: "14px",
  158.  
  159. [theme.breakpoints.up('sm')] : {
  160.  
  161. height: "16px", width: "16px",
  162.  
  163.  
  164.  
  165. }
  166. },
  167. buttontxt1 : {
  168. fontSize: "11.5px", paddingLeft: "2px" ,
  169.  
  170. [theme.breakpoints.up('sm')] : {
  171.  
  172. fontSize: "13px", paddingLeft: "6px" ,
  173.  
  174.  
  175.  
  176. }
  177. },
  178. joinButtonStyle : {
  179. width : '100%',
  180. backgroundColor : "#3F68B3",
  181. color : 'white',
  182. textTransform : 'none'
  183. },
  184. syllabusStyle : {
  185. fontSize: "13px", textAlign : "center",whiteSpace : "pre-wrap",wordBreak : "kepp-all",
  186.  
  187. [theme.breakpoints.up('sm')] : {
  188.  
  189. fontSize : "13px"
  190. }
  191.  
  192.  
  193.  
  194.  
  195. },
  196. ExamDetailCard : {
  197.  
  198. backgroundColor: "#EDF3FF",
  199. margin: "auto",
  200. marginTop: "70px",
  201. padding: "10px",
  202.  
  203.  
  204. },
  205. bottomStyle : {
  206.  
  207. [theme.breakpoints.only('sm')] : {
  208.  
  209. marginBottom : "40px"
  210. }
  211. },
  212. programTitleStyle : {
  213. textAlign : "center",fontSize : "22px",margin : "10px 0px 10px 0px",
  214.  
  215. [theme.breakpoints.up('md')] : {
  216.  
  217. margin : "5px 0px 30px 0px",
  218.  
  219.  
  220. }
  221. },
  222.  
  223. syllabusImage : {
  224. height: "20px", width: "20px" ,
  225.  
  226. // [theme.breakpoints.up('sm')] : {
  227.  
  228. // height: "20px", width: "20px" ,
  229.  
  230.  
  231. // }
  232. },
  233.  
  234. syllabusText : {
  235.  
  236. fontSize: "17px", padding: "0px 5px" ,
  237.  
  238. // [theme.breakpoints.up('sm')] : {
  239.  
  240. // fontSize : '17px'
  241. // }
  242.  
  243.  
  244. }
  245.  
  246. }));
  247.  
  248.  
  249.  
  250.  
  251.  
  252. const ExamDetails = () => {
  253.  
  254.  
  255. let isWeb = false
  256.  
  257. const { width } = useWindowSize();
  258.  
  259. if(width>599)isWeb=true;
  260.  
  261. const classes = useStyles();
  262.  
  263. const [openSnackbar, setOpenSnackbar] = React.useState(false);
  264.  
  265. const vertical= 'bottom', horizontal='center';
  266.  
  267. const handleSnackBarClick = () => {
  268. setOpenSnackbar(true);
  269. };
  270.  
  271. const handleSnackBarClose = () => {
  272. setOpenSnackbar(false);
  273. };
  274.  
  275.  
  276. const [modalState, setModalState] = useState(SHOWMODAL);
  277.  
  278. const [modalIsOpen, setIsOpen] = React.useState(false);
  279.  
  280. const { id, program, examState } = useParams();
  281.  
  282. const {programs,results} = useSelector((state) => state.initData);
  283.  
  284. let programTitle = "";
  285.  
  286. const history = useHistory();
  287.  
  288. const isSignedIn = useSelector((state) => state.auth.isSignedIn);
  289.  
  290. const token = useSelector((state) => state.auth.userId.token);
  291.  
  292. const dispatch = useDispatch();
  293.  
  294. let currentExam;
  295.  
  296.  
  297.  
  298. if(programs!==undefined)
  299. {
  300. const temp = programs.find(pg=> pg.id==program);
  301.  
  302. if(temp!==undefined)
  303. programTitle = temp.title;
  304. }
  305.  
  306.  
  307.  
  308.  
  309. const archievedCurrentExam = useSelector(
  310. (state) => state.archievedData.exams
  311. );
  312.  
  313.  
  314.  
  315. const currentUpcomingRunning = useSelector((state) => state.initData.exams);
  316.  
  317. const userParticipatedExam = useSelector(state=>state.initData.userParticipatedExam);
  318.  
  319. if (currentUpcomingRunning !== undefined)
  320. currentExam = currentUpcomingRunning.filter((ex) => ex.id == id)[0];
  321.  
  322. if (currentExam === undefined && archievedCurrentExam !== undefined)
  323. currentExam = archievedCurrentExam.filter((ex) => ex.id == id)[0];
  324.  
  325. if (currentExam === undefined && userParticipatedExam !== undefined)
  326. currentExam = userParticipatedExam.filter((ex) => ex.id == id)[0];
  327.  
  328.  
  329.  
  330. const getEndTime = () => {
  331. if (currentExam === undefined || currentExam.end_time === undefined)
  332. return new Date().getTime();
  333. else return currentExam.end_time;
  334. };
  335.  
  336. const [timeLeft, setTimeLeft] = useState(
  337. new Date(getEndTime()).getTime() - new Date().getTime()
  338. );
  339. const mounted = useRef(false);
  340.  
  341. useEffect(() => {
  342. mounted.current = true;
  343. return () => (mounted.current = false);
  344. });
  345.  
  346.  
  347.  
  348. useEffect(() => {
  349. if (timeLeft<1) {
  350. return;
  351. }
  352.  
  353.  
  354. }, [timeLeft]);
  355.  
  356.  
  357. let intervalId;
  358.  
  359.  
  360. useEffect(()=>
  361. {
  362.  
  363. if(0<timeLeft && timeLeft<Need_StartTimer && mounted.current){
  364.  
  365.  
  366. intervalId = setInterval(() => {
  367. setTimeLeft(timeLeft=>timeLeft - 1000);
  368.  
  369. }, 1000);
  370.  
  371. }
  372.  
  373.  
  374. return () => clearInterval(intervalId);
  375.  
  376. },[])
  377.  
  378. useEffect(()=>
  379. {
  380. dispatch(examDetailsAction(token,id));
  381.  
  382. },[id])
  383.  
  384.  
  385.  
  386.  
  387.  
  388. if (currentExam === undefined) {
  389. return <LoaderComponent />;
  390. }
  391.  
  392. const routeChange = () => {
  393. // console.log(examState);
  394. if (examState === upcoming) return;
  395.  
  396. else if (examState === running) {
  397.  
  398. // console.log(('2222 ',results[id]));
  399.  
  400.  
  401. if (currentExam.purchased && (results!==undefined && results[id]!==undefined))
  402. handleSnackBarClick()
  403. else {
  404. dispatch(purchaseExamAction(token, { exam: id }));
  405.  
  406.  
  407.  
  408. dispatch(mcqAnsActions(EXAMID, { exam: id }));
  409.  
  410. history.replace(mcqExam(program, id, examState));
  411. }
  412. return;
  413. }
  414.  
  415. else {
  416. if (currentExam.purchased) {
  417. dispatch(mcqAnsActions(EXAMID, { exam: id }));
  418. history.replace(mcqExam(program, id, examState));
  419.  
  420. } else {
  421. dispatch(purchaseExamAction(token, { exam: id }));
  422. dispatch(mcqAnsActions(EXAMID, { exam: id }));
  423.  
  424. history.replace(mcqExam(program, id, examState));
  425. }
  426. }
  427. };
  428.  
  429. if (!isSignedIn) return <Redirect to={"/login"} />;
  430.  
  431. const { state, title, syllabus, total_marks, cost, duration } = currentExam;
  432.  
  433. const type = state;
  434.  
  435. const { total_examinees, standings , passed_examinees} = currentExam.statistics;
  436.  
  437. const ColoredLine = ({ color }) => (
  438. <span
  439. style={{
  440. borderLeft: `3px solid ${color}`,
  441.  
  442. textAlign: "right",
  443. alignItems: "right",
  444. }}
  445. />
  446. );
  447.  
  448.  
  449.  
  450.  
  451.  
  452. let createdDate = new Date(currentExam.end_time);
  453.  
  454. const date = createdDate.getDate();
  455.  
  456. const year = createdDate.getFullYear();
  457.  
  458. const month = createdDate.toLocaleString("default", { month: "long" });
  459.  
  460. const durationConvert = (duration) => {
  461.  
  462. // return '1h 20 Min';
  463. duration /= 60000;
  464.  
  465. if (duration >= 60) {
  466. if (duration % 60)
  467. return `${parseInt(duration / 60)}h ${duration % 60} Min`;
  468.  
  469. return `${parseInt(duration / 60)}h`;
  470. }
  471.  
  472. return `${duration} Min`;
  473. };
  474.  
  475. const TimeShow = (timeleft) => {
  476. if (type == archieved) return false;
  477.  
  478. const minLeft = timeLeft / 60000;
  479.  
  480. if (minLeft <= 2880) return true;
  481.  
  482. return false;
  483. };
  484.  
  485.  
  486.  
  487. function openModal() {
  488. if (examState === running) {
  489.  
  490. // console.log(results[id]);
  491.  
  492. if (currentExam.purchased && (results!==undefined && results[id]!==undefined))
  493. {
  494.  
  495.  
  496. return handleSnackBarClick()
  497. }
  498. }
  499.  
  500. setModalState(SHOWMODAL);
  501.  
  502. setIsOpen(true);
  503. }
  504.  
  505. function closeModal(str) {
  506. if (str === "close") setIsOpen(false);
  507. }
  508.  
  509. function JoinExam() {
  510.  
  511. setIsOpen(false);
  512.  
  513. routeChange();
  514.  
  515. }
  516.  
  517.  
  518.  
  519. const modalCall=(modal)=>
  520. {
  521. setModalState(modal);
  522. setIsOpen(true);
  523.  
  524. }
  525.  
  526. const rankResultSolutionRoute = (path) => {
  527.  
  528. if (examState === upcoming) {
  529.  
  530. setModalState(upcoming);
  531.  
  532. setIsOpen(true);
  533.  
  534. return;
  535. }
  536.  
  537. else if (currentExam === undefined) return;
  538.  
  539. else if(examState===running)
  540. {
  541. if (path === "rankList") {
  542.  
  543. if (currentExam.standing_visibility)
  544. history.push(resultDetails(id, examStandings));
  545.  
  546. else {
  547.  
  548. modalCall(RUNNING);
  549. }
  550. }
  551. else if(path==="result")
  552. {
  553. if (currentExam.purchased && (results!==undefined && results[id]!==undefined))
  554. {
  555. if(currentExam.result_visibility)
  556. history.push(resultDetails(id));
  557.  
  558. else modalCall(RUNNING);
  559.  
  560.  
  561.  
  562.  
  563.  
  564. }
  565. else modalCall(NOT_PARTICIPATE);
  566.  
  567.  
  568.  
  569.  
  570. }
  571. else if(path==="solution")
  572. {
  573. if (currentExam.purchased && (results!==undefined && results[id]!==undefined))
  574. {
  575. if(currentExam.solution_visibility)
  576. history.push(resultDetails(id, answersheet));
  577.  
  578. else{
  579. modalCall(RUNNING);
  580. }
  581.  
  582.  
  583. }
  584. else
  585. {
  586.  
  587. modalCall(NOT_PARTICIPATE);
  588.  
  589. }
  590.  
  591. }
  592.  
  593. }
  594.  
  595. else if(examState===archieved)
  596. {
  597.  
  598. if (path === "rankList")
  599. history.push(resultDetails(id, examStandings));
  600.  
  601.  
  602. else if(currentExam.purchased)
  603. {
  604. if(path==='solution')
  605. history.push(resultDetails(id, answersheet));
  606.  
  607.  
  608.  
  609. else if(path==='result')
  610. modalCall(NOT_PARTICIPATE)
  611. }
  612. else{
  613.  
  614. modalCall(NOT_PARTICIPATE);
  615.  
  616.  
  617. }
  618.  
  619.  
  620.  
  621.  
  622. }
  623.  
  624. return ;
  625.  
  626.  
  627.  
  628.  
  629.  
  630.  
  631.  
  632.  
  633.  
  634.  
  635. };
  636.  
  637.  
  638.  
  639. return (
  640. <div className={classes.rootBox}>
  641.  
  642. <JoinModal
  643. modalState={modalState}
  644. modalIsOpen={modalIsOpen}
  645. JoinExam={JoinExam}
  646. closeModal={closeModal}
  647. />
  648. <div style={{flexGrow : 1}}>
  649.  
  650. { (isWeb && mounted.current) ?
  651. <Typography className ={classes.programTitleStyle}>{programTitle}</Typography> : <></>
  652. }
  653.  
  654. <Grid container >
  655.  
  656. <Grid item xs={12} sm={12} md={6} >
  657.  
  658.  
  659.  
  660. <Paper
  661. className = {classes.paperStyleExam}
  662.  
  663. elevation={1}
  664. >
  665. <Grid container justify="center" alignItems="center">
  666.  
  667.  
  668. <Grid container item xs={12} justify="flex-end" alignItems="center">
  669. <Grid item style={{ padding: "5px" }}>
  670. {type === archieved ? (
  671. <img
  672. style={{ height: "18px", width: "18px" }}
  673. src={archiveDateicon}
  674. alt="" ></img>
  675. ) : type === upcoming ? (
  676. <img
  677. style={{ height: "18px", width: "18px" }}
  678. src={schedule}
  679. alt="" ></img>
  680. ) : (
  681. <img
  682. style={{ height: "18px", width: "18px" }}
  683. src={runningState}
  684. alt="" ></img>
  685. )}
  686. </Grid>
  687.  
  688. <Grid item>
  689. <Grid item style={{ fontWeight: "bold", fontSize: "12px",textAlign: "center", }}>
  690. {state[0].toUpperCase() + state.slice(1)}
  691. </Grid>
  692.  
  693. <Grid
  694. item
  695. style={{
  696. fontSize: "11px",
  697. textAlign: "center",
  698. fontWeight : 'bold',
  699. fontFamily: "Arial, Helvetica, sans-serif",
  700. }}
  701. >
  702. {type === upcoming ? (
  703. TimeShow() ? (
  704. <> {getTimeFormat(timeLeft)} </>
  705. ) : (
  706. <>
  707. {month.substring(0, 3)} {("0" + date).slice(-2)}, {year}
  708. </>
  709. )
  710. ) : type === archieved ? (
  711. <>
  712. {month.substring(0, 3)} {("0" + date).slice(-2)}, {year}
  713. </>
  714. ) : (
  715. <>{getTimeFormat(timeLeft)}</>
  716. )}
  717. </Grid>
  718. </Grid>
  719. </Grid>
  720. </Grid>
  721.  
  722. <Grid container style={{ marginTop: "15px" }}>
  723. <Grid item xs={12}>
  724. <Typography className={classes.titleStyle}>{title}</Typography>
  725. </Grid>
  726. </Grid>
  727.  
  728.  
  729.  
  730. <div
  731.  
  732. style={{ width: "90%", margin: "auto" ,marginTop : '10px',
  733. alignItems : "center",
  734. justifyContent : "center",
  735. display : "flex",
  736. flexWrap : "wrap"
  737. }}
  738. >
  739. <div style={{flexGrow : 1}}>
  740. <div
  741. style={{
  742. display: "flex",
  743. flexWrap: "wrap",
  744. alignItems: "center",
  745. justifyContent: "center",
  746. flexDirection: "row",
  747. textAlign : 'center'
  748.  
  749.  
  750. }}
  751. >
  752. <div style={{ flexGrow: 1}}>
  753. <img className={classes.iconSize1} src={examinee}alt="" ></img>
  754.  
  755. <span className={classes.textSize1}>
  756. {total_examinees || 0}
  757. </span>
  758. </div>
  759. <div style={{ flexGrow: 1 }}>
  760. <ColoredLine color="black"></ColoredLine>
  761. </div>
  762. </div>
  763. </div>
  764.  
  765. <div style={{flexGrow : 1}}>
  766. <div
  767. style={{
  768. display: "flex",
  769. flexWrap: "wrap",
  770. alignItems: "center",
  771. justifyContent: "center",
  772. flexDirection: "row",
  773. textAlign : 'center'
  774. }}
  775. >
  776. <div style={{ flexGrow: 1 }}>
  777. <img className={classes.iconSize1} src={score}alt="" ></img>
  778.  
  779. <span className={classes.textSize1}>
  780. {(total_marks===0 && examState===upcoming) ? " ?" : total_marks}
  781. </span>
  782. </div>
  783. <div style={{ flexGrow: 1 }}>
  784. <ColoredLine color="black"></ColoredLine>
  785. </div>
  786. </div>
  787. </div>
  788.  
  789. <div style={{flexGrow : 1}}>
  790. <div
  791. style={{
  792. display: "flex",
  793. flexWrap: "wrap",
  794. alignItems: "center",
  795. justifyContent: "center",
  796. flexDirection: "row",
  797. textAlign : 'center'
  798.  
  799. }}
  800. >
  801. <div style={{ flexGrow: 1 }}>
  802. <img className={classes.iconSize1} src={clock}alt="" ></img>
  803.  
  804. <span className={classes.textSize1}>
  805.  
  806.  
  807. {(duration===0 && examState===upcoming) ? " ? Min" : durationConvert(duration)}
  808. </span>
  809. </div>
  810.  
  811. </div>
  812. </div>
  813. </div>
  814.  
  815.  
  816.  
  817.  
  818.  
  819. <Grid container
  820. alignItems="center"
  821. justify="center"
  822.  
  823. style={{ width: "85%",margin : 'auto', textAlign : 'center'}} >
  824.  
  825.  
  826. <Grid item xs={4} >
  827.  
  828. <div
  829. style={{
  830. display: "flex",
  831. flexWrap: "wrap",
  832. alignItems: "center",
  833. justifyContent: "center",
  834. textAlign : "center",
  835. flexDirection: "row",
  836. marginTop : "5px"
  837. }}
  838. >
  839. <div style={{ flexGrow: 1}}>
  840. <img className={classes.iconSize1} src={coins}alt="" ></img>
  841.  
  842. <span className={classes.textSize2}>
  843. {cost}
  844. </span>
  845. </div>
  846.  
  847. </div>
  848.  
  849. </Grid>
  850.  
  851. </Grid>
  852.  
  853. <div
  854. style={{
  855. backgroundColor: "white",
  856. maxHeight: "130px",
  857. minHeight : "90px",
  858.  
  859. width : '95%',
  860. marginTop : "15px",
  861. overflow : 'auto',
  862. borderRadius : '10px'
  863. }}
  864. className='container'
  865.  
  866. >
  867. <div
  868. style={{ padding: "7px 0px",textAlign : "center" ,
  869. alignItems : 'center',justifyContent : 'center'}}
  870. className="d-flex justify-content-center"
  871. >
  872. <img
  873. className={classes.syllabusImage}
  874. src={document}
  875. alt="" ></img>
  876.  
  877. <span className={classes.syllabusText}>
  878. Syllabus
  879. </span>
  880. </div>
  881.  
  882. <div className ={classes.syllabusStyle}>
  883.  
  884. {syllabus}
  885. </div>
  886. </div>
  887.  
  888. <div style={{width : '95%',margin : 'auto',textAlign : 'center',marginTop : '10px'}}>
  889.  
  890.  
  891. <Grid container justify='center' alignItems='center' >
  892.  
  893.  
  894. <Grid item xs={4} >
  895. <Button
  896. className={classes.buttonStyle1}
  897. onClick={() => rankResultSolutionRoute("rankList")}
  898. >
  899. <img
  900. className = {classes.buttonImg1}
  901. src={rank}
  902. alt="" ></img>
  903. <span className = {classes.buttontxt1}>
  904. Rank List
  905. </span>
  906. </Button>
  907. </Grid>
  908.  
  909. <Grid item xs={4} >
  910.  
  911.  
  912. <Button
  913. className={classes.buttonStyle1}
  914. onClick={() => rankResultSolutionRoute("result")}
  915. >
  916. <img
  917. className = {classes.buttonImg1}
  918. src={grade}
  919. alt="" ></img>
  920. <span className = {classes.buttontxt1}>
  921. Result
  922. </span>
  923. </Button>
  924.  
  925. </Grid>
  926.  
  927.  
  928. <Grid item xs={4} >
  929.  
  930. <Button
  931.  
  932. className = {classes.buttonStyle1}
  933. onClick={() => rankResultSolutionRoute("solution")}
  934. >
  935. <img
  936. className = {classes.buttonImg1}
  937. src={solution}
  938. alt="" ></img>
  939. <span className={classes.buttontxt1}>
  940. Solution
  941. </span>
  942. </Button>
  943.  
  944. </Grid>
  945.  
  946. </Grid>
  947.  
  948.  
  949. </div>
  950.  
  951.  
  952. <div style={{width : '95%' ,margin : '10px auto'}}>
  953. <Typography style={{fontSize : '13px',color : "#828691"}}>
  954. *Once you click the start you won't be allowed to participate again
  955. </Typography>
  956. </div>
  957.  
  958. { examState !== upcoming && <div style={{width : '95%',margin : '10px auto'}}>
  959.  
  960. <Button variant='contained'
  961.  
  962. className = {classes.joinButtonStyle}
  963.  
  964. onClick={openModal}
  965.  
  966. >
  967.  
  968. <BiLogInCircle size={27} />
  969.  
  970. <span
  971. style={{
  972. paddingLeft: "7px",
  973.  
  974. fontWeight: "1700px",
  975.  
  976. fontSize: "19px",
  977.  
  978. }}
  979. >
  980. Join
  981. </span>
  982.  
  983.  
  984. </Button>
  985.  
  986.  
  987. </div>}
  988.  
  989.  
  990. </Paper>
  991.  
  992. </Grid>
  993.  
  994.  
  995.  
  996. {
  997. (isWeb && mounted.current) ? <Grid item sm={12} md={6} className={classes.bottomStyle} >
  998.  
  999.  
  1000. <VerticalBar total_examinees={total_examinees} passed_examinees={passed_examinees}/>
  1001.  
  1002. </Grid>
  1003.  
  1004. : <></>
  1005. }
  1006. </Grid>
  1007.  
  1008. </div>
  1009.  
  1010.  
  1011. <Snackbar
  1012. autoHideDuration={2000}
  1013. anchorOrigin={{ vertical, horizontal }}
  1014. open={openSnackbar}
  1015. onClose={handleSnackBarClose}
  1016. message="You have already participated in this exam"
  1017. key={vertical + horizontal}
  1018. />
  1019. </div>
  1020.  
  1021.  
  1022. );
  1023. };
  1024.  
  1025. export default ExamDetails;
  1026.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!