Merge branch 'main' into update-listening-format

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

@@ -5,13 +5,13 @@ import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
 import {Module} from "@/interfaces";
 import {Group, User} from "@/interfaces/user";
-import {Disclosure} from "@headlessui/react";
+import {Disclosure, 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 {useEffect, useState} from "react";
-import {BsDash, BsPlus, BsTrash} from "react-icons/bs";
+import {useEffect, useRef, useState} from "react";
+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";
@@ -21,39 +21,27 @@ const columnHelper = createColumnHelper<Group>();
 interface CreateDialogProps {
 	user: User;
 	users: User[];
+	group?: Group;
 	onCreate: (group: Group) => void;
 }
 
-const CreatePanel = ({user, users, onCreate}: CreateDialogProps) => {
-	const [name, setName] = useState<string>();
-	const [isSelfAdmin, setIsSelfAdmin] = useState(true);
-	const [admin, setAdmin] = useState<string>(user.id);
-	const [participants, setParticipants] = useState<string[]>([]);
+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 || []);
 
 	return (
 		<div className="flex flex-col gap-12 mt-4 w-full px-4 py-2">
 			<div className="flex flex-col gap-8">
-				<Input name="name" type="text" label="Name" onChange={setName} required />
-				{!isSelfAdmin && user.type === "developer" && (
-					<Select
-						placeholder="Administrator"
-						options={users
-							.filter((x) => x.type === "teacher" || x.type === "admin")
-							.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
-						isSearchable
-						defaultValue={{value: user.id, label: `${user.email} - ${user.name}`}}
-						onChange={(value) => (value ? setAdmin(value.value) : setAdmin(user.id))}
-					/>
-				)}
-				{user.type === "developer" && (
-					<Checkbox isChecked={isSelfAdmin} onChange={setIsSelfAdmin}>
-						I am the group&apos;s administrator
-					</Checkbox>
-				)}
+				<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}`}))}
@@ -76,20 +64,31 @@ const CreatePanel = ({user, users, onCreate}: CreateDialogProps) => {
 				className="w-full max-w-[200px] self-end"
 				disabled={!name}
 				onClick={() => {
-					onCreate({name: name!, admin, participants, id: uuidv4()});
+					onCreate({name: name!, admin, participants, id: group?.id || uuidv4()});
 				}}>
-				Create
+				{!group ? "Create" : "Update"}
 			</Button>
 		</div>
 	);
 };
 
 export default function GroupList({user}: {user: User}) {
+	const [editingID, setEditingID] = useState<string>();
+	const [showDisclosure, setShowDisclosure] = useState(false);
 	const [filterByUser, setFilterByUser] = useState(false);
 
 	const {users} = useUsers();
 	const {groups, reload} = useGroups(filterByUser ? user.id : undefined);
 
+	useEffect(() => {
+		if (editingID) setShowDisclosure(true);
+	}, [editingID]);
+
+	useEffect(() => {
+		if (showDisclosure) document.getElementById("disclosure")?.scrollTo();
+		if (!showDisclosure) setEditingID(undefined);
+	}, [showDisclosure]);
+
 	useEffect(() => {
 		if (user && (user.type === "admin" || user.type === "teacher")) {
 			setFilterByUser(true);
@@ -110,6 +109,20 @@ export default function GroupList({user}: {user: User}) {
 			.finally(reload);
 	};
 
+	const updateGroup = (group: Group) => {
+		return axios
+			.patch<{ok: boolean}>(`/api/groups/${group.id}`, group)
+			.then(() => {
+				toast.success(`Group "${group.name}" created successfully`);
+				return true;
+			})
+			.catch(() => {
+				toast.error("Something went wrong, please try again later!");
+				return false;
+			})
+			.finally(reload);
+	};
+
 	const deleteGroup = (group: Group) => {
 		if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
 
@@ -152,9 +165,16 @@ export default function GroupList({user}: {user: User}) {
 				return (
 					<>
 						{(user.type === "developer" || user.type === "owner" || user.id === row.original.admin) && (
+							<div className="flex gap-2">
+								{editingID !== row.original.id && (
+									<div data-tip="Edit" className="cursor-pointer tooltip" onClick={() => setEditingID(row.original.id)}>
+										<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+									</div>
+								)}
 								<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteGroup(row.original)}>
 									<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 								</div>
+							</div>
 						)}
 					</>
 				);
@@ -194,33 +214,43 @@ export default function GroupList({user}: {user: User}) {
 					))}
 				</tbody>
 			</table>
-			<Disclosure>
-				{({open, close}) => (
 			<>
-						<Disclosure.Button
+				<div
 					className={clsx(
 						"w-full px-4 py-2 bg-mti-purple-ultralight/40 flex gap-2 items-center justify-center rounded-lg",
 						"transition duration-300 ease-in-out",
 						"hover:bg-mti-purple-ultralight cursor-pointer",
-							)}>
-							{!open ? <BsPlus className="w-6 h-6" /> : <BsDash className="w-6 h-6" />}
+					)}
+					onClick={() => setShowDisclosure((prev) => !prev)}>
+					{!showDisclosure ? <BsPlus className="w-6 h-6" /> : <BsDash className="w-6 h-6" />}
 
-							<span>{!open ? "Create group" : "Cancel"}</span>
-						</Disclosure.Button>
-						<Disclosure.Panel>
+					<span>{!showDisclosure ? "Create group" : "Cancel"}</span>
+				</div>
+				<Transition
+					show={showDisclosure}
+					enter="transition duration-100 ease-out"
+					enterFrom="transform scale-95 opacity-0"
+					enterTo="transform scale-100 opacity-100"
+					leave="transition duration-75 ease-out"
+					leaveFrom="transform scale-100 opacity-100"
+					leaveTo="transform scale-95 opacity-0">
+					<div id="#disclosure">
 						<CreatePanel
+							group={editingID ? groups.find((x) => x.id === editingID) : undefined}
 							user={user}
 							users={users}
 							onCreate={(group) => {
-									createGroup(group).then((result) => {
-										if (result) close();
+								(!editingID ? createGroup : updateGroup)(group).then((result) => {
+									if (result) {
+										setShowDisclosure(false);
+										setEditingID(undefined);
+									}
 								});
 							}}
 						/>
-						</Disclosure.Panel>
+					</div>
+				</Transition>
 			</>
-				)}
-			</Disclosure>
 		</>
 	);
 }

src/pages/api/groups/[id].ts

@@ -1,7 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type {NextApiRequest, NextApiResponse} from "next";
 import {app} from "@/firebase";
-import {getFirestore, collection, getDocs, getDoc, doc, deleteDoc} from "firebase/firestore";
+import {getFirestore, collection, getDocs, getDoc, doc, deleteDoc, setDoc} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Group} from "@/interfaces/user";
@@ -13,6 +13,7 @@ export default withIronSessionApiRoute(handler, sessionOptions);
 async function handler(req: NextApiRequest, res: NextApiResponse) {
 	if (req.method === "GET") await get(req, res);
 	if (req.method === "DELETE") await del(req, res);
+	if (req.method === "PATCH") await patch(req, res);
 
 	res.status(404).json(undefined);
 }
@@ -55,3 +56,25 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 
 	res.status(403).json({ok: false});
 }
+
+async function patch(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+
+	const snapshot = await getDoc(doc(db, "groups", id));
+	const group = {...snapshot.data(), id: snapshot.id} as Group;
+
+	const user = req.session.user;
+	if (user.type === "owner" || user.type === "developer" || user.id === group.admin) {
+		await setDoc(snapshot.ref, req.body, {merge: true});
+
+		res.status(200).json({ok: true});
+		return;
+	}
+
+	res.status(403).json({ok: false});
+}