Finished implementing a Solutions version for each exercise

src/pages/exam/index.tsx

@@ -12,20 +12,25 @@ import JSON_WRITING from "@/demo/writing.json";
 
 import Selection from "@/exams/Selection";
 import Reading from "@/exams/Reading";
-import {Exam, ListeningExam, ReadingExam, WritingExam} from "@/interfaces/exam";
+import {Exam, ListeningExam, ReadingExam, UserSolution, WritingExam} from "@/interfaces/exam";
 import Listening from "@/exams/Listening";
 import Writing from "@/exams/Writing";
 import {ToastContainer} from "react-toastify";
+import Link from "next/link";
 
 export default function Home() {
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
 	const [moduleIndex, setModuleIndex] = useState(0);
 	const [exam, setExam] = useState<Exam>();
+	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
+	const [showSolutions, setShowSolutions] = useState(false);
 
 	useEffect(() => {
 		if (selectedModules.length > 0 && moduleIndex < selectedModules.length) {
-			setExam(getExam(selectedModules[moduleIndex]));
+			const nextExam = getExam(selectedModules[moduleIndex]);
+			setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedModules, moduleIndex]);
 
 	const getExam = (module: Module): Exam | undefined => {
@@ -41,25 +46,59 @@ export default function Home() {
 		return undefined;
 	};
 
+	const updateExamWithUserSolutions = (exam: Exam): Exam => {
+		const exercises = exam.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.id)?.solutions}));
+
+		return Object.assign(exam, exercises);
+	};
+
+	const onFinish = (solutions: UserSolution[]) => {
+		const solutionIds = solutions.map((x) => x.id);
+		console.log({solutions});
+
+		setUserSolutions((prev) => [...prev.filter((x) => !solutionIds.includes(x.id)), ...solutions]);
+		setModuleIndex((prev) => prev + 1);
+	};
+
 	const renderScreen = () => {
 		if (selectedModules.length === 0) {
 			return <Selection user={JSON_USER} onStart={setSelectedModules} />;
 		}
 
 		if (moduleIndex >= selectedModules.length) {
-			return <>Finished!</>;
+			return (
+				<>
+					Finished!{" "}
+					<button
+						className="btn btn-wide"
+						onClick={() => {
+							setShowSolutions(true);
+							setModuleIndex(0);
+						}}>
+						View Solutions
+					</button>
+					<Link href="/">
+						<button className="btn btn-wide">Go Home</button>
+					</Link>
+				</>
+			);
 		}
 
 		if (exam && exam.module === "reading") {
-			return <Reading exam={exam} onFinish={() => setModuleIndex((prev) => prev + 1)} />;
+			return <Reading exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
 		}
 
 		if (exam && exam.module === "listening") {
-			return <Listening exam={exam} onFinish={() => setModuleIndex((prev) => prev + 1)} />;
+			return <Listening exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+		}
+
+		if (exam && exam.module === "writing" && showSolutions) {
+			setModuleIndex((prev) => prev + 1);
+			return <></>;
 		}
 
 		if (exam && exam.module === "writing") {
-			return <Writing exam={exam} />;
+			return <Writing exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
 		}
 
 		return <>Loading...</>;