35 |
36 | {label}
37 | {required ? * : null}
38 |
39 |
40 |
41 |
62 | startIconOnClick(e)}>
63 | {startIcon}
64 |
65 |
66 | ),
67 | endAdornment: endIcon && (
68 |
69 | endIconOnClick(e)}>
70 | {endIcon}
71 |
72 |
73 | ),
74 | }}
75 | />
76 |
77 | {/* Password */}
78 | {showActionBtn && (
79 |
82 | )}
83 |
84 |
39 |
PREVIEW
40 |
41 | {questions && questions.length > 0 && (
42 |
43 | {questions.map((eachQues, idx) => {
44 | return (
45 | -
46 | {/* ==================== MAIN QUESTION BODY ==================== */}
47 |
48 |
54 |
55 |
{`Marks: ${eachQues.marks}`}
56 |
{`Negative Marks: ${eachQues.negMarks}`}
57 |
58 |
59 | {eachQues.type === 'multipleOptions' && (
60 |
61 | )}
62 |
63 | {eachQues.type === 'mcq' && (
64 |
65 | )}
66 |
67 | {eachQues.type === 'fillInTheBlanks' && }
68 |
69 |
71 | );
72 | })}
73 |
74 | )}
75 |
76 |
77 |
80 |
83 |
84 |
37 | {value === index && (
38 |
39 | {children}
40 |
41 | )}
42 |
43 | );
44 | };
45 |
46 | const a11yProps = (index) => {
47 | return {
48 | id: `vertical-tab-${index}`,
49 | fontWeight: "bold",
50 | };
51 | };
52 |
53 | const Exam_Details = () => {
54 | const history = useHistory();
55 | const location = useLocation();
56 | const classes = useStyles();
57 | const { enqueueSnackbar } = useSnackbar();
58 | const dispatch = useDispatch();
59 | const theme = useTheme();
60 | const examId = location.pathname.split("/")[2];
61 |
62 | const { user } = useSelector((state) => state.auth);
63 | const [value, setValue] = useState(0);
64 | const [examData, setExamData] = useState({});
65 | const [registerStatus, setRegisterStatus] = useState(false);
66 | const [resultDetails, setResultDetails] = useState(null);
67 | const [examScores, setExamScores] = useState(null);
68 | const cleanDescription = DomPurify.sanitize(examData.description);
69 |
70 | // Timer states
71 | const [remainingTime, setRemainingTime] = useState({
72 | days: null,
73 | hours: null,
74 | minutes: null,
75 | seconds: null,
76 | });
77 |
78 | useEffect(() => {
79 | if (!examData?.startTime) return;
80 | const duration = new Date(examData.startTime) - Date.now();
81 | if (duration < 0) {
82 | return setRemainingTime({ days: 0, hours: 0, minutes: 0, seconds: 0 });
83 | }
84 | const dd = getUnitsFromDuration(duration);
85 | console.log(duration, dd);
86 | setRemainingTime({
87 | days: dd.days,
88 | hours: dd.hours,
89 | minutes: dd.minutes,
90 | seconds: dd.seconds,
91 | });
92 | }, [examData.startTime]);
93 |
94 | useEffect(() => {
95 | if (
96 | remainingTime.days === null ||
97 | remainingTime.hours === null ||
98 | remainingTime.minutes === null ||
99 | remainingTime.seconds === null
100 | ) {
101 | return;
102 | }
103 |
104 | clearInterval(timerInterval);
105 | timerInterval = setInterval(() => {
106 | if (remainingTime.seconds > 0) {
107 | setRemainingTime((t) => ({ ...t, seconds: t.seconds - 1 }));
108 | }
109 | if (remainingTime.seconds === 0) {
110 | if (remainingTime.minutes === 0) {
111 | if (remainingTime.hours === 0) {
112 | if (remainingTime.days === 0) {
113 | // Timer has finished
114 | clearInterval(timerInterval);
115 | } else {
116 | setRemainingTime((t) => ({
117 | ...t,
118 | days: t.days - 1,
119 | hours: 23,
120 | minutes: 59,
121 | seconds: 59,
122 | }));
123 | }
124 | } else {
125 | setRemainingTime((t) => ({
126 | ...t,
127 | hours: t.hours - 1,
128 | minutes: 59,
129 | seconds: 59,
130 | }));
131 | }
132 | } else {
133 | setRemainingTime((t) => ({
134 | ...t,
135 | minutes: t.minutes - 1,
136 | seconds: 59,
137 | }));
138 | }
139 | }
140 | }, 1000);
141 |
142 | return () => {
143 | clearInterval(timerInterval);
144 | };
145 | }, [remainingTime]);
146 |
147 | // -------------------------------------
148 | // FETCH ALL EXAMS DATA
149 | // -------------------------------------
150 | useEffect(async () => {
151 | fetchExamDetails();
152 | checkRegisterStatus();
153 | fetchResult();
154 | fetchScores();
155 | window.scrollTo(0, 0);
156 | }, []);
157 |
158 | const fetchResult = async () => {
159 | try {
160 | const res = await getExamResult(examId);
161 | console.log(res);
162 | if (res.data.data) setResultDetails(res.data.data);
163 | } catch (err) {
164 | // enqueueSnackbar(err.message, { variant: 'error' });
165 | console.error(err);
166 | }
167 | };
168 |
169 | const fetchScores = async () => {
170 | try {
171 | const res = await getExamScores(examId);
172 | setExamScores(res.data.data);
173 | } catch (err) {
174 | // enqueueSnackbar(err.message, { variant: 'error' });
175 | console.error(err);
176 | }
177 | };
178 |
179 | const checkRegisterStatus = async () => {
180 | try {
181 | const res = await getUserExamRegisterStatus(examId);
182 | setRegisterStatus(!!res.data.data.registered);
183 | } catch (err) {
184 | enqueueSnackbar(err.message, { variant: "error" });
185 | }
186 | };
187 |
188 | const fetchExamDetails = async () => {
189 | try {
190 | const res = await getExamDetails(examId);
191 | setExamData(res.data.data);
192 | } catch (err) {
193 | enqueueSnackbar(err.message, { variant: "error" });
194 | }
195 | };
196 |
197 | const handleChange = (event, newValue) => {
198 | setValue(newValue);
199 | };
200 |
201 | const registerUserInExam = async () => {
202 | try {
203 | const res = await registerInExam({ examId });
204 | if (res.status === 200) {
205 | setRegisterStatus(true);
206 | }
207 | } catch (err) {
208 | enqueueSnackbar(err.message, { variant: "error" });
209 | }
210 | };
211 |
212 | const redirectToGiveExam = () => {
213 | history.push(`/exam/${examId}/give`);
214 | };
215 |
216 | const TextPair = ({ heading, value }) => {
217 | return (
218 |
219 |
223 | {heading}
224 |
225 | {value}
226 |
227 | );
228 | };
229 |
230 | const JoinCardText = ({ heading, value }) => {
231 | return (
232 |
233 |
234 |
237 | {heading}:
238 |
239 |
240 |
241 |
242 | {value}
243 |
244 |
245 |
246 | );
247 | };
248 |
249 | const getTypography = (text = "", style = {}) => {
250 | return (
251 |
256 | {text}
257 |
258 | );
259 | };
260 |
261 | const getButton = (text = "", type = "") => {
262 | return (
263 |
293 | );
294 | };
295 |
296 | const JoinRegisterSection = () => {
297 | if (!examData.startTime) return null;
298 | if (
299 | remainingTime.days === null ||
300 | remainingTime.hours === null ||
301 | remainingTime.minutes === null ||
302 | remainingTime.seconds === null
303 | )
304 | return null;
305 | const startTime = new Date(examData.startTime);
306 | const endTime = new Date(+startTime + examData.duration);
307 | const remain = Math.abs(
308 | remainingTime.days * 86400000 -
309 | remainingTime.hours * 3600000 -
310 | remainingTime.minutes * 60000 -
311 | remainingTime.seconds * 1000
312 | );
313 | // If days,hours,minutes,seconds are zeros, then remain = 0, and startTime - remain = 0, so currentTime should be Date.now()
314 | const currentTime = remain === 0 ? Date.now() : +startTime - remain;
315 | if (currentTime < startTime) {
316 | // before exam
317 | if (!user) {
318 | return (
319 | <>
320 | {getTypography("Login to register for exam")}
321 |
322 |
323 | );
324 | } else {
325 | if (!registerStatus) {
326 | return (
327 | <>
328 | {getButton("Register", "register")}
329 |
330 |
331 | );
332 | } else {
333 | return (
334 | <>
335 | {getTypography("You have registered")}
336 |
337 |
338 | );
339 | }
340 | }
341 | } else if (currentTime >= startTime && currentTime < endTime) {
342 | if (!user) {
343 | return getTypography("Login to enter exam");
344 | }
345 | // user has not registered
346 | else if (!registerStatus) {
347 | return getTypography("You have not registered for this exam");
348 | } else {
349 | return getButton("Enter Exam", "start");
350 | }
351 | } else if (currentTime >= endTime) {
352 | // after exam
353 | return getTypography("Exam has ended", {
354 | color: "crimson",
355 | fontWeight: "900",
356 | });
357 | }
358 | };
359 |
360 | const CountdownTimer = () => {
361 | return (
362 |
363 | {`${remainingTime.days} days ${remainingTime.hours} hours ${remainingTime.minutes} minutes ${remainingTime.seconds} seconds`}
364 |
365 | );
366 | };
367 |
368 | const getExamDurationFormatted = () => {
369 | if (!examData.duration) return null;
370 | const { days, hours, minutes, seconds } = getUnitsFromDuration(
371 | examData.duration
372 | );
373 | let duration = "";
374 | if (days > 0) {
375 | duration += days === 1 ? `${days} day ` : `${days} days `;
376 | }
377 | if (hours > 0) {
378 | duration += hours === 1 ? `${hours} hour ` : `${hours} hours `;
379 | }
380 | if (minutes > 0) {
381 | duration += minutes === 1 ? `${minutes} minute ` : `${minutes} minutes `;
382 | }
383 | if (seconds > 0) {
384 | duration += seconds === 1 ? `${seconds} second ` : `${seconds} seconds `;
385 | }
386 | return duration;
387 | };
388 |
389 | return (
390 | <>
391 | {/* ----------- Banner ----------- */}
392 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |
408 |
409 | {examData.name !== null ? examData.name : "-"}
410 |
411 |
412 | {" "}
413 | Author : {examData.user?.name}
414 |
415 |
416 |
417 |
418 | {/*-------------------------------------------------- */}
419 | {/* INFORMATION */}
420 | {/*-------------------------------------------------- */}
421 |
422 |
426 |
430 |
434 |
442 |
443 |
444 | {/*-------------------------------------------------- */}
445 | {/* EXAM TIME DISPLAY CARD */}
446 | {/*-------------------------------------------------- */}
447 |
448 |
452 |
453 |
461 |
462 |
466 |
467 |
468 | {/* Timer Part */}
469 |
470 |
471 |
472 |
473 |
478 |
484 |
489 |
495 |
501 |
506 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 | FAQ's
527 |
528 |
529 |
530 | Discussions
531 |
532 |
26 | {resultDetails.map((ques, idx) => {
27 | return (
28 | -
29 | {/* ==================== MAIN QUESTION BODY ==================== */}
30 |
31 |
37 |
38 |
39 | {ques.type === 'multipleOptions' && (
40 |
41 | )}
42 |
43 | {ques.type === 'mcq' && (
44 |
45 | )}
46 |
47 | {ques.type === 'fillInTheBlanks' && (
48 |
49 | )}
50 |
51 |
53 | );
54 | })}
55 |
56 | )}
57 |
58 | );
59 | };
60 |
61 | export default Result;
62 |
--------------------------------------------------------------------------------
/src/pages/exam-details/tab-content/scores.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import { showConfirmation } from 'redux/slices/confirmation-dialog';
4 | import { useHistory } from 'react-router-dom';
5 | import { useSnackbar } from 'notistack';
6 | import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Card, CardContent, Box, Typography } from '@mui/material';
7 | import { makeStyles, useTheme } from '@mui/styles';
8 | import commonStyle from '../../../common-style';
9 | import crown from '../../../assets/icons/crown.png';
10 |
11 | const useStyles = makeStyles((theme) => ({
12 | card: {
13 | marginBottom: '2rem',
14 | paddingBottom: '2rem',
15 | marginTop: '2.6rem',
16 | textAlign: 'center',
17 | },
18 | }));
19 |
20 | const Scores = (props) => {
21 | const { examScoresDetails } = props;
22 | const dispatch = useDispatch();
23 | const classes = useStyles();
24 | const classes2 = commonStyle();
25 | const history = useHistory();
26 | const theme = useTheme();
27 | const { enqueueSnackbar, closeSnackbar } = useSnackbar();
28 |
29 | console.log(examScoresDetails);
30 |
31 | if (!examScoresDetails) return null;
32 |
33 | return (
34 | <>
35 | SCORES
36 |
37 | {/*
38 |
54 |
55 |
56 |
57 |
*/}
58 |
59 |
60 |
61 |
62 |
63 |
64 | Your Score
65 |
66 |
67 |
68 |
69 | COMPLETED AT
70 |
71 | {new Date(examScoresDetails.finishTime).toDateString()} , {new Date(examScoresDetails.finishTime).toLocaleTimeString()}
72 |
73 |
74 |
75 |
76 | RANK
77 |
78 | {examScoresDetails.rank !== null ? ` Position ${examScoresDetails.rank}` : '-'}
79 |
80 |
81 |
82 |
83 | SCORE ACHIEVED
84 |
85 | {examScoresDetails.totalScore !== null ? examScoresDetails.totalScore : '-'}
86 |
87 |
88 |
89 |
90 |
91 |
92 |
96 | Top 5 Performers
97 |
98 |
99 |
100 |
101 |
102 |
103 | Rank
104 | Name
105 | Achieved Score
106 | Completed At
107 |
108 |
109 |
110 |
111 | {examScoresDetails.topPerformers &&
112 | examScoresDetails.topPerformers.map((user) => (
113 |
117 | {user.rank}
118 | {user.name}
119 | {user.totalScore}
120 |
121 | {' '}
122 | {new Date(user.finishTime).toDateString()} , {new Date(user.finishTime).toLocaleTimeString()}{' '}
123 |
124 |
125 | ))}
126 |
127 |
128 |
129 |
130 | );
131 | };
132 |
133 | export default Scores;
134 |
--------------------------------------------------------------------------------
/src/pages/give-exam/index.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useRef } from 'react';
2 | import { Container, Typography, Button, Paper, Grid } from '@mui/material';
3 | import { useLocation, useHistory } from 'react-router-dom';
4 | import { submitExamAnswers, startExam } from 'api/exam';
5 | import Page1 from './page1';
6 | import Page2 from './page2';
7 | import RequestFullScreen from 'layouts/request-full-screen';
8 | import { getUnitsFromDuration } from 'utilities/functions';
9 | import { useSnackbar } from 'notistack';
10 |
11 | let timerInterval;
12 |
13 | const GiveExam = () => {
14 | const location = useLocation();
15 | const history = useHistory();
16 | const { enqueueSnackbar } = useSnackbar();
17 | const examId = location.pathname.split('/')[2];
18 | const [examData, setExamData] = useState({});
19 | const [answer, setAnswer] = useState({});
20 | const [questionsStatus, setQuestionsStatus] = useState({});
21 | const [page, setPage] = useState(1);
22 | const [isFullScreen, setIsFullScreen] = useState(false);
23 | const documentElement = document.documentElement;
24 | const [remainingTime, setRemainingTime] = useState({
25 | days: null,
26 | hours: null,
27 | minutes: null,
28 | seconds: null,
29 | });
30 |
31 | const questions = examData.questions || [];
32 |
33 | useEffect(() => {
34 | EnterFullScreen();
35 | documentElement.addEventListener('fullscreenchange', () => {
36 | if (document.fullscreenElement) setIsFullScreen(true);
37 | else setIsFullScreen(false);
38 | });
39 | getExamData();
40 | }, []);
41 |
42 | useEffect(() => {
43 | if (remainingTime.days === null || remainingTime.hours === null || remainingTime.minutes === null || remainingTime.seconds === null) {
44 | return;
45 | }
46 | clearInterval(timerInterval);
47 | timerInterval = setInterval(() => {
48 | if (remainingTime.seconds > 0) {
49 | setRemainingTime((t) => ({ ...t, seconds: t.seconds - 1 }));
50 | }
51 | if (remainingTime.seconds === 0) {
52 | if (remainingTime.minutes === 0) {
53 | if (remainingTime.hours === 0) {
54 | if (remainingTime.days === 0) {
55 | // Timer has finished
56 | clearInterval(timerInterval);
57 | handleEndExam();
58 | } else {
59 | setRemainingTime((t) => ({ ...t, days: t.days - 1, hours: 23, minutes: 59, seconds: 59 }));
60 | }
61 | } else {
62 | setRemainingTime((t) => ({ ...t, hours: t.hours - 1, minutes: 59, seconds: 59 }));
63 | }
64 | } else {
65 | setRemainingTime((t) => ({ ...t, minutes: t.minutes - 1, seconds: 59 }));
66 | }
67 | }
68 | }, 1000);
69 |
70 | return () => {
71 | clearInterval(timerInterval);
72 | };
73 | }, [remainingTime]);
74 |
75 | const EnterFullScreen = () => {
76 | documentElement
77 | .requestFullscreen()
78 | .then(() => console.log('entered full screen'))
79 | .catch((err) => enqueueSnackbar(err.message, { variant: 'error' }));
80 | };
81 |
82 | const ExitFullScreen = () => {
83 | document
84 | .exitFullscreen()
85 | .then(() => console.log('exited full screen'))
86 | .catch((err) => enqueueSnackbar(err.message, { variant: 'error' }));
87 | };
88 |
89 | const getExamData = async () => {
90 | try {
91 | const res = await startExam(examId);
92 | if (res) setExamData(res.data.data);
93 | else console.log('Error occured !', res);
94 | } catch (err) {
95 | enqueueSnackbar(err.message, { variant: 'error' });
96 | history.push(`/exam/${examId}`);
97 | }
98 | };
99 |
100 | const getQuestionFromId = (id) => {
101 | return questions.find((q) => q.id === id);
102 | };
103 |
104 | const getQuestionType = (q) => {
105 | if (q) return q.type;
106 | return '';
107 | };
108 |
109 | const handleQAnswer = (qId, ans) => {
110 | setAnswer((a) => ({ ...a, [qId]: { type: getQuestionType(getQuestionFromId(qId)), answer: ans } }));
111 | };
112 |
113 | const handleQStatus = (qId, status) => {
114 | setQuestionsStatus((qs) => ({ ...qs, [qId]: status }));
115 | };
116 |
117 | const handleEndExam = async () => {
118 | const body = {
119 | examId,
120 | answers: answer,
121 | finishTime: Date.now(),
122 | };
123 | const res = await submitExamAnswers(body);
124 | console.log(res);
125 | ExitFullScreen();
126 | history.push(`/exam/${examId}`);
127 | };
128 |
129 | const handleTimerCountdown = () => {
130 | if (!examData) return;
131 | const endTime = new Date(+examData.startTime + examData.duration);
132 | const dd = getUnitsFromDuration(+endTime - Date.now());
133 | setRemainingTime({ days: dd.days, hours: dd.hours, minutes: dd.minutes, seconds: dd.seconds });
134 | };
135 |
136 | const handleViewQuestions = () => {
137 | setPage((p) => p + 1);
138 | handleTimerCountdown();
139 | };
140 |
141 | return (
142 |
143 | {false && !isFullScreen ? (
144 |
145 | ) : (
146 |
147 | {page === 1 && }
148 | {page === 2 && (
149 |
158 | )}
159 |
160 | )}
161 |
110 | {`Marks: ${3}`}
111 | {`Negative Marks: ${1}`}
112 |
113 |
114 | {/* ==================== MAIN QUESTION BODY ==================== */}
115 |
116 |
117 |
118 | {currentQuestion.type === 'multipleOptions' && (
119 |
125 | )}
126 |
127 | {currentQuestion.type === 'mcq' && (
128 |
134 | )}
135 |
136 | {currentQuestion.type === 'fillInTheBlanks' && (
137 |
138 | )}
139 |
140 |
144 |
151 |
152 |
159 |
160 |
167 |
168 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 | {questions.map((q, i) => (
186 |
199 | ))}
200 |
201 |
202 |
203 |
204 |
205 | );
206 | };
207 |
208 | export default Page2;
209 |
--------------------------------------------------------------------------------
/src/pages/give-exam/question-options/fill-blanks.jsx:
--------------------------------------------------------------------------------
1 | import TextInputField from 'components/text-input-field';
2 |
3 | const FillBlanks = (props) => {
4 | const { questionId, answer, handleQAnswer } = props;
5 |
6 | return (
7 | handleQAnswer(questionId, e.target.value)}
12 | />
13 | );
14 | };
15 |
16 | export default FillBlanks;
17 |
--------------------------------------------------------------------------------
/src/pages/give-exam/question-options/mcq-multiple.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import FormGroup from '@mui/material/FormGroup';
3 | import FormControlLabel from '@mui/material/FormControlLabel';
4 | import Checkbox from '@mui/material/Checkbox';
5 |
6 | const MCQMultiple = (props) => {
7 | const { questionId, options, answer, handleQAnswer } = props;
8 |
9 | const handleOptionChange = (e, optionId) => {
10 | let tmpAns = !answer ? [] : [...answer];
11 | optionId = +optionId;
12 | if (tmpAns.includes(optionId)) tmpAns = tmpAns.filter((o) => o !== optionId);
13 | else tmpAns.push(optionId);
14 | handleQAnswer(questionId, tmpAns);
15 | };
16 |
17 | return (
18 |
19 | {options.map((o) => (
20 | handleOptionChange(e, o.id)}
25 | />
26 | }
27 | label={o.data}
28 | />
29 | ))}
30 |
31 | );
32 | };
33 |
34 | export default MCQMultiple;
35 |
--------------------------------------------------------------------------------
/src/pages/give-exam/question-options/mcq-single.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import Radio from '@mui/material/Radio';
3 | import RadioGroup from '@mui/material/RadioGroup';
4 | import FormControlLabel from '@mui/material/FormControlLabel';
5 | import FormControl from '@mui/material/FormControl';
6 |
7 | const MCQSingle = (props) => {
8 | const { questionId, options, answer, handleQAnswer } = props;
9 |
10 | const handleOptionChange = (e) => {
11 | handleQAnswer(questionId, [+e.target.value]);
12 | };
13 |
14 | return (
15 |
16 | handleOptionChange(e)}>
17 | {options.map((o) => (
18 | } label={o.data} />
19 | ))}
20 |
21 |
22 | );
23 | };
24 |
25 | export default MCQSingle;
26 |
--------------------------------------------------------------------------------
/src/pages/home/arrows.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useTheme } from '@emotion/react';
3 |
4 | import { VisibilityContext } from 'react-horizontal-scrolling-menu';
5 | import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
6 | import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
7 | import { Box, Card, CardContent, Button, Typography } from '@mui/material';
8 |
9 | function Arrow({ children, disabled, onClick }) {
10 | const theme = useTheme();
11 | return (
12 |
27 | {children}
28 |
29 | );
30 | }
31 |
32 | export function LeftArrow() {
33 | const {
34 | isFirstItemVisible,
35 | scrollPrev,
36 | visibleItemsWithoutSeparators,
37 | initComplete,
38 | } = React.useContext(VisibilityContext);
39 |
40 | const [disabled, setDisabled] = React.useState(
41 | !initComplete || (initComplete && isFirstItemVisible)
42 | );
43 | React.useEffect(() => {
44 | // NOTE: detect if whole component visible
45 | if (visibleItemsWithoutSeparators.length) {
46 | setDisabled(isFirstItemVisible);
47 | }
48 | }, [isFirstItemVisible, visibleItemsWithoutSeparators]);
49 |
50 | return (
51 | scrollPrev()}>
52 |
65 |
66 |
67 |
68 | );
69 | }
70 |
71 | export function RightArrow() {
72 | const { isLastItemVisible, scrollNext, visibleItemsWithoutSeparators } =
73 | React.useContext(VisibilityContext);
74 |
75 | // console.log({ isLastItemVisible });
76 | const [disabled, setDisabled] = React.useState(
77 | !visibleItemsWithoutSeparators.length && isLastItemVisible
78 | );
79 | React.useEffect(() => {
80 | if (visibleItemsWithoutSeparators.length) {
81 | setDisabled(isLastItemVisible);
82 | }
83 | }, [isLastItemVisible, visibleItemsWithoutSeparators]);
84 |
85 | return (
86 | scrollNext()}>
87 |
100 |
101 |
102 |
103 | );
104 | }
105 |
--------------------------------------------------------------------------------
/src/pages/home/exams-horizontal-scroll-section.jsx:
--------------------------------------------------------------------------------
1 | import { LeftArrow, RightArrow } from './arrows';
2 | import { useState } from 'react';
3 | import ExamDetailsCard2 from 'components/exam-details-card2';
4 | import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
5 | import { Box, Card, CardContent, Button, Typography } from '@mui/material';
6 |
7 | const ExamsHorizontalScrollSection = ({ allData }) => {
8 | //swipable states===============================
9 |
10 | const elemPrefix = 'test';
11 | const getId = (index) => `${elemPrefix}${index}`;
12 |
13 | const getItems = () => {
14 | return allData.map((data, id) => {
15 | data[id] = id;
16 | return data;
17 | });
18 | };
19 |
20 | const [items, setItems] = useState(getItems);
21 | const [selected, setSelected] = useState([]);
22 | const [position, setPosition] = useState(0);
23 |
24 | const isItemSelected = (id) => !!selected.find((el) => el === id);
25 |
26 | const handleClick =
27 | (id) =>
28 | ({ getItemById, scrollToItem }) => {
29 | const itemSelected = isItemSelected(id);
30 |
31 | setSelected((currentSelected) =>
32 | itemSelected
33 | ? currentSelected.filter((el) => el !== id)
34 | : currentSelected.concat(id)
35 | );
36 | };
37 | //==============================================
38 |
39 | const [showFilters, setShowFilters] = useState(false);
40 | const [selectedFilters, setSelectedFilters] = useState({
41 | startDate: null,
42 | examVisibility: null,
43 | examStatus: null,
44 | });
45 |
46 | const handleFilterChange = (e) =>
47 | setSelectedFilters((f) => ({ ...f, [e.target.name]: e.target.value }));
48 | const hideFilters = () => setShowFilters(false);
49 |
50 | return (
51 | }
63 | RightArrow={}
64 | onWheel={onWheel}
65 | >
66 | {/* array.map(() => {}) */}
67 | {allData &&
68 | allData.map((Obj, id) => (
69 |
86 | ))}
87 |
88 | );
89 | };
90 |
91 | function onWheel(apiObj, ev) {
92 | console.log(apiObj, 'sss', ev);
93 | const isThouchpad = Math.abs(ev.deltaX) !== 0 || Math.abs(ev.deltaY) < 15;
94 |
95 | if (isThouchpad) {
96 | ev.stopPropagation();
97 | return;
98 | }
99 |
100 | if (ev.deltaY < 0) {
101 | apiObj.scrollNext();
102 | } else if (ev.deltaY > 0) {
103 | apiObj.scrollPrev();
104 | }
105 | }
106 |
107 | export default ExamsHorizontalScrollSection;
108 |
--------------------------------------------------------------------------------
/src/pages/home/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { useTheme } from '@emotion/react';
3 | import { Container } from '@mui/material';
4 | import { Box, Button } from '@mui/material';
5 | import useStyles from './styles';
6 | import { getExams } from 'api/exam';
7 | import Carousel from 'components/carousel';
8 | import announcementWhite from 'assets/icons/announcementWhite.png';
9 | import announcementBlack from 'assets/icons/announcementBlack.png';
10 | import { useSnackbar } from 'notistack';
11 | import ExamsHorizontalScroll from './exams-horizontal-scroll-section';
12 |
13 | const examVisibilities = [
14 | { label: 'Public', value: 'public' },
15 | { label: 'Private', value: 'private' },
16 | ];
17 |
18 | const examStatuses = ['Scheduled', 'Ongoing', 'Finished'];
19 |
20 | const Home = () => {
21 | const [fetchAllExam, setFetchAllExam] = useState([]);
22 | const theme = useTheme();
23 | const classes = useStyles();
24 | const { enqueueSnackbar } = useSnackbar();
25 |
26 | // -------------------------------------
27 | // FETCH ALL EXAMS DATA
28 | // -------------------------------------
29 | useEffect(async () => {
30 | try {
31 | const res = await getExams({});
32 | console.log('ALL EXAMS : ', res);
33 | setFetchAllExam(res.data.data);
34 | } catch (err) {
35 | enqueueSnackbar(err.message, { variant: 'error' });
36 | }
37 | }, []);
38 |
39 | return (
40 |
41 | {/* ------------- CAROUSAL PART -------------------- */}
42 |
45 |
46 | {/* ------------- SECOND PART -------------------- */}
47 |
48 | Events and Contests
49 |
50 |
51 |
52 | {/* ------------- THIRD PART -------------------- */}
53 |
54 | More Exams
55 |
56 |
57 |
58 |
59 | {/* ------------------- LAST ANNOUNCEMENT SECTION ------------------- */}
60 |
61 |
62 | Announcements
63 | {new Array(3).fill(0).map((announcement) => (
64 |
65 |
71 |
{' '}
79 |
New Exam
80 |
{new Date().toDateString()}
81 |
82 |
83 | Registrations for the 1st stages of the Indian Computing
84 | Olympiad 2022 - ZIO (Zonal Informatics Olympiad) & ZCO (Zonal
85 | Computing Olympiad) are ongoing.
86 |
87 |
88 |
89 |
90 |
94 |
9 | {value === index && (
10 |
11 | {children}
12 |
13 | )}
14 |
15 | );
16 | };
17 |
18 | const a11yProps = (index) => {
19 | return {
20 | id: `profile-tab-${index}`,
21 | };
22 | };
23 |
24 | // const tabs = ['Performance', 'Exams Hosted', 'Exams Given'];
25 | const tabs = ['Exams Hosted', 'Exams Given'];
26 |
27 | const Details = () => {
28 | const [currentTab, setCurrentTab] = useState(0);
29 |
30 | const handleTabChange = (event, newValue) => setCurrentTab(newValue);
31 |
32 | return (
33 | <>
34 |
35 |
36 |
37 | {tabs.map((x, i) => (
38 |
39 | ))}
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | );
51 | };
52 |
53 | export default Details;
54 |
--------------------------------------------------------------------------------
/src/pages/profile/exams-list.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import {
3 | Box,
4 | Card,
5 | CardActions,
6 | CardContent,
7 | Button,
8 | Typography,
9 | Paper,
10 | Grid,
11 | } from '@mui/material';
12 | import { useSnackbar } from 'notistack';
13 | import TextInputField from 'components/text-input-field';
14 | import DatePicker from 'components/date-time-picker/date';
15 | import TimePicker from 'components/date-time-picker/time';
16 | import MultiSelect from 'components/multi-select-dropdown';
17 | import DropdownField from 'components/dropdown-field';
18 | import FilterListIcon from '@mui/icons-material/FilterList';
19 | import {
20 | DialogActions,
21 | DialogContent,
22 | DialogTitle,
23 | Dialog,
24 | } from 'components/dialog';
25 | import ExamDetailsCard from 'components/exam-details-card';
26 | import ExamDetailsCard2 from 'components/exam-details-card2';
27 | import { getHostedExams, getGivenExams } from 'api/user';
28 |
29 | const examVisibilities = [
30 | { label: 'Public', value: 'public' },
31 | { label: 'Private', value: 'private' },
32 | ];
33 |
34 | const examStatuses = ['Scheduled', 'Ongoing', 'Finished'];
35 |
36 | const ExamsList = (props) => {
37 | const { type } = props;
38 | const { enqueueSnackbar } = useSnackbar();
39 | const [showFilters, setShowFilters] = useState(false);
40 | const [selectedFilters, setSelectedFilters] = useState({
41 | startDate: null,
42 | examVisibility: null,
43 | examStatus: null,
44 | });
45 | const [exams, setExams] = useState([]);
46 |
47 | useEffect(() => {
48 | fetchExams();
49 | }, []);
50 |
51 | const fetchExams = async () => {
52 | try {
53 | let res;
54 | if (type === 'hosted') res = await getHostedExams();
55 | if (type === 'given') res = await getGivenExams();
56 | setExams(res.data.data);
57 | } catch (err) {
58 | enqueueSnackbar(err.message, { variant: 'error' });
59 | }
60 | };
61 |
62 | const handleFilterChange = (e) =>
63 | setSelectedFilters((f) => ({ ...f, [e.target.name]: e.target.value }));
64 |
65 | const hideFilters = () => setShowFilters(false);
66 | return (
67 | <>
68 |
121 |
122 | }
126 | endIconOnClick={() => setShowFilters(true)}
127 | />
128 |
135 | {/* {exams.map((exam, i) => (
136 |
144 | ))} */}
145 | {exams.map((exam, i) => (
146 |
152 | ))}
153 |
154 |
155 |
156 | );
157 | };
158 |
159 | export default ExamsList;
160 |
--------------------------------------------------------------------------------
/src/pages/profile/profile-section.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { useHistory, useParams } from 'react-router-dom';
3 | import { useSelector } from 'react-redux';
4 | import { Grid, Typography, Button, Box, TextField, Modal, Container, Paper, Tabs, Tab } from '@mui/material';
5 | import { makeStyles, useTheme } from '@mui/styles';
6 | import { DialogActions, DialogContent, DialogTitle, Dialog } from 'components/dialog';
7 | import TextInputField from 'components/text-input-field';
8 | import CropImageDialog from './crop-image';
9 | import EditIcon from '@mui/icons-material/Edit';
10 | import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled';
11 | import UserIcon from 'assets/icons/user.png';
12 | import Visibility from '@mui/icons-material/Visibility';
13 | import VisibilityOff from '@mui/icons-material/VisibilityOff';
14 |
15 | const useStyles = makeStyles((theme) => ({
16 | name: {
17 | fontSize: '2.5rem',
18 | fontWeight: 600,
19 | color: theme.palette.primary.main,
20 | marginTop: '1rem',
21 | },
22 | title: {
23 | fontWeight: '700',
24 | fontSize: '1.4rem',
25 | },
26 | subTitleKey: {
27 | fontSize: '1.5rem',
28 | fontWeight: 500,
29 | color: theme.palette.primary.main,
30 | },
31 | subTitleValue: {
32 | fontSize: '1.5rem',
33 | fontWeight: 500,
34 | width: '100%',
35 | },
36 | labelSmall: {
37 | fontSize: '1.5rem',
38 | },
39 | profileImage: {
40 | borderRadius: '50%',
41 | width: 150,
42 | height: 150,
43 | },
44 | }));
45 |
46 | const types = ['image/png', 'image/jpeg', 'image/jpg'];
47 |
48 | const Profile = () => {
49 | const classes = useStyles();
50 |
51 | const { user } = useSelector((state) => state.auth);
52 |
53 | const [imageCropped, setimageCropped] = useState(null);
54 | const [fileselect, setfileselect] = useState(null);
55 | const [editDialogOpen, setEditDialogOpen] = useState(false);
56 | const [imageDialogOpen, setImageDialogOpen] = useState(false);
57 | const [showPassword, setShowPassword] = useState(false);
58 |
59 | useEffect(() => {
60 | if (fileselect) setImageDialogOpen(true);
61 | }, [fileselect]);
62 |
63 | const handleClickShowPassword = () => {
64 | setShowPassword((s) => !s);
65 | };
66 |
67 | const handleEditDialogOpen = () => setEditDialogOpen(true);
68 | const handleEditDialogClose = () => setEditDialogOpen(false);
69 |
70 | const handleChange = (e) => {
71 | let selectedFile = e.target.files[0];
72 | setfileselect(URL.createObjectURL(selectedFile));
73 | };
74 |
75 | return (
76 | <>
77 | {/* ----------------------------- EDIT PROFILE MODAL PART ---------------------------------------------- */}
78 |
142 | {/* -------------------------------------------------------------------------------------- */}
143 |
144 |
145 |
154 |
163 |
164 | 
165 |
173 |
176 |
177 |
178 |
179 | {user.name}
180 |
181 |
182 | {user.email}
183 |
184 |
185 |
186 |
187 | Bio:
188 |
189 |
190 | {user.bio}
191 |
192 |
193 | Gender:
194 |
195 |
196 | {user.gender}
197 |
198 |
199 | School/College:
200 |
201 |
202 | {user.institution}
203 |
204 |
205 | Phone:
206 |
207 |
208 | {user.phoneNumber}
209 |
210 |
211 | Date of Birth:
212 |
213 |
214 | {new Date(user.dob)?.toDateString()}
215 |
216 |
217 | Address:
218 |
219 |
220 | {user.address}
221 |
222 |
223 |
224 |
225 |
228 |
229 |
230 |
231 | );
232 | };
233 |
234 | export default Profile;
235 |
--------------------------------------------------------------------------------
/src/redux/slices/auth.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 |
3 | const initialState = {
4 | user: null,
5 | };
6 |
7 | export const authSlice = createSlice({
8 | name: 'auth',
9 | initialState,
10 | reducers: {
11 | setUserAndToken: (state, action) => {
12 | // Redux Toolkit allows us to write "mutating" logic in reducers. It
13 | // doesn't actually mutate the state because it uses the Immer library,
14 | // which detects changes to a "draft state" and produces a brand new
15 | // immutable state based off those changes
16 | if (action.payload.user) state.user = action.payload.user;
17 | if (action.payload.token) localStorage.setItem('AUTH_TOKEN', action.payload.token);
18 | },
19 | clearUserAndToken: (state) => {
20 | state.user = null;
21 | localStorage.removeItem('AUTH_TOKEN');
22 | },
23 | },
24 | });
25 |
26 | // Action creators are generated for each case reducer function
27 | export const { setUserAndToken, clearUserAndToken } = authSlice.actions;
28 |
29 | export default authSlice.reducer;
30 |
--------------------------------------------------------------------------------
/src/redux/slices/confirmation-dialog.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 |
3 | const initialState = {
4 | open: false,
5 | title: '',
6 | content: '',
7 | primaryBtnText: '',
8 | secondaryBtnText: '',
9 | onPrimaryBtnClick: () => {},
10 | onSecondaryBtnClick: () => {},
11 | };
12 |
13 | export const confirmationSlice = createSlice({
14 | name: 'confirmation-dialog',
15 | initialState,
16 | reducers: {
17 | showConfirmation: (state, action) => {
18 | Object.keys(initialState).forEach((key) => (state[key] = action.payload[key] || initialState[key]));
19 | state.open = true;
20 | },
21 | hideConfirmation: (state) => {
22 | state.open = false;
23 | // Object.keys(initialState).forEach((key) => (state[key] = initialState[key])); // Dialog close animation lags
24 | },
25 | },
26 | });
27 |
28 | export const { showConfirmation, hideConfirmation } = confirmationSlice.actions;
29 |
30 | export default confirmationSlice.reducer;
31 |
--------------------------------------------------------------------------------
/src/redux/slices/dialog-visibility.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 |
3 | export const dialogNames = {
4 | login: 'login',
5 | register: 'register',
6 | forgotPassword: 'forgotPassword',
7 | registerReminder: 'registerReminder',
8 | };
9 |
10 | const createInitialState = (namesObj) => {
11 | const obj = {};
12 | Object.values(namesObj).map((val) => {
13 | obj[val] = false;
14 | });
15 | return obj;
16 | };
17 |
18 | export const dialogVisibilitySlice = createSlice({
19 | name: 'dialogVisibility',
20 | initialState: createInitialState(dialogNames),
21 | reducers: {
22 | enableVisibility: (state, action) => {
23 | const key = action.payload;
24 | state[key] = true;
25 | },
26 | hideVisibility: (state, action) => {
27 | const key = action.payload;
28 | state[key] = false;
29 | },
30 | },
31 | });
32 |
33 | // Action creators are generated for each case reducer function
34 | export const { enableVisibility, hideVisibility } = dialogVisibilitySlice.actions;
35 |
36 | export default dialogVisibilitySlice.reducer;
37 |
--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import auth from './slices/auth';
3 | import dialogVisibility from './slices/dialog-visibility';
4 | import confirmationDialog from './slices/confirmation-dialog';
5 | export default configureStore({
6 | reducer: {
7 | auth,
8 | dialogVisibility,
9 | confirmationDialog,
10 | },
11 | middleware: (getDefaultMiddleware) =>
12 | getDefaultMiddleware({
13 | serializableCheck: false,
14 | }),
15 | });
16 |
--------------------------------------------------------------------------------
/src/utilities/functions.js:
--------------------------------------------------------------------------------
1 |
2 | export const csvToJSON = (csv) => {
3 | let lines = csv.split('\n');
4 | let result = [];
5 | let headers = lines[0].split(',');
6 | for (let i = 1; i < lines.length; i++) {
7 | if (!lines[i]) continue;
8 | let obj = {};
9 | let currentline = lines[i].split(',');
10 | for (let j = 0; j < headers.length; j++) {
11 | obj[headers[j].trim()] = currentline[j].trim();
12 | }
13 | result.push(obj);
14 | }
15 | return result;
16 | };
17 |
18 | export const getUnitsFromDuration = (duration) => {
19 | duration = duration / 1000;
20 | const days = Math.floor(duration / 86400);
21 | duration -= days * 86400;
22 | const hours = Math.floor(duration / 3600) % 24;
23 | duration -= hours * 3600;
24 | const minutes = Math.floor(duration / 60) % 60;
25 | duration -= minutes * 60;
26 | const seconds = Math.floor(duration % 60);
27 | return { days, hours, minutes, seconds };
28 | };
29 |
--------------------------------------------------------------------------------
/src/utilities/theme.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | const PRIMARY_COLOR = '#1ab273';
4 | const SECONDARY_COLOR = '#ffd670';
5 |
6 | const getDesignTokens = (mode) => ({
7 | breakpoints: {
8 | values: {
9 | xs: 0,
10 | sm: 480,
11 | md: 768,
12 | lg: 1024,
13 | xl: 1400,
14 | },
15 | },
16 | typography: {
17 | htmlFontSize: 10,
18 | fontFamily: "'Inter', sans-serif",
19 | },
20 | palette: {
21 | mode,
22 | common: {
23 | white: '#ffffff',
24 | black: '#000000',
25 | },
26 | ...(mode === 'light'
27 | ? {
28 | primary: {
29 | main: PRIMARY_COLOR,
30 | contrastText: '#fff',
31 | grey: '#bab5b5',
32 | },
33 | text: {
34 | primary: '#000',
35 | secondary: '#555',
36 | },
37 | divider: PRIMARY_COLOR,
38 | background: {
39 | default: '#fff',
40 | },
41 | }
42 |
43 | :
44 |
45 | {
46 | primary: {
47 | main: SECONDARY_COLOR,
48 | contrastText: '#000',
49 | grey: '#bab5b5',
50 | },
51 | text: {
52 | primary: '#fff',
53 | secondary: '#ddd',
54 | },
55 | divider: SECONDARY_COLOR,
56 | background: {
57 | default: '#111',
58 | paper: '#111',
59 | },
60 | }),
61 | },
62 | });
63 |
64 |
65 | export default getDesignTokens;
66 |
--------------------------------------------------------------------------------