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

import Button from "@/components/Low/Button";
import Checkbox from "@/components/Low/Checkbox";
import Input from "@/components/Low/Input";
import useGroups from "@/hooks/useGroups";
import useUsers from "@/hooks/useUsers";
import {Module} from "@/interfaces";
import {Group, User} from "@/interfaces/user";
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, 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";

const columnHelper = createColumnHelper<Group>();

interface CreateDialogProps {
	user: User;
	users: User[];
	group?: Group;
	onCreate: (group: Group) => void;
}

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" 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>
			</div>
			<Button
				className="w-full max-w-[200px] self-end"
				disabled={!name}
				onClick={() => {
					onCreate({name: name!, admin, participants, id: group?.id || uuidv4()});
				}}>
				{!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);
		}
	}, [user]);

	const createGroup = (group: Group) => {
		return axios
			.post<{ok: boolean}>("/api/groups", 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 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;

		axios
			.delete<{ok: boolean}>(`/api/groups/${group.id}`)
			.then(() => toast.success(`Group "${group.name}" deleted successfully`))
			.catch(() => toast.error("Something went wrong, please try again later!"))
			.finally(reload);
	};

	const defaultColumns = [
		columnHelper.accessor("id", {
			header: "ID",
			cell: (info) => info.getValue(),
		}),
		columnHelper.accessor("name", {
			header: "Name",
			cell: (info) => info.getValue(),
		}),
		columnHelper.accessor("admin", {
			header: "Admin",
			cell: (info) => (
				<div className="tooltip" data-tip={capitalize(users.find((x) => x.id === info.getValue())?.type)}>
					{users.find((x) => x.id === info.getValue())?.name}
				</div>
			),
		}),
		columnHelper.accessor("participants", {
			header: "Participants",
			cell: (info) =>
				info
					.getValue()
					.map((x) => users.find((y) => y.id === x)?.name)
					.join(", "),
		}),
		{
			header: "",
			id: "actions",
			cell: ({row}: {row: {original: Group}}) => {
				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>
						)}
					</>
				);
			},
		},
	];

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

	return (
		<>
			<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="py-4" 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
					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",
					)}
					onClick={() => setShowDisclosure((prev) => !prev)}>
					{!showDisclosure ? <BsPlus className="w-6 h-6" /> : <BsDash className="w-6 h-6" />}

					<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) => {
								(!editingID ? createGroup : updateGroup)(group).then((result) => {
									if (result) {
										setShowDisclosure(false);
										setEditingID(undefined);
									}
								});
							}}
						/>
					</div>
				</Transition>
			</>
		</>
	);
}