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

import {useMemo} from "react";
import {PERMISSIONS} from "@/constants/userPermissions";
import useExams from "@/hooks/useExams";
import useUsers from "@/hooks/useUsers";
import {Module} from "@/interfaces";
import {Exam} from "@/interfaces/exam";
import {Type, User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import {getExamById} from "@/utils/exams";
import {countExercises} from "@/utils/moduleUtils";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
import axios from "axios";
import clsx from "clsx";
import {capitalize} from "lodash";
import {useRouter} from "next/router";
import {BsCheck, BsTrash, BsUpload} from "react-icons/bs";
import {toast} from "react-toastify";
import {useListSearch} from "@/hooks/useListSearch";

const searchFields = [["module"], ["id"], ["createdBy"]];

const CLASSES: {[key in Module]: string} = {
	reading: "text-ielts-reading",
	listening: "text-ielts-listening",
	speaking: "text-ielts-speaking",
	writing: "text-ielts-writing",
	level: "text-ielts-level",
};

const columnHelper = createColumnHelper<Exam>();

export default function ExamList({user}: {user: User}) {
	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 {rows: filteredRows, renderSearch} = useListSearch<Exam>(searchFields, parsedExams);

	const setExams = useExamStore((state) => state.setExams);
	const setSelectedModules = useExamStore((state) => state.setSelectedModules);

	const router = useRouter();

	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", {
				toastId: "invalid-exam-id",
			});

			return;
		}

		setExams([exam]);
		setSelectedModules([module]);

		router.push("/exercises");
	};

	const deleteExam = async (exam: Exam) => {
		if (!confirm(`Are you sure you want to delete this ${capitalize(exam.module)} exam?`)) return;

		axios
			.delete(`/api/exam/${exam.module}/${exam.id}`)
			.then(() => toast.success(`Deleted the "${exam.id}" exam`))
			.catch((reason) => {
				if (reason.response.status === 404) {
					toast.error("Exam not found!");
					return;
				}

				if (reason.response.status === 403) {
					toast.error("You do not have permission to delete this exam!");
					return;
				}

				toast.error("Something went wrong, please try again later.");
			})
			.finally(reload);
	};

	const getTotalExercises = (exam: Exam) => {
		if (exam.module === "reading" || exam.module === "listening" || exam.module === "level") {
			return countExercises(exam.parts.flatMap((x) => x.exercises));
		}

		return countExercises(exam.exercises);
	};

	const defaultColumns = [
		columnHelper.accessor("id", {
			header: "ID",
			cell: (info) => info.getValue(),
		}),
		columnHelper.accessor("module", {
			header: "Module",
			cell: (info) => <span className={CLASSES[info.getValue()]}>{capitalize(info.getValue())}</span>,
		}),
		columnHelper.accessor((x) => getTotalExercises(x), {
			header: "Exercises",
			cell: (info) => info.getValue(),
		}),
		columnHelper.accessor("minTimer", {
			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}}) => {
				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)}>
							<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)}>
								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
							</div>
						)}
					</div>
				);
			},
		},
	];

	const table = useReactTable({
		data: filteredRows,
		columns: defaultColumns,
		getCoreRowModel: getCoreRowModel(),
	});

	return (
		<div className="flex flex-col gap-4 w-full h-full">
			{renderSearch()}
			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
				<thead>
					{table.getHeaderGroups().map((headerGroup) => (
						<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())}
								</th>
							))}
						</tr>
					))}
				</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}>
							{row.getVisibleCells().map((cell) => (
								<td className="px-4 py-2" key={cell.id}>
									{flexRender(cell.column.columnDef.cell, cell.getContext())}
								</td>
							))}
						</tr>
					))}
				</tbody>
			</table>
		</div>
	);
}