Disabled the Play Again for admins

src/exams/Finish.tsx

@@ -9,16 +9,7 @@ import clsx from "clsx";
 import Link from "next/link";
 import {useRouter} from "next/router";
 import {Fragment, useEffect, useState} from "react";
-import {
-  BsArrowCounterclockwise,
-  BsBook,
-  BsClipboard,
-  BsEyeFill,
-  BsHeadphones,
-  BsMegaphone,
-  BsPen,
-  BsShareFill,
-} from "react-icons/bs";
+import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
 import {LevelScore} from "@/constants/ielts";
 import {getLevelScore} from "@/utils/score";
 import {capitalize} from "lodash";
@@ -38,27 +29,15 @@ interface Props {
 	onViewResults: (moduleIndex?: number) => void;
 }
 
-export default function Finish({
-  user,
-  scores,
-  modules,
-  isLoading,
-  onViewResults,
-}: Props) {
+export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
 	const [selectedModule, setSelectedModule] = useState(modules[0]);
-  const [selectedScore, setSelectedScore] = useState<Score>(
-    scores.find((x) => x.module === modules[0])!,
-  );
+	const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
 
 	const exams = useExamStore((state) => state.exams);
 
-  useEffect(
-    () => setSelectedScore(scores.find((x) => x.module === selectedModule)!),
-    [scores, selectedModule],
-  );
+	useEffect(() => 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: {
 			progress: "text-ielts-reading",
 			inner: "bg-ielts-reading-light",
@@ -90,12 +69,7 @@ export default function Finish({
 		return exam.exercises.length;
 	};
 
-  const bandScore: number = calculateBandScore(
-    selectedScore.correct,
-    selectedScore.total,
-    selectedModule,
-    user.focus,
-  );
+	const bandScore: number = calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus);
 
 	const showLevel = (level: number) => {
 		if (selectedModule === "level") {
@@ -126,11 +100,8 @@ export default function Finish({
 							onClick={() => setSelectedModule("reading")}
 							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",
-                selectedModule === "reading"
-                  ? "bg-ielts-reading text-white"
-                  : "bg-mti-gray-smoke text-ielts-reading",
-              )}
-            >
+								selectedModule === "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>
@@ -140,11 +111,8 @@ export default function Finish({
 							onClick={() => setSelectedModule("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",
-                selectedModule === "listening"
-                  ? "bg-ielts-listening text-white"
-                  : "bg-mti-gray-smoke text-ielts-listening",
-              )}
-            >
+								selectedModule === "listening" ? "bg-ielts-listening text-white" : "bg-mti-gray-smoke text-ielts-listening",
+							)}>
 							<BsHeadphones className="h-6 w-6" />
 							<span className="font-semibold">Listening</span>
 						</div>
@@ -154,11 +122,8 @@ export default function Finish({
 							onClick={() => setSelectedModule("writing")}
 							className={clsx(
 								"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",
-              )}
-            >
+								selectedModule === "writing" ? "bg-ielts-writing text-white" : "bg-mti-gray-smoke text-ielts-writing",
+							)}>
 							<BsPen className="h-6 w-6" />
 							<span className="font-semibold">Writing</span>
 						</div>
@@ -168,11 +133,8 @@ export default function Finish({
 							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",
-                selectedModule === "speaking"
-                  ? "bg-ielts-speaking text-white"
-                  : "bg-mti-gray-smoke text-ielts-speaking",
-              )}
-            >
+								selectedModule === "speaking" ? "bg-ielts-speaking text-white" : "bg-mti-gray-smoke text-ielts-speaking",
+							)}>
 							<BsMegaphone className="h-6 w-6" />
 							<span className="font-semibold">Speaking</span>
 						</div>
@@ -182,11 +144,8 @@ export default function Finish({
 							onClick={() => setSelectedModule("level")}
 							className={clsx(
 								"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",
-                selectedModule === "level"
-                  ? "bg-ielts-level text-white"
-                  : "bg-mti-gray-smoke text-ielts-level",
-              )}
-            >
+								selectedModule === "level" ? "bg-ielts-level text-white" : "bg-mti-gray-smoke text-ielts-level",
+							)}>
 							<BsClipboard className="h-6 w-6" />
 							<span className="font-semibold">Level</span>
 						</div>
@@ -194,18 +153,8 @@ export default function Finish({
 				</div>
 				{isLoading && (
 					<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">
-            <span
-              className={clsx(
-                "loading loading-infinity w-32",
-                moduleColors[selectedModule].progress,
-              )}
-            />
-            <span
-              className={clsx(
-                "text-center text-2xl font-bold",
-                moduleColors[selectedModule].progress,
-              )}
-            >
+						<span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
+						<span className={clsx("text-center text-2xl font-bold", moduleColors[selectedModule].progress)}>
 							Evaluating your answers, please be patient...
 							<br />
 							You can also check it later on your records page!
@@ -214,30 +163,22 @@ export default function Finish({
 				)}
 				{!isLoading && (
 					<div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
-            <span className="max-w-3xl">
-              {moduleResultText(selectedModule, bandScore)}
-            </span>
+						<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
 						<div className="flex gap-9 px-16">
 							<div
-                className={clsx(
-                  "radial-progress overflow-hidden",
-                  moduleColors[selectedModule].progress,
-                )}
+								className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
 								style={
 									{
-                    "--value":
-                      (selectedScore.correct / selectedScore.total) * 100,
+										"--value": (selectedScore.correct / selectedScore.total) * 100,
 										"--thickness": "12px",
 										"--size": "13rem",
 									} as any
-                }
-              >
+								}>
 								<div
 									className={clsx(
 										"flex h-48 w-48 flex-col items-center justify-center rounded-full",
 										moduleColors[selectedModule].inner,
-                  )}
-                >
+									)}>
 									<span className="text-xl">Level</span>
 									{showLevel(bandScore)}
 								</div>
@@ -248,12 +189,7 @@ export default function Finish({
 										<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)}
-                        %
+												{(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
 											</span>
 											<span className="text-lg">Completion</span>
 										</div>
@@ -261,9 +197,7 @@ export default function Finish({
 									<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-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
 											<span className="text-lg">Correct</span>
 										</div>
 									</div>
@@ -271,9 +205,7 @@ export default function Finish({
 										<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")}
+												{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
 											</span>
 											<span className="text-lg">Wrong</span>
 										</div>
@@ -293,8 +225,8 @@ export default function Finish({
 						<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
 							<button
 								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" />
 							</button>
 							<span>Play Again</span>
@@ -302,19 +234,15 @@ export default function Finish({
 						<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
 							<button
 								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" />
 							</button>
 							<span>Review All</span>
 						</div>
 						<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
 							<button
-                onClick={() =>
-                  onViewResults(modules.findIndex((x) => x === selectedModule))
-                }
-                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"
-              >
+								onClick={() => onViewResults(modules.findIndex((x) => x === selectedModule))}
+								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" />
 							</button>
 							<span>Review {capitalize(selectedModule)}</span>