Disabled the Play Again for admins

This commit is contained in:
Tiago Ribeiro
2024-05-07 08:37:09 +01:00
parent 3128fea8c9
commit 8fc2cf571e

View File

@@ -1,333 +1,261 @@
import Button from "@/components/Low/Button"; import Button from "@/components/Low/Button";
import ModuleTitle from "@/components/Medium/ModuleTitle"; import ModuleTitle from "@/components/Medium/ModuleTitle";
import { moduleResultText } from "@/constants/ielts"; import {moduleResultText} from "@/constants/ielts";
import { Module } from "@/interfaces"; import {Module} from "@/interfaces";
import { User } from "@/interfaces/user"; import {User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore"; import useExamStore from "@/stores/examStore";
import { calculateBandScore } from "@/utils/score"; import {calculateBandScore} from "@/utils/score";
import clsx from "clsx"; import clsx from "clsx";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import {useRouter} from "next/router";
import { Fragment, useEffect, useState } from "react"; import {Fragment, useEffect, useState} from "react";
import { import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
BsArrowCounterclockwise, import {LevelScore} from "@/constants/ielts";
BsBook, import {getLevelScore} from "@/utils/score";
BsClipboard, import {capitalize} from "lodash";
BsEyeFill,
BsHeadphones,
BsMegaphone,
BsPen,
BsShareFill,
} from "react-icons/bs";
import { LevelScore } from "@/constants/ielts";
import { getLevelScore } from "@/utils/score";
import { capitalize } from "lodash";
interface Score { interface Score {
module: Module; module: Module;
correct: number; correct: number;
total: number; total: number;
missing: number; missing: number;
} }
interface Props { interface Props {
user: User; user: User;
modules: Module[]; modules: Module[];
scores: Score[]; scores: Score[];
isLoading: boolean; isLoading: boolean;
onViewResults: (moduleIndex?: number) => void; onViewResults: (moduleIndex?: number) => void;
} }
export default function Finish({ export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
user, const [selectedModule, setSelectedModule] = useState(modules[0]);
scores, const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
modules,
isLoading,
onViewResults,
}: Props) {
const [selectedModule, setSelectedModule] = useState(modules[0]);
const [selectedScore, setSelectedScore] = useState<Score>(
scores.find((x) => x.module === modules[0])!,
);
const exams = useExamStore((state) => state.exams); const exams = useExamStore((state) => state.exams);
useEffect( useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
() => setSelectedScore(scores.find((x) => x.module === selectedModule)!),
[scores, selectedModule],
);
const moduleColors: { [key in Module]: { progress: string; inner: string } } = const moduleColors: {[key in Module]: {progress: string; inner: string}} = {
{ reading: {
reading: { progress: "text-ielts-reading",
progress: "text-ielts-reading", inner: "bg-ielts-reading-light",
inner: "bg-ielts-reading-light", },
}, listening: {
listening: { progress: "text-ielts-listening",
progress: "text-ielts-listening", inner: "bg-ielts-listening-light",
inner: "bg-ielts-listening-light", },
}, writing: {
writing: { progress: "text-ielts-writing",
progress: "text-ielts-writing", inner: "bg-ielts-writing-light",
inner: "bg-ielts-writing-light", },
}, speaking: {
speaking: { progress: "text-ielts-speaking",
progress: "text-ielts-speaking", inner: "bg-ielts-speaking-light",
inner: "bg-ielts-speaking-light", },
}, level: {
level: { progress: "text-ielts-level",
progress: "text-ielts-level", inner: "bg-ielts-level-light",
inner: "bg-ielts-level-light", },
}, };
};
const getTotalExercises = () => { const getTotalExercises = () => {
const exam = exams.find((x) => x.module === selectedModule)!; const exam = exams.find((x) => x.module === selectedModule)!;
if (exam.module === "reading" || exam.module === "listening") { if (exam.module === "reading" || exam.module === "listening") {
return exam.parts.flatMap((x) => x.exercises).length; return exam.parts.flatMap((x) => x.exercises).length;
} }
return exam.exercises.length; return exam.exercises.length;
}; };
const bandScore: number = calculateBandScore( const bandScore: number = calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus);
selectedScore.correct,
selectedScore.total,
selectedModule,
user.focus,
);
const showLevel = (level: number) => { const showLevel = (level: number) => {
if (selectedModule === "level") { if (selectedModule === "level") {
const [levelStr, grade] = getLevelScore(level); const [levelStr, grade] = getLevelScore(level);
return ( return (
<div className="flex flex-col items-center justify-center gap-1"> <div className="flex flex-col items-center justify-center gap-1">
<span className="text-xl font-bold">{levelStr}</span> <span className="text-xl font-bold">{levelStr}</span>
</div> </div>
); );
} }
return <span className="text-3xl font-bold">{level}</span>; return <span className="text-3xl font-bold">{level}</span>;
}; };
return ( return (
<> <>
<div className="flex h-fit min-h-full w-full flex-col items-center justify-between gap-8"> <div className="flex h-fit min-h-full w-full flex-col items-center justify-between gap-8">
<ModuleTitle <ModuleTitle
module={selectedModule} module={selectedModule}
totalExercises={getTotalExercises()} totalExercises={getTotalExercises()}
exerciseIndex={getTotalExercises()} exerciseIndex={getTotalExercises()}
minTimer={exams.find((x) => x.module === selectedModule)!.minTimer} minTimer={exams.find((x) => x.module === selectedModule)!.minTimer}
disableTimer disableTimer
/> />
<div className="flex gap-4 self-start"> <div className="flex gap-4 self-start">
{modules.includes("reading") && ( {modules.includes("reading") && (
<div <div
onClick={() => setSelectedModule("reading")} onClick={() => setSelectedModule("reading")}
className={clsx( className={clsx(
"hover:bg-ielts-reading flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg", "hover:bg-ielts-reading flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "reading" selectedModule === "reading" ? "bg-ielts-reading text-white" : "bg-mti-gray-smoke text-ielts-reading",
? "bg-ielts-reading text-white" )}>
: "bg-mti-gray-smoke text-ielts-reading", <BsBook className="h-6 w-6" />
)} <span className="font-semibold">Reading</span>
> </div>
<BsBook className="h-6 w-6" /> )}
<span className="font-semibold">Reading</span> {modules.includes("listening") && (
</div> <div
)} onClick={() => setSelectedModule("listening")}
{modules.includes("listening") && ( className={clsx(
<div "hover:bg-ielts-listening flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
onClick={() => setSelectedModule("listening")} selectedModule === "listening" ? "bg-ielts-listening text-white" : "bg-mti-gray-smoke text-ielts-listening",
className={clsx( )}>
"hover:bg-ielts-listening flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg", <BsHeadphones className="h-6 w-6" />
selectedModule === "listening" <span className="font-semibold">Listening</span>
? "bg-ielts-listening text-white" </div>
: "bg-mti-gray-smoke text-ielts-listening", )}
)} {modules.includes("writing") && (
> <div
<BsHeadphones className="h-6 w-6" /> onClick={() => setSelectedModule("writing")}
<span className="font-semibold">Listening</span> className={clsx(
</div> "hover:bg-ielts-writing flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
)} selectedModule === "writing" ? "bg-ielts-writing text-white" : "bg-mti-gray-smoke text-ielts-writing",
{modules.includes("writing") && ( )}>
<div <BsPen className="h-6 w-6" />
onClick={() => setSelectedModule("writing")} <span className="font-semibold">Writing</span>
className={clsx( </div>
"hover:bg-ielts-writing flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg", )}
selectedModule === "writing" {modules.includes("speaking") && (
? "bg-ielts-writing text-white" <div
: "bg-mti-gray-smoke text-ielts-writing", onClick={() => setSelectedModule("speaking")}
)} className={clsx(
> "hover:bg-ielts-speaking flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
<BsPen className="h-6 w-6" /> selectedModule === "speaking" ? "bg-ielts-speaking text-white" : "bg-mti-gray-smoke text-ielts-speaking",
<span className="font-semibold">Writing</span> )}>
</div> <BsMegaphone className="h-6 w-6" />
)} <span className="font-semibold">Speaking</span>
{modules.includes("speaking") && ( </div>
<div )}
onClick={() => setSelectedModule("speaking")} {modules.includes("level") && (
className={clsx( <div
"hover:bg-ielts-speaking flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg", onClick={() => setSelectedModule("level")}
selectedModule === "speaking" className={clsx(
? "bg-ielts-speaking text-white" "hover:bg-ielts-level flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
: "bg-mti-gray-smoke text-ielts-speaking", selectedModule === "level" ? "bg-ielts-level text-white" : "bg-mti-gray-smoke text-ielts-level",
)} )}>
> <BsClipboard className="h-6 w-6" />
<BsMegaphone className="h-6 w-6" /> <span className="font-semibold">Level</span>
<span className="font-semibold">Speaking</span> </div>
</div> )}
)} </div>
{modules.includes("level") && ( {isLoading && (
<div <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
onClick={() => setSelectedModule("level")} <span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
className={clsx( <span className={clsx("text-center text-2xl font-bold", moduleColors[selectedModule].progress)}>
"hover:bg-ielts-level flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg", Evaluating your answers, please be patient...
selectedModule === "level" <br />
? "bg-ielts-level text-white" You can also check it later on your records page!
: "bg-mti-gray-smoke text-ielts-level", </span>
)} </div>
> )}
<BsClipboard className="h-6 w-6" /> {!isLoading && (
<span className="font-semibold">Level</span> <div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
</div> <span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
)} <div className="flex gap-9 px-16">
</div> <div
{isLoading && ( className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12"> style={
<span {
className={clsx( "--value": (selectedScore.correct / selectedScore.total) * 100,
"loading loading-infinity w-32", "--thickness": "12px",
moduleColors[selectedModule].progress, "--size": "13rem",
)} } as any
/> }>
<span <div
className={clsx( className={clsx(
"text-center text-2xl font-bold", "flex h-48 w-48 flex-col items-center justify-center rounded-full",
moduleColors[selectedModule].progress, moduleColors[selectedModule].inner,
)} )}>
> <span className="text-xl">Level</span>
Evaluating your answers, please be patient... {showLevel(bandScore)}
<br /> </div>
You can also check it later on your records page! </div>
</span> {!["writing", "speaking"].includes(selectedModule) ? (
</div> <div className="flex flex-col gap-5 w-28">
)} <div className="flex gap-2">
{!isLoading && ( <div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" />
<div className="mb-20 mt-32 flex w-full items-center justify-between gap-9"> <div className="flex flex-col">
<span className="max-w-3xl"> <span className="text-mti-red-light">
{moduleResultText(selectedModule, bandScore)} {(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
</span> </span>
<div className="flex gap-9 px-16"> <span className="text-lg">Completion</span>
<div </div>
className={clsx( </div>
"radial-progress overflow-hidden", <div className="flex gap-2">
moduleColors[selectedModule].progress, <div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
)} <div className="flex flex-col">
style={ <span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
{ <span className="text-lg">Correct</span>
"--value": </div>
(selectedScore.correct / selectedScore.total) * 100, </div>
"--thickness": "12px", <div className="flex gap-2">
"--size": "13rem", <div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
} as any <div className="flex flex-col">
} <span className="text-mti-rose-light">
> {(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
<div </span>
className={clsx( <span className="text-lg">Wrong</span>
"flex h-48 w-48 flex-col items-center justify-center rounded-full", </div>
moduleColors[selectedModule].inner, </div>
)} </div>
> ) : (
<span className="text-xl">Level</span> <div className="w-28 h-full" />
{showLevel(bandScore)} )}
</div> </div>
</div> </div>
{!["writing", "speaking"].includes(selectedModule) ? ( )}
<div className="flex flex-col gap-5 w-28"> </div>
<div className="flex gap-2">
<div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" />
<div className="flex flex-col">
<span className="text-mti-red-light">
{(
((selectedScore.total - selectedScore.missing) /
selectedScore.total) *
100
).toFixed(0)}
%
</span>
<span className="text-lg">Completion</span>
</div>
</div>
<div className="flex gap-2">
<div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
<div className="flex flex-col">
<span className="text-mti-purple-light">
{selectedScore.correct.toString().padStart(2, "0")}
</span>
<span className="text-lg">Correct</span>
</div>
</div>
<div className="flex gap-2">
<div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
<div className="flex flex-col">
<span className="text-mti-rose-light">
{(selectedScore.total - selectedScore.correct)
.toString()
.padStart(2, "0")}
</span>
<span className="text-lg">Wrong</span>
</div>
</div>
</div>
) : (
<div className="w-28 h-full" />
)}
</div>
</div>
)}
</div>
{!isLoading && ( {!isLoading && (
<div className="absolute bottom-8 left-0 flex w-full justify-between gap-8 self-end px-8"> <div className="absolute bottom-8 left-0 flex w-full justify-between gap-8 self-end px-8">
<div className="flex gap-8"> <div className="flex gap-8">
<div className="flex w-fit cursor-pointer flex-col items-center gap-1"> <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
<button <button
onClick={() => window.location.reload()} onClick={() => window.location.reload()}
className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out" disabled={user.type === "admin"}
> className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
<BsArrowCounterclockwise className="h-7 w-7 text-white" /> <BsArrowCounterclockwise className="h-7 w-7 text-white" />
</button> </button>
<span>Play Again</span> <span>Play Again</span>
</div> </div>
<div className="flex w-fit cursor-pointer flex-col items-center gap-1"> <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
<button <button
onClick={() => onViewResults()} onClick={() => onViewResults()}
className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out" className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
> <BsEyeFill className="h-7 w-7 text-white" />
<BsEyeFill className="h-7 w-7 text-white" /> </button>
</button> <span>Review All</span>
<span>Review All</span> </div>
</div> <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
<div className="flex w-fit cursor-pointer flex-col items-center gap-1"> <button
<button onClick={() => onViewResults(modules.findIndex((x) => x === selectedModule))}
onClick={() => className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
onViewResults(modules.findIndex((x) => x === selectedModule)) <BsEyeFill className="h-7 w-7 text-white" />
} </button>
className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out" <span>Review {capitalize(selectedModule)}</span>
> </div>
<BsEyeFill className="h-7 w-7 text-white" /> </div>
</button>
<span>Review {capitalize(selectedModule)}</span>
</div>
</div>
<Link href="/" className="w-full max-w-[200px] self-end"> <Link href="/" className="w-full max-w-[200px] self-end">
<Button color="purple" className="w-full max-w-[200px] self-end"> <Button color="purple" className="w-full max-w-[200px] self-end">
Dashboard Dashboard
</Button> </Button>
</Link> </Link>
</div> </div>
)} )}
</> </>
); );
} }