Merge branch 'develop'

next.config.js

@@ -35,6 +35,21 @@ const nextConfig = {
 					},
 				],
 			},
+			{
+				source: "/api/users/agents",
+				headers: [
+					{key: "Access-Control-Allow-Credentials", value: "false"},
+					{key: "Access-Control-Allow-Origin", value: websiteUrl},
+					{
+						key: "Access-Control-Allow-Methods",
+						value: "POST,OPTIONS",
+					},
+					{
+						key: "Access-Control-Allow-Headers",
+						value: "Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date",
+					},
+				],
+			},
 		];
 	},
 };

src/dashboards/AssignmentCard.tsx

@@ -13,11 +13,14 @@ import {
   BsPen,
 } from "react-icons/bs";
 import { usePDFDownload } from "@/hooks/usePDFDownload";
+import { useAssignmentArchive } from "@/hooks/useAssignmentArchive";
 import { uniqBy } from "lodash";
 
 interface Props {
   onClick?: () => void;
   allowDownload?: boolean;
+  reload?: Function;
+  allowArchive?: boolean;
 }
 
 export default function AssignmentCard({
@@ -29,11 +32,14 @@ export default function AssignmentCard({
   assignees,
   results,
   exams,
+  archived,
   onClick,
   allowDownload,
+  reload,
+  allowArchive,
 }: Assignment & Props) {
-  const { users } = useUsers();
   const renderPdfIcon = usePDFDownload("assignments");
+  const renderArchiveIcon = useAssignmentArchive(id, reload);
 
   const calculateAverageModuleScore = (module: Module) => {
     const resultModuleBandScores = results.map((r) => {
@@ -41,11 +47,11 @@ export default function AssignmentCard({
 
       const correct = moduleStats.reduce(
         (acc, curr) => acc + curr.score.correct,
-        0,
+        0
       );
       const total = moduleStats.reduce(
         (acc, curr) => acc + curr.score.total,
-        0,
+        0
       );
       return calculateBandScore(correct, total, module, r.type);
     });
@@ -64,8 +70,13 @@ export default function AssignmentCard({
       <div className="flex flex-col gap-3">
         <div className="flex flex-row justify-between">
           <h3 className="text-xl font-semibold">{name}</h3>
-          {allowDownload &&
-            renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+          <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")}
+          </div>
         </div>
         <ProgressBar
           color={results.length / assignees.length < 0.5 ? "red" : "purple"}
@@ -94,7 +105,7 @@ 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" />}

src/dashboards/Student.tsx

@@ -227,35 +227,40 @@ export default function StudentDashboard({user}: Props) {
 			<section className="flex flex-col gap-3">
 				<span className="text-lg font-bold">Score History</span>
 				<div className="-md:grid-rows-4 grid gap-6 md:grid-cols-2">
-					{MODULE_ARRAY.map((module) => (
-						<div className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4" key={module}>
-							<div className="flex items-center gap-2 md:gap-3">
-								<div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
-									{module === "reading" && <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />}
-									{module === "listening" && <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />}
-									{module === "writing" && <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />}
-									{module === "speaking" && <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />}
-									{module === "level" && <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />}
+					{MODULE_ARRAY
+						.map((module) => {
+						const desiredLevel = user.desiredLevels[module] || 9;
+						const level = user.levels[module] || 0;
+						return (
+							<div className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4" key={module}>
+								<div className="flex items-center gap-2 md:gap-3">
+									<div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
+										{module === "reading" && <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />}
+										{module === "listening" && <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />}
+										{module === "writing" && <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />}
+										{module === "speaking" && <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />}
+										{module === "level" && <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />}
+									</div>
+									<div className="flex w-full justify-between">
+										<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
+										<span className="text-mti-gray-dim text-sm font-normal">
+											Level {level} / Level 9 (Desired Level: {desiredLevel})
+										</span>
+									</div>
 								</div>
-								<div className="flex w-full justify-between">
-									<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
-									<span className="text-mti-gray-dim text-sm font-normal">
-										Level {user.levels[module] || 0} / Level 9 (Desired Level: {user.desiredLevels[module] || 9})
-									</span>
+								<div className="md:pl-14">
+									<ProgressBar
+										color={module}
+										label=""
+										mark={Math.round((desiredLevel * 100) / 9)}
+										markLabel={`Desired Level: ${desiredLevel}`}
+										percentage={Math.round((level * 100) / 9)}
+										className="h-2 w-full"
+									/>
 								</div>
 							</div>
-							<div className="md:pl-14">
-								<ProgressBar
-									color={module}
-									label=""
-									mark={Math.round((user.desiredLevels[module] * 100) / 9)}
-									markLabel={`Desired Level: ${user.desiredLevels[module]}`}
-									percentage={Math.round((user.levels[module] * 100) / 9)}
-									className="h-2 w-full"
-								/>
-							</div>
-						</div>
-					))}
+						);
+					})}
 				</div>
 			</section>
 		</>

src/dashboards/Teacher.tsx

@@ -151,9 +151,8 @@ 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 pastFilter = (a: Assignment) => moment(a.endDate).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 futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
 
 		return (
@@ -235,7 +234,7 @@ 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 />
+							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} allowDownload reload={reloadAssignments} allowArchive/>
 						))}
 					</div>
 				</section>
@@ -281,7 +280,7 @@ export default function TeacherDashboard({user}: Props) {
 					<BsEnvelopePaper className="text-6xl text-mti-purple-light" />
 					<span className="flex flex-col gap-1 items-center text-xl">
 						<span className="text-lg">Assignments</span>
-						<span className="font-semibold text-mti-purple-light">{assignments.length}</span>
+						<span className="font-semibold text-mti-purple-light">{assignments.filter((a) => !a.archived).length}</span>
 					</span>
 				</div>
 			</section>

src/hooks/useAssignmentArchive.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import axios from "axios";
+import { toast } from "react-toastify";
+import { BsArchive } from "react-icons/bs";
+
+export const useAssignmentArchive = (
+  assignmentId: string,
+  reload?: Function
+) => {
+  const [loading, setLoading] = React.useState(false);
+  const archive = () => {
+    // archive assignment
+    setLoading(true);
+    axios
+      .post(`/api/assignments/${assignmentId}/archive`)
+      .then((res) => {
+        toast.success("Assignment archived!");
+        if(reload) reload();
+        setLoading(false);
+      })
+      .catch((err) => {
+        toast.error("Failed to archive the assignment!");
+        setLoading(false);
+      });
+  };
+
+  const renderIcon = (downloadClasses: string, loadingClasses: string) => {
+    if (loading) {
+      return (
+        <span className={`${loadingClasses} loading loading-infinity w-6`} />
+      );
+    }
+    return (
+      <BsArchive
+        className={`${downloadClasses} text-2xl cursor-pointer`}
+        onClick={(e) => {
+          e.stopPropagation();
+          archive();
+        }}
+      />
+    );
+  };
+
+  return renderIcon;
+};

src/interfaces/results.ts

@@ -24,4 +24,5 @@ export interface Assignment {
 	instructorGender?: InstructorGender;
 	startDate: Date;
 	endDate: Date;
+	archived?: boolean;
 }

src/pages/api/assignments/[id]/archive.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: true }, { 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 });
+}

src/pages/api/stats/update.ts

@@ -5,6 +5,7 @@ import {Stat, User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
 import {calculateBandScore} from "@/utils/score";
 import {groupByModule, groupBySession} from "@/utils/stats";
+import { MODULE_ARRAY } from "@/utils/moduleUtils";
 import {getAuth} from "firebase/auth";
 import {collection, doc, getDoc, getDocs, getFirestore, query, updateDoc, where} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
@@ -55,7 +56,7 @@ async function update(req: NextApiRequest, res: NextApiResponse) {
 				},
 			};
 
-			MODULES.forEach((module: Module) => {
+			MODULE_ARRAY.forEach((module: Module) => {
 				const moduleStats = sessionStats.filter((x) => x.module === module);
 				if (moduleStats.length === 0) return;
 
@@ -87,11 +88,18 @@ async function update(req: NextApiRequest, res: NextApiResponse) {
 			.filter((x) => x.total > 0)
 			.reduce((acc, cur) => ({total: acc.total + cur.total, correct: acc.correct + cur.correct}), {total: 0, correct: 0});
 
+			const levelLevel = sessionLevels
+			.map((x) => x.level)
+			.filter((x) => x.total > 0)
+			.reduce((acc, cur) => ({total: acc.total + cur.total, correct: acc.correct + cur.correct}), {total: 0, correct: 0});
+
+
 		const levels = {
 			reading: calculateBandScore(readingLevel.correct, readingLevel.total, "reading", req.session.user.focus),
 			listening: calculateBandScore(listeningLevel.correct, listeningLevel.total, "listening", req.session.user.focus),
 			writing: calculateBandScore(writingLevel.correct, writingLevel.total, "writing", req.session.user.focus),
 			speaking: calculateBandScore(speakingLevel.correct, speakingLevel.total, "speaking", req.session.user.focus),
+			level: calculateBandScore(levelLevel.correct, levelLevel.total, "level", req.session.user.focus),
 		};
 
 		const userDoc = doc(db, "users", req.session.user.id);

src/pages/api/users/agents/[code].ts

@@ -0,0 +1,55 @@
+import { app, adminApp } from "@/firebase";
+import { AgentUser } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import {
+  collection,
+  getDocs,
+  getFirestore,
+  query,
+  where,
+} from "firebase/firestore";
+import { getAuth } from "firebase-admin/auth";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { NextApiRequest, NextApiResponse } from "next";
+import countryCodes from "country-codes-list";
+const db = getFirestore(app);
+const auth = getAuth(adminApp);
+
+export default withIronSessionApiRoute(user, sessionOptions);
+
+interface Contact {
+  name: string;
+  email: string;
+  number: string;
+}
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  const { code } = req.query as { code: string };
+
+  const usersQuery = query(
+    collection(db, "users"),
+    where("type", "==", "agent"),
+    where("demographicInformation.country", "==", code)
+  );
+  const docsUser = await getDocs(usersQuery);
+
+  const docs = docsUser.docs.map((doc) => doc.data() as AgentUser);
+
+  const entries = docs.map((user: AgentUser) => {
+    const newUser = {
+      name: user.agentInformation.companyName,
+      email: user.email,
+      number: user.demographicInformation?.phone as string,
+    } as Contact;
+    return newUser;
+  }) as Contact[];
+
+  const country = countryCodes.findOne("countryCode" as any, code);
+  res.json({
+    label: country.countryNameEn,
+    entries,
+  });
+}
+
+async function user(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return get(req, res);
+}

src/pages/api/users/agents/index.ts

@@ -0,0 +1,65 @@
+import { app, adminApp } from "@/firebase";
+import { AgentUser } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import {
+  collection,
+  getDocs,
+  getFirestore,
+  query,
+  where,
+} from "firebase/firestore";
+import { getAuth } from "firebase-admin/auth";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { NextApiRequest, NextApiResponse } from "next";
+import countryCodes from "country-codes-list";
+const db = getFirestore(app);
+const auth = getAuth(adminApp);
+
+export default withIronSessionApiRoute(user, sessionOptions);
+
+interface Contact {
+  name: string;
+  email: string;
+  number: string;
+}
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  const usersQuery = query(
+    collection(db, "users"),
+    where("type", "==", "agent")
+  );
+  const docsUser = await getDocs(usersQuery);
+
+  const docs = docsUser.docs.map((doc) => doc.data() as AgentUser);
+
+  const data = docs.reduce(
+    (acc: Record<string, Contact[]>, user: AgentUser) => {
+      const countryCode = user.demographicInformation?.country as string;
+      const currentValues = acc[countryCode] || ([] as Contact[]);
+      const newUser = {
+        name: user.agentInformation.companyName,
+        email: user.email,
+        number: user.demographicInformation?.phone as string,
+      } as Contact;
+      return {
+        ...acc,
+        [countryCode]: [...currentValues, newUser],
+      };
+    },
+    {}
+  ) as Record<string, Contact[]>;
+
+  const result = Object.keys(data).map((code) => {
+    const country = countryCodes.findOne("countryCode" as any, code);
+    return {
+      label: country.countryNameEn,
+      key: code,
+      entries: data[code],
+    };
+  });
+
+  res.json(result);
+}
+
+async function user(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return get(req, res);
+}