- Implemented an image attachment to the Writing exercise;

- Made it so the exams are now sorted when going through the history;
- Corrected some little mistakes;

src/components/Diagnostic.tsx

@@ -47,7 +47,7 @@ export default function Diagnostic({onFinish}: Props) {
 
 	const updateUser = (callback: () => void) => {
 		axios
-			.post("/api/users/update", {focus, levels, isFirstLogin: false})
+			.patch("/api/users/update", {focus, levels, isFirstLogin: false})
 			.then(callback)
 			.catch(() => {
 				toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});

src/components/Exercises/Writing.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
 import {WritingExercise} from "@/interfaces/exam";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
@@ -7,7 +8,7 @@ import {CommonProps} from ".";
 import {Fragment, useEffect, useState} from "react";
 import {toast} from "react-toastify";
 
-export default function Writing({id, prompt, info, type, wordCounter, onNext, onBack}: WritingExercise & CommonProps) {
+export default function Writing({id, prompt, info, type, wordCounter, attachment, onNext, onBack}: WritingExercise & CommonProps) {
 	const [inputText, setInputText] = useState("");
 	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
 
@@ -40,6 +41,7 @@ export default function Writing({id, prompt, info, type, wordCounter, onNext, on
 				<span>
 					You should write {wordCounter.type === "min" ? "at least" : "at most"} {wordCounter.limit} words.
 				</span>
+				{attachment && <img src={attachment} alt="Exercise attachment" />}
 			</div>
 
 			<textarea

src/exams/Selection.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
 import Icon from "@mdi/react";
 import {mdiAccountVoice, mdiArrowLeft, mdiArrowRight, mdiBookOpen, mdiHeadphones, mdiPen} from "@mdi/js";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {Module} from "@/interfaces";
 import clsx from "clsx";
 import {useRouter} from "next/router";
 import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
 import ProfileLevel from "@/components/ProfileLevel";
 import {User} from "@/interfaces/user";
+import useExamStore from "@/stores/examStore";
 
 interface Props {
 	user: User;
@@ -16,6 +17,7 @@ interface Props {
 
 export default function Selection({user, onStart}: Props) {
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
+
 	const router = useRouter();
 
 	const toggleModule = (module: Module) => {

src/interfaces/exam.ts

@@ -12,6 +12,7 @@ export interface ReadingExam {
 	module: "reading";
 	minTimer: number;
 	type: "academic" | "general";
+	isDiagnostic: boolean;
 }
 
 export interface ListeningExam {
@@ -23,6 +24,7 @@ export interface ListeningExam {
 	exercises: Exercise[];
 	module: "listening";
 	minTimer: number;
+	isDiagnostic: boolean;
 }
 
 export interface UserSolution {
@@ -42,6 +44,7 @@ export interface WritingExam {
 	id: string;
 	exercises: Exercise[];
 	minTimer: number;
+	isDiagnostic: boolean;
 }
 
 interface WordCounter {
@@ -54,6 +57,7 @@ export interface SpeakingExam {
 	module: "speaking";
 	exercises: Exercise[];
 	minTimer: number;
+	isDiagnostic: boolean;
 }
 
 export type Exercise =
@@ -70,6 +74,7 @@ export interface WritingExercise {
 	info: string; //* The information about the task, like the amount of time they should spend on it
 	prompt: string; //* The context given to the user containing what they should write about
 	wordCounter: WordCounter; //* The minimum or maximum amount of words that should be written
+	attachment?: string; //* The url for an image to work as an attachment to show the user
 	userSolutions: {
 		id: string;
 		solution: string;

src/pages/api/exam/[module]/index.ts

@@ -1,7 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type {NextApiRequest, NextApiResponse} from "next";
 import {app} from "@/firebase";
-import {getFirestore, collection, getDocs} from "firebase/firestore";
+import {getFirestore, collection, getDocs, query, where} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 
@@ -16,8 +16,10 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 	}
 
 	const {module} = req.query as {module: string};
+	const moduleRef = collection(db, module);
+	const q = query(moduleRef, where("isDiagnostic", "==", false));
 
-	const snapshot = await getDocs(collection(db, module));
+	const snapshot = await getDocs(q);
 
 	res.status(200).json(
 		snapshot.docs.map((doc) => ({

src/pages/exam/index.tsx

@@ -41,7 +41,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 
 export default function Page() {
 	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
-	const [moduleIndex, setModuleIndex] = useState(1);
+	const [moduleIndex, setModuleIndex] = useState(0);
 	const [sessionId, setSessionId] = useState("");
 	const [exam, setExam] = useState<Exam>();
 	const [timer, setTimer] = useState(-1);

src/pages/history.tsx

@@ -26,6 +26,7 @@ import Icon from "@mdi/react";
 import {mdiArrowRight, mdiChevronRight} from "@mdi/js";
 import {uniqBy} from "lodash";
 import {getExamById} from "@/utils/exams";
+import {sortByModule} from "@/utils/moduleUtils";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -87,8 +88,13 @@ export default function History({user}: {user: User}) {
 				if (exams.every((x) => !!x)) {
 					setUserSolutions(convertToUserSolutions(dateStats));
 					setShowSolutions(true);
-					setExams(exams.map((x) => x!));
+					setExams(exams.map((x) => x!).sort(sortByModule));
-					setSelectedModules(exams.map((x) => x!.module));
+					setSelectedModules(
+						exams
+							.map((x) => x!)
+							.sort(sortByModule)
+							.map((x) => x!.module),
+					);
 					router.push("/exam");
 				}
 			});

src/utils/moduleUtils.ts

@@ -1,8 +1,14 @@
 import {Module} from "@/interfaces";
 
+const MODULE_ARRAY: Module[] = ["reading", "listening", "writing", "speaking"];
+
 export const moduleLabels: {[key in Module]: string} = {
 	listening: "Listening",
 	reading: "Reading",
 	speaking: "Speaking",
 	writing: "Writing",
 };
+
+export const sortByModule = (a: {module: Module}, b: {module: Module}) => {
+	return MODULE_ARRAY.findIndex((x) => a.module === x) - MODULE_ARRAY.findIndex((x) => b.module === x);
+};