Merge branch 'main' into update-listening-format

src/pages/(admin)/BatchCodeGenerator.tsx

@@ -0,0 +1,86 @@
+import Button from "@/components/Low/Button";
+import {Type} from "@/interfaces/user";
+import axios from "axios";
+import clsx from "clsx";
+import {capitalize} from "lodash";
+import {useEffect, useState} from "react";
+import {toast} from "react-toastify";
+import ShortUniqueId from "short-unique-id";
+import {useFilePicker} from "use-file-picker";
+
+export default function BatchCodeGenerator() {
+	const [emails, setEmails] = useState<string[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const {openFilePicker, filesContent} = useFilePicker({
+		accept: ".txt",
+		multiple: false,
+	});
+
+	useEffect(() => {
+		if (filesContent.length > 0) {
+			const file = filesContent[0];
+			const emails = file.content
+				.split("\n")
+				.filter((x) => new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/).test(x));
+
+			if (emails.length === 0) {
+				toast.error("Please upload a .txt file containing e-mails, one per line!");
+				return;
+			}
+
+			setEmails(emails);
+		}
+	}, [filesContent]);
+
+	const generateCode = (type: Type) => {
+		const uid = new ShortUniqueId();
+		const codes = emails.map(() => uid.randomUUID(6));
+
+		setIsLoading(true);
+		axios
+			.post("/api/code", {type, codes, emails})
+			.then(({data, status}) => {
+				if (data.ok) {
+					toast.success(`Successfully generated ${capitalize(type)} codes and they have been notified by e-mail!`, {toastId: "success"});
+					return;
+				}
+
+				if (status === 403) {
+					toast.error(`You do not have permission to generate ${capitalize(type)} codes!`, {toastId: "forbidden"});
+				}
+			})
+			.catch(({response: {status}}) => {
+				if (status === 403) {
+					toast.error(`You do not have permission to generate ${capitalize(type)} codes!`, {toastId: "forbidden"});
+					return;
+				}
+
+				toast.error(`Something went wrong, please try again later!`, {toastId: "error"});
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	return (
+		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
+			<label className="font-normal text-base text-mti-gray-dim">Choose a .txt file containing e-mails</label>
+			<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
+				{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
+			</Button>
+			<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
+			<div className="grid grid-cols-2 gap-4">
+				<Button className="w-48" variant="outline" onClick={() => generateCode("student")} disabled={emails.length === 0 || isLoading}>
+					Student
+				</Button>
+				<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")} disabled={emails.length === 0 || isLoading}>
+					Teacher
+				</Button>
+				<Button className="w-48" variant="outline" onClick={() => generateCode("admin")} disabled={emails.length === 0 || isLoading}>
+					Admin
+				</Button>
+				<Button className="w-48" variant="outline" onClick={() => generateCode("owner")} disabled={emails.length === 0 || isLoading}>
+					Owner
+				</Button>
+			</div>
+		</div>
+	);
+}

src/pages/(admin)/CodeGenerator.tsx

@@ -15,7 +15,7 @@ export default function CodeGenerator() {
 		const code = uid.randomUUID(6);
 
 		axios
-			.post("/api/code", {type, code})
+			.post("/api/code", {type, codes: [code]})
 			.then(({data, status}) => {
 				if (data.ok) {
 					toast.success(`Successfully generated a ${capitalize(type)} code!`, {toastId: "success"});

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

@@ -1,15 +1,17 @@
+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} from "@/interfaces/user";
+import {Type, User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 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, BsUpload} from "react-icons/bs";
+import {BsCheck, BsTrash, BsUpload} from "react-icons/bs";
 import {toast} from "react-toastify";
 
 const CLASSES: {[key in Module]: string} = {
@@ -21,8 +23,8 @@ const CLASSES: {[key in Module]: string} = {
 
 const columnHelper = createColumnHelper<Exam>();
 
-export default function ExamList() {
-	const {exams} = useExams();
+export default function ExamList({user}: {user: User}) {
+	const {exams, reload} = useExams();
 
 	const setExams = useExamStore((state) => state.setExams);
 	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
@@ -45,6 +47,28 @@ export default function ExamList() {
 		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") {
 			return exam.parts.flatMap((x) => x.exercises).length;
@@ -75,11 +99,18 @@ export default function ExamList() {
 			id: "actions",
 			cell: ({row}: {row: {original: Exam}}) => {
 				return (
-					<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 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>
 				);
 			},

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

@@ -15,6 +15,7 @@ import {BsCheck, BsDash, BsPencil, BsPlus, BsTrash} from "react-icons/bs";
 import {toast} from "react-toastify";
 import Select from "react-select";
 import {uuidv4} from "@firebase/util";
+import {useFilePicker} from "use-file-picker";
 
 const columnHelper = createColumnHelper<Group>();
 
@@ -29,6 +30,41 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
 	const [name, setName] = useState<string | undefined>(group?.name || undefined);
 	const [admin, setAdmin] = useState<string>(group?.admin || user.id);
 	const [participants, setParticipants] = useState<string[]>(group?.participants || []);
+	const {openFilePicker, filesContent} = useFilePicker({
+		accept: ".txt",
+		multiple: false,
+	});
+
+	useEffect(() => {
+		if (filesContent.length > 0) {
+			const file = filesContent[0];
+			const emails = file.content
+				.toLowerCase()
+				.split("\n")
+				.filter((x) => new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/).test(x));
+
+			if (emails.length === 0) {
+				toast.error("Please upload a .txt file containing e-mails, one per line!");
+				return;
+			}
+
+			const emailUsers = emails.map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
+			const filteredUsers = emailUsers.filter(
+				(x) =>
+					((user.type === "developer" || user.type === "owner" || user.type === "admin") &&
+						(x?.type === "student" || x?.type === "teacher")) ||
+					(user.type === "teacher" && x?.type === "student"),
+			);
+
+			setParticipants(filteredUsers.filter((x) => !!x).map((x) => x!.id));
+			toast.success(
+				user.type !== "teacher"
+					? "Added all teachers and students found in the file you've provided!"
+					: "Added all students found in the file you've provided!",
+				{toastId: "upload-success"},
+			);
+		}
+	}, [filesContent, user.type, users]);
 
 	return (
 		<div className="flex flex-col gap-12 mt-4 w-full px-4 py-2">
@@ -36,28 +72,38 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
 				<Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required />
 				<div className="flex flex-col gap-3 w-full">
 					<label className="font-normal text-base text-mti-gray-dim">Participants</label>
-					<Select
-						placeholder="Participants..."
-						defaultValue={participants.map((x) => ({
-							value: x,
-							label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
-						}))}
-						options={users
-							.filter((x) => (user.type === "teacher" ? x.type === "student" : x.type === "student" || x.type === "teacher"))
-							.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
-						onChange={(value) => setParticipants(value.map((x) => x.value))}
-						isMulti
-						isSearchable
-						styles={{
-							control: (styles) => ({
-								...styles,
-								backgroundColor: "white",
-								borderRadius: "999px",
-								padding: "1rem 1.5rem",
-								zIndex: "40",
-							}),
-						}}
-					/>
+					<div className="flex gap-8 w-full">
+						<Select
+							className="w-full"
+							value={participants.map((x) => ({
+								value: x,
+								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
+							}))}
+							placeholder="Participants..."
+							defaultValue={participants.map((x) => ({
+								value: x,
+								label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
+							}))}
+							options={users
+								.filter((x) => (user.type === "teacher" ? x.type === "student" : x.type === "student" || x.type === "teacher"))
+								.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
+							onChange={(value) => setParticipants(value.map((x) => x.value))}
+							isMulti
+							isSearchable
+							styles={{
+								control: (styles) => ({
+									...styles,
+									backgroundColor: "white",
+									borderRadius: "999px",
+									padding: "1rem 1.5rem",
+									zIndex: "40",
+								}),
+							}}
+						/>
+						<Button className="w-full max-w-[300px]" onClick={openFilePicker} variant="outline">
+							{filesContent.length === 0 ? "Upload participants .txt file" : filesContent[0].name}
+						</Button>
+					</div>
 				</div>
 			</div>
 			<Button
@@ -244,6 +290,7 @@ export default function GroupList({user}: {user: User}) {
 									if (result) {
 										setShowDisclosure(false);
 										setEditingID(undefined);
+										reload();
 									}
 								});
 							}}

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

@@ -8,7 +8,7 @@ import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
 import {Fragment} from "react";
-import {BsCheck, BsPerson, BsTrash} from "react-icons/bs";
+import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsStop, BsTrash} from "react-icons/bs";
 import {toast} from "react-toastify";
 
 const columnHelper = createColumnHelper<User>();
@@ -56,6 +56,27 @@ export default function UserList({user}: {user: User}) {
 			});
 	};
 
+	const toggleDisableAccount = (user: User) => {
+		if (
+			!confirm(
+				`Are you sure you want to ${user.isDisabled ? "enable" : "disable"} ${
+					user.name
+				}'s account? This change is usually related to their payment state.`,
+			)
+		)
+			return;
+
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, isDisabled: !user.isDisabled})
+			.then(() => {
+				toast.success(`User ${user.isDisabled ? "enabled" : "disabled"} successfully!`);
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
+
 	const defaultColumns = [
 		columnHelper.accessor("name", {
 			header: "Name",
@@ -141,16 +162,28 @@ export default function UserList({user}: {user: User}) {
 								</Transition>
 							</Popover>
 						)}
-						{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
-							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
-								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-							</div>
-						)}
 						{!row.original.isVerified && PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
 							<div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
 								<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 							</div>
 						)}
+						{PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
+							<div
+								data-tip={row.original.isDisabled ? "Enable User" : "Disable User"}
+								className="cursor-pointer tooltip"
+								onClick={() => toggleDisableAccount(row.original)}>
+								{row.original.isDisabled ? (
+									<BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+								) : (
+									<BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+								)}
+							</div>
+						)}
+						{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
+							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
+								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+							</div>
+						)}
 					</div>
 				);
 			},

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

@@ -48,7 +48,7 @@ export default function Lists({user}: {user: User}) {
 					<UserList user={user} />
 				</Tab.Panel>
 				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
-					<ExamList />
+					<ExamList user={user} />
 				</Tab.Panel>
 				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
 					<GroupList user={user} />