Added more columns to exam list

src/interfaces/exam.ts

@@ -5,15 +5,20 @@ export type Variant = "full" | "partial";
 export type InstructorGender = "male" | "female" | "varied";
 export type Difficulty = "easy" | "medium" | "hard";
 
-export interface ReadingExam {
+interface ExamBase {
-	parts: ReadingPart[];
 	id: string;
-	module: "reading";
+	module: Module;
 	minTimer: number;
-	type: "academic" | "general";
 	isDiagnostic: boolean;
 	variant?: Variant;
 	difficulty?: Difficulty;
+	createdBy?: string; // option as it has been added later
+	createdAt?: string; // option as it has been added later
+}
+export interface ReadingExam extends ExamBase {
+	module: "reading";
+	parts: ReadingPart[];
+	type: "academic" | "general";
 }
 
 export interface ReadingPart {
@@ -24,14 +29,9 @@ export interface ReadingPart {
 	exercises: Exercise[];
 }
 
-export interface LevelExam {
+export interface LevelExam extends ExamBase {
 	module: "level";
-	id: string;
 	parts: LevelPart[];
-	minTimer: number;
-	isDiagnostic: boolean;
-	variant?: Variant;
-	difficulty?: Difficulty;
 }
 
 export interface LevelPart {
@@ -39,14 +39,9 @@ export interface LevelPart {
 	exercises: Exercise[];
 }
 
-export interface ListeningExam {
+export interface ListeningExam extends ExamBase {
 	parts: ListeningPart[];
-	id: string;
 	module: "listening";
-	minTimer: number;
-	isDiagnostic: boolean;
-	variant?: Variant;
-	difficulty?: Difficulty;
 }
 
 export interface ListeningPart {
@@ -72,14 +67,9 @@ export interface UserSolution {
 	isDisabled?: boolean;
 }
 
-export interface WritingExam {
+export interface WritingExam extends ExamBase {
 	module: "writing";
-	id: string;
 	exercises: WritingExercise[];
-	minTimer: number;
-	isDiagnostic: boolean;
-	variant?: Variant;
-	difficulty?: Difficulty;
 }
 
 interface WordCounter {
@@ -87,15 +77,10 @@ interface WordCounter {
 	limit: number;
 }
 
-export interface SpeakingExam {
+export interface SpeakingExam  extends ExamBase {
-	id: string;
 	module: "speaking";
 	exercises: (SpeakingExercise | InteractiveSpeakingExercise)[];
-	minTimer: number;
-	isDiagnostic: boolean;
-	variant?: Variant;
 	instructorGender: InstructorGender;
-	difficulty?: Difficulty;
 }
 
 export type Exercise =

src/pages/(admin)/Lists/ExamList.tsx

@@ -1,21 +1,27 @@
-import {PERMISSIONS} from "@/constants/userPermissions";
+import { useMemo } from "react";
+import { PERMISSIONS } from "@/constants/userPermissions";
 import useExams from "@/hooks/useExams";
 import useUsers from "@/hooks/useUsers";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
-import {Exam} from "@/interfaces/exam";
+import { Exam } from "@/interfaces/exam";
-import {Type, User} from "@/interfaces/user";
+import { Type, User } from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {getExamById} from "@/utils/exams";
+import { getExamById } from "@/utils/exams";
-import {countExercises} from "@/utils/moduleUtils";
+import { countExercises } from "@/utils/moduleUtils";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize} from "lodash";
+import { capitalize } from "lodash";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
-import {BsCheck, BsTrash, BsUpload} from "react-icons/bs";
+import { BsCheck, BsTrash, BsUpload } from "react-icons/bs";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
 
-const CLASSES: {[key in Module]: string} = {
+const CLASSES: { [key in Module]: string } = {
   reading: "text-ielts-reading",
   listening: "text-ielts-listening",
   speaking: "text-ielts-speaking",
@@ -25,8 +31,25 @@ const CLASSES: {[key in Module]: string} = {
 
 const columnHelper = createColumnHelper<Exam>();
 
-export default function ExamList({user}: {user: User}) {
+export default function ExamList({ user }: { user: User }) {
-	const {exams, reload} = useExams();
+  const { exams, reload } = useExams();
+  const { users } = useUsers();
+
+  const parsedExams = useMemo(() => {
+    return exams.map((exam) => {
+      if (exam.createdBy) {
+        const user = users.find((u) => u.id === exam.createdBy);
+        if (!user) return exam;
+
+        return {
+          ...exam,
+          createdBy: user.type === "developer" ? "system" : user.name,
+        };
+      }
+
+      return exam;
+    });
+  }, [exams, users]);
 
   const setExams = useExamStore((state) => state.setExams);
   const setSelectedModules = useExamStore((state) => state.setSelectedModules);
@@ -36,9 +59,12 @@ export default function ExamList({user}: {user: User}) {
   const loadExam = async (module: Module, examId: string) => {
     const exam = await getExamById(module, examId.trim());
     if (!exam) {
-			toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
+      toast.error(
+        "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
+        {
           toastId: "invalid-exam-id",
-			});
+        }
+      );
 
       return;
     }
@@ -50,7 +76,12 @@ export default function ExamList({user}: {user: User}) {
   };
 
   const deleteExam = async (exam: Exam) => {
-		if (!confirm(`Are you sure you want to delete this ${capitalize(exam.module)} exam?`)) return;
+    if (
+      !confirm(
+        `Are you sure you want to delete this ${capitalize(exam.module)} exam?`
+      )
+    )
+      return;
 
     axios
       .delete(`/api/exam/${exam.module}/${exam.id}`)
@@ -72,7 +103,11 @@ export default function ExamList({user}: {user: User}) {
   };
 
   const getTotalExercises = (exam: Exam) => {
-		if (exam.module === "reading" || exam.module === "listening" || exam.module === "level") {
+    if (
+      exam.module === "reading" ||
+      exam.module === "listening" ||
+      exam.module === "level"
+    ) {
       return countExercises(exam.parts.flatMap((x) => x.exercises));
     }
 
@@ -86,7 +121,11 @@ export default function ExamList({user}: {user: User}) {
     }),
     columnHelper.accessor("module", {
       header: "Module",
-			cell: (info) => <span className={CLASSES[info.getValue()]}>{capitalize(info.getValue())}</span>,
+      cell: (info) => (
+        <span className={CLASSES[info.getValue()]}>
+          {capitalize(info.getValue())}
+        </span>
+      ),
     }),
     columnHelper.accessor((x) => getTotalExercises(x), {
       header: "Exercises",
@@ -96,20 +135,42 @@ export default function ExamList({user}: {user: User}) {
       header: "Timer",
       cell: (info) => <>{info.getValue()} minute(s)</>,
     }),
+    columnHelper.accessor("createdAt", {
+      header: "Created At",
+      cell: (info) => {
+        const value = info.getValue();
+        if (value) {
+          return new Date(value).toLocaleDateString();
+        }
+
+        return null;
+      },
+    }),
+    columnHelper.accessor("createdBy", {
+      header: "Created By",
+      cell: (info) => info.getValue(),
+    }),
     {
       header: "",
       id: "actions",
-			cell: ({row}: {row: {original: Exam}}) => {
+      cell: ({ row }: { row: { original: Exam } }) => {
         return (
           <div className="flex gap-4">
             <div
               data-tip="Load exam"
               className="cursor-pointer tooltip"
-							onClick={async () => await loadExam(row.original.module, row.original.id)}>
+              onClick={async () =>
+                await loadExam(row.original.module, row.original.id)
+              }
+            >
               <BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
             </div>
             {PERMISSIONS.examManagement.delete.includes(user.type) && (
-							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteExam(row.original)}>
+              <div
+                data-tip="Delete"
+                className="cursor-pointer tooltip"
+                onClick={() => deleteExam(row.original)}
+              >
                 <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
               </div>
             )}
@@ -120,7 +181,7 @@ export default function ExamList({user}: {user: User}) {
   ];
 
   const table = useReactTable({
-		data: exams,
+    data: parsedExams,
     columns: defaultColumns,
     getCoreRowModel: getCoreRowModel(),
   });
@@ -132,7 +193,12 @@ export default function ExamList({user}: {user: User}) {
           <tr key={headerGroup.id}>
             {headerGroup.headers.map((header) => (
               <th className="p-4 text-left" key={header.id}>
-								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
               </th>
             ))}
           </tr>
@@ -140,7 +206,10 @@ export default function ExamList({user}: {user: User}) {
       </thead>
       <tbody className="px-2">
         {table.getRowModel().rows.map((row) => (
-					<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+          <tr
+            className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
+            key={row.id}
+          >
             {row.getVisibleCells().map((cell) => (
               <td className="px-4 py-2" key={cell.id}>
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}

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

@@ -47,7 +47,7 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 	}
 	const {module} = req.query as {module: string};
 
-	const exam = {...req.body, module: module};
+	const exam = {...req.body, module: module, createdBy: req.session.user.id, createdAt: new Date().toISOString()};
 	await setDoc(doc(db, module, req.body.id), exam);
 
 	res.status(200).json(exam);