Added more options to the User List

src/constants/userPermissions.ts

@@ -15,4 +15,11 @@ export const PERMISSIONS = {
 		owner: ["developer", "owner"],
 		developer: ["developer"],
 	},
+	updateUser: {
+		student: ["teacher", "admin", "developer", "owner"],
+		teacher: ["admin", "developer", "owner"],
+		admin: ["owner", "developer"],
+		owner: ["developer", "owner"],
+		developer: ["developer"],
+	},
 };

src/hooks/useUsers.tsx

@@ -7,13 +7,15 @@ export default function useUsers() {
 	const [isLoading, setIsLoading] = useState(false);
 	const [isError, setIsError] = useState(false);
 
-	useEffect(() => {
+	const getData = () => {
 		setIsLoading(true);
 		axios
 			.get<User[]>("/api/users/list")
 			.then((response) => setUsers(response.data))
 			.finally(() => setIsLoading(false));
-	}, []);
+	};
 
-	return {users, isLoading, isError};
+	useEffect(getData, []);
+
+	return {users, isLoading, isError, reload: getData};
 }

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

@@ -1,15 +1,46 @@
+import Button from "@/components/Low/Button";
+import {PERMISSIONS} from "@/constants/userPermissions";
 import useUsers from "@/hooks/useUsers";
 import {Type, User} from "@/interfaces/user";
+import {Popover, Transition} from "@headlessui/react";
 import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
-import {useState} from "react";
+import {Fragment} from "react";
 import {BsCheck, BsPerson, BsTrash} from "react-icons/bs";
+import {toast} from "react-toastify";
 
 const columnHelper = createColumnHelper<User>();
 
-export default function UserList() {
+export default function UserList({user}: {user: User}) {
-	const {users} = useUsers();
+	const {users, reload} = useUsers();
+
+	const updateAccountType = (user: User, type: Type) => {
+		if (!confirm(`Are you sure you want to update ${user.name}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`)) return;
+
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, type})
+			.then(() => {
+				toast.success("User type updated successfully!");
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
+
+	const verifyAccount = (user: User) => {
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, isVerified: true})
+			.then(() => {
+				toast.success("User verified successfully!");
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
 
 	const defaultColumns = [
 		columnHelper.accessor("name", {
@@ -46,12 +77,66 @@ export default function UserList() {
 			cell: ({row}: {row: {original: User}}) => {
 				return (
 					<div className="flex gap-4">
+						{PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
+							<Popover className="relative">
+								<Popover.Button>
 									<div data-tip="Change Type" className="cursor-pointer tooltip">
 										<BsPerson className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 									</div>
+								</Popover.Button>
+								<Transition
+									as={Fragment}
+									enter="transition ease-out duration-200"
+									enterFrom="opacity-0 translate-y-1"
+									enterTo="opacity-100 translate-y-0"
+									leave="transition ease-in duration-150"
+									leaveFrom="opacity-100 translate-y-0"
+									leaveTo="opacity-0 translate-y-1">
+									<Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
+										<div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
+											<Button
+												onClick={() => updateAccountType(row.original, "student")}
+												className="text-sm !py-2 !px-4"
+												disabled={
+													row.original.type === "student" || !PERMISSIONS.generateCode["student"].includes(user.type)
+												}>
+												Student
+											</Button>
+											<Button
+												onClick={() => updateAccountType(row.original, "teacher")}
+												className="text-sm !py-2 !px-4"
+												disabled={
+													row.original.type === "teacher" || !PERMISSIONS.generateCode["teacher"].includes(user.type)
+												}>
+												Teacher
+											</Button>
+											<Button
+												onClick={() => updateAccountType(row.original, "admin")}
+												className="text-sm !py-2 !px-4"
+												disabled={row.original.type === "admin" || !PERMISSIONS.generateCode["admin"].includes(user.type)}>
+												Admin
+											</Button>
+											<Button
+												onClick={() => updateAccountType(row.original, "owner")}
+												className="text-sm !py-2 !px-4"
+												disabled={row.original.type === "owner" || !PERMISSIONS.generateCode["owner"].includes(user.type)}>
+												Owner
+											</Button>
+										</div>
+									</Popover.Panel>
+								</Transition>
+							</Popover>
+						)}
+						{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
 							<div data-tip="Delete" className="cursor-pointer tooltip">
 								<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>
+						)}
 					</div>
 				);
 			},

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

@@ -1,9 +1,10 @@
+import {User} from "@/interfaces/user";
 import {Tab} from "@headlessui/react";
 import clsx from "clsx";
 import ExamList from "./ExamList";
 import UserList from "./UserList";
 
-export default function Lists() {
+export default function Lists({user}: {user: User}) {
 	return (
 		<Tab.Group>
 			<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
@@ -32,7 +33,7 @@ export default function Lists() {
 			</Tab.List>
 			<Tab.Panels className="mt-2">
 				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
-					<UserList />
+					<UserList user={user} />
 				</Tab.Panel>
 				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
 					<ExamList />

src/pages/admin.tsx

@@ -63,7 +63,7 @@ export default function Admin() {
 						<CodeGenerator />
 					</section>
 					<section className="w-full">
-						<Lists />
+						<Lists user={user} />
 					</section>
 				</Layout>
 			)}

src/pages/api/users/update.ts

@@ -21,9 +21,15 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const userRef = doc(db, "users", req.session.user.id);
+	const userRef = doc(db, "users", req.query.id ? (req.query.id as string) : req.session.user.id);
 	const updatedUser = req.body as User & {password?: string; newPassword?: string};
 
+	if (!!req.query.id) {
+		await setDoc(userRef, updatedUser, {merge: true});
+		res.status(200).json({ok: true});
+		return;
+	}
+
 	if (updatedUser.profilePicture && updatedUser.profilePicture !== req.session.user.profilePicture) {
 		const profilePictureFiletype = updatedUser.profilePicture.split(";")[0].split("/")[1];
 		const profilePictureRef = ref(storage, `profile_pictures/${req.session.user.id}.${profilePictureFiletype}`);
@@ -62,8 +68,11 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
 	const docUser = await getDoc(doc(db, "users", req.session.user.id));
 	const user = docUser.data() as User;
+
+	if (!req.query.id) {
 		req.session.user = {...user, id: req.session.user.id};
 		await req.session.save();
+	}
 
 	res.status(200).json({user});
 }