Added the ability to view archived assignments and unarchive them

src/dashboards/AssignmentCard.tsx

@@ -5,22 +5,18 @@ import { Assignment } from "@/interfaces/results";
 import {calculateBandScore} from "@/utils/score";
 import clsx from "clsx";
 import moment from "moment";
-import {
-  BsBook,
-  BsClipboard,
-  BsHeadphones,
-  BsMegaphone,
-  BsPen,
-} from "react-icons/bs";
+import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
 import {usePDFDownload} from "@/hooks/usePDFDownload";
 import {useAssignmentArchive} from "@/hooks/useAssignmentArchive";
 import {uniqBy} from "lodash";
+import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive";
 
 interface Props {
 	onClick?: () => void;
 	allowDownload?: boolean;
 	reload?: Function;
 	allowArchive?: boolean;
+	allowUnarchive?: boolean;
 }
 
 export default function AssignmentCard({
@@ -37,45 +33,35 @@ export default function AssignmentCard({
 	allowDownload,
 	reload,
 	allowArchive,
+	allowUnarchive,
 }: Assignment & Props) {
 	const renderPdfIcon = usePDFDownload("assignments");
 	const renderArchiveIcon = useAssignmentArchive(id, reload);
+	const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);
 
 	const calculateAverageModuleScore = (module: Module) => {
 		const resultModuleBandScores = results.map((r) => {
 			const moduleStats = r.stats.filter((s) => s.module === module);
 
-      const correct = moduleStats.reduce(
-        (acc, curr) => acc + curr.score.correct,
-        0
-      );
-      const total = moduleStats.reduce(
-        (acc, curr) => acc + curr.score.total,
-        0
-      );
+			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
+			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
 			return calculateBandScore(correct, total, module, r.type);
 		});
 
-    return resultModuleBandScores.length === 0
-      ? -1
-      : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) /
-          results.length;
+		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / results.length;
 	};
 
 	return (
 		<div
 			onClick={onClick}
-      className="border-mti-gray-platinum flex h-fit w-[350px] cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow"
-    >
+			className="border-mti-gray-platinum flex h-fit w-[350px] cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow">
 			<div className="flex flex-col gap-3">
 				<div className="flex flex-row justify-between">
 					<h3 className="text-xl font-semibold">{name}</h3>
 					<div className="flex gap-2">
-            {allowDownload &&
-              renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
-            {allowArchive &&
-              !archived &&
-              renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
+						{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+						{allowArchive && !archived && renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
+						{allowUnarchive && archived && renderUnarchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
 					</div>
 				</div>
 				<ProgressBar
@@ -83,11 +69,7 @@ export default function AssignmentCard({
 					percentage={(results.length / assignees.length) * 100}
 					label={`${results.length}/${assignees.length}`}
 					className="h-5"
-          textClassName={
-            results.length / assignees.length < 0.5
-              ? "!text-mti-gray-dim font-light"
-              : "text-white"
-          }
+					textClassName={results.length / assignees.length < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"}
 				/>
 			</div>
 			<span className="flex justify-between gap-1">
@@ -105,18 +87,15 @@ export default function AssignmentCard({
 							module === "listening" && "bg-ielts-listening",
 							module === "writing" && "bg-ielts-writing",
 							module === "speaking" && "bg-ielts-speaking",
-              module === "level" && "bg-ielts-level"
-            )}
-          >
+							module === "level" && "bg-ielts-level",
+						)}>
 						{module === "reading" && <BsBook className="h-4 w-4" />}
 						{module === "listening" && <BsHeadphones className="h-4 w-4" />}
 						{module === "writing" && <BsPen className="h-4 w-4" />}
 						{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
 						{module === "level" && <BsClipboard className="h-4 w-4" />}
 						{calculateAverageModuleScore(module) > -1 && (
-              <span className="text-sm">
-                {calculateAverageModuleScore(module).toFixed(1)}
-              </span>
+							<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
 						)}
 					</div>
 				))}

src/dashboards/Teacher.tsx

@@ -151,8 +151,10 @@ export default function TeacherDashboard({user}: Props) {
 	};
 
 	const AssignmentsPage = () => {
-		const activeFilter = (a: Assignment) => moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
+		const activeFilter = (a: Assignment) =>
+			moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
 		const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
+		const archivedFilter = (a: Assignment) => a.archived;
 		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
 
 		return (
@@ -234,7 +236,29 @@ export default function TeacherDashboard({user}: Props) {
 					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
 					<div className="flex flex-wrap gap-2">
 						{assignments.filter(pastFilter).map((a) => (
-							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} allowDownload reload={reloadAssignments} allowArchive/>
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowArchive
+							/>
+						))}
+					</div>
+				</section>
+				<section className="flex flex-col gap-4">
+					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
+					<div className="flex flex-wrap gap-2">
+						{assignments.filter(archivedFilter).map((a) => (
+							<AssignmentCard
+								{...a}
+								onClick={() => setSelectedAssignment(a)}
+								key={a.id}
+								allowDownload
+								reload={reloadAssignments}
+								allowUnarchive
+							/>
 						))}
 					</div>
 				</section>

src/hooks/useAssignmentArchive.tsx

@@ -3,10 +3,7 @@ import axios from "axios";
 import {toast} from "react-toastify";
 import {BsArchive} from "react-icons/bs";
 
-export const useAssignmentArchive = (
-  assignmentId: string,
-  reload?: Function
-) => {
+export const useAssignmentArchive = (assignmentId: string, reload?: Function) => {
 	const [loading, setLoading] = React.useState(false);
 	const archive = () => {
 		// archive assignment
@@ -26,18 +23,18 @@ export const useAssignmentArchive = (
 
 	const renderIcon = (downloadClasses: string, loadingClasses: string) => {
 		if (loading) {
-      return (
-        <span className={`${loadingClasses} loading loading-infinity w-6`} />
-      );
+			return <span className={`${loadingClasses} loading loading-infinity w-6`} />;
 		}
 		return (
-      <BsArchive
-        className={`${downloadClasses} text-2xl cursor-pointer`}
+			<div
+				className="tooltip flex items-center justify-center w-fit h-fit"
+				data-tip="Archive assignment"
 				onClick={(e) => {
 					e.stopPropagation();
 					archive();
-        }}
-      />
+				}}>
+				<BsArchive className={`${downloadClasses} text-2xl cursor-pointer tooltip`} />
+			</div>
 		);
 	};
 

src/hooks/useAssignmentUnarchive.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import axios from "axios";
+import {toast} from "react-toastify";
+import {BsArchive, BsFileEarmarkCheck, BsFileEarmarkCheckFill} from "react-icons/bs";
+
+export const useAssignmentUnarchive = (assignmentId: string, reload?: Function) => {
+	const [loading, setLoading] = React.useState(false);
+	const archive = () => {
+		// archive assignment
+		setLoading(true);
+		axios
+			.post(`/api/assignments/${assignmentId}/unarchive`)
+			.then((res) => {
+				toast.success("Assignment unarchived!");
+				if (reload) reload();
+				setLoading(false);
+			})
+			.catch((err) => {
+				toast.error("Failed to unarchive the assignment!");
+				setLoading(false);
+			});
+	};
+
+	const renderIcon = (downloadClasses: string, loadingClasses: string) => {
+		if (loading) {
+			return <span className={`${loadingClasses} loading loading-infinity w-6`} />;
+		}
+		return (
+			<div
+				className="tooltip flex items-center justify-center w-fit h-fit"
+				data-tip="Unarchive assignment"
+				onClick={(e) => {
+					e.stopPropagation();
+					archive();
+				}}>
+				<BsFileEarmarkCheck className={`${downloadClasses} text-2xl cursor-pointer tooltip`} />
+			</div>
+		);
+	};
+
+	return renderIcon;
+};

src/pages/api/assignments/[id]/unarchive.tsx

@@ -0,0 +1,33 @@
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, doc, getDoc, setDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+	// verify if it's a logged user that is trying to archive
+	if (req.session.user) {
+		const {id} = req.query as {id: string};
+		const docSnap = await getDoc(doc(db, "assignments", id));
+
+		if (!docSnap.exists()) {
+			res.status(404).json({ok: false});
+			return;
+		}
+
+		await setDoc(docSnap.ref, {archived: false}, {merge: true});
+		res.status(200).json({ok: true});
+		return;
+	}
+
+	res.status(401).json({ok: false});
+}
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "POST") return post(req, res);
+	res.status(404).json({ok: false});
+}