Update the Group List to always allow editing for developers and admins

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

@@ -1,26 +1,28 @@
 import Button from "@/components/Low/Button";
-import Checkbox from "@/components/Low/Checkbox";
 import Input from "@/components/Low/Input";
+import Modal from "@/components/Modal";
 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 {
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import axios from "axios";
-import clsx from "clsx";
+import { capitalize, uniq } from "lodash";
-import {capitalize, uniq, uniqBy} from "lodash";
+import { useEffect, useState } from "react";
-import {useEffect, useRef, useState} from "react";
+import { BsPencil, BsQuestionCircleFill, BsTrash } from "react-icons/bs";
-import {BsCheck, BsDash, BsPencil, BsPlus, BsQuestionCircleFill, BsTrash} from "react-icons/bs";
-import {toast} from "react-toastify";
 import Select from "react-select";
-import {uuidv4} from "@firebase/util";
+import { toast } from "react-toastify";
-import {useFilePicker} from "use-file-picker";
-import Modal from "@/components/Modal";
 import readXlsxFile from "read-excel-file";
+import { useFilePicker } from "use-file-picker";
 
 const columnHelper = createColumnHelper<Group>();
-const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
+const EMAIL_REGEX = new RegExp(
+  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/,
+);
 
 interface CreateDialogProps {
   user: User;
@@ -30,9 +32,13 @@ interface CreateDialogProps {
 }
 
 const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
-	const [name, setName] = useState<string | undefined>(group?.name || undefined);
+  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 [participants, setParticipants] = useState<string[]>(
+    group?.participants || [],
+  );
   const { openFilePicker, filesContent, clear } = useFilePicker({
     accept: ".xlsx",
     multiple: false,
@@ -47,7 +53,10 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
           rows
             .map((row) => {
               const [email] = row as string[];
-							return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
+              return EMAIL_REGEX.test(email) &&
+                !users.map((u) => u.email).includes(email)
+                ? email.toString().trim()
+                : undefined;
             })
             .filter((x) => !!x),
         );
@@ -58,10 +67,14 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
           return;
         }
 
-				const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
+        const emailUsers = [...new Set(emails)]
+          .map((x) => users.find((y) => y.email.toLowerCase() === x))
+          .filter((x) => x !== undefined);
         const filteredUsers = emailUsers.filter(
           (x) =>
-						((user.type === "developer" || user.type === "admin" || user.type === "corporate") &&
+            ((user.type === "developer" ||
+              user.type === "admin" ||
+              user.type === "corporate") &&
               (x?.type === "student" || x?.type === "teacher")) ||
             (user.type === "teacher" && x?.type === "student"),
         );
@@ -80,13 +93,20 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 
   const submit = () => {
     if (name !== group?.name && (name === "Students" || name === "Teachers")) {
-			toast.error("That group name is reserved and cannot be used, please enter another one.");
+      toast.error(
+        "That group name is reserved and cannot be used, please enter another one.",
+      );
       return;
     }
 
-		(group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", {name, admin, participants})
+    (group ? axios.patch : axios.post)(
+      group ? `/api/groups/${group.id}` : "/api/groups",
+      { name, admin, participants },
+    )
       .then(() => {
-				toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
+        toast.success(
+          `Group "${name}" ${group ? "edited" : "created"} successfully`,
+        );
         return true;
       })
       .catch(() => {
@@ -97,17 +117,30 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
   };
 
   return (
-		<div className="flex flex-col gap-12 mt-4 w-full px-4 py-2">
+    <div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
       <div className="flex flex-col gap-8">
-				<Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
+        <Input
-				<div className="flex flex-col gap-3 w-full">
+          name="name"
-					<div className="flex gap-2 items-center">
+          type="text"
-						<label className="font-normal text-base text-mti-gray-dim">Participants</label>
+          label="Name"
-						<div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
+          defaultValue={name}
+          onChange={setName}
+          required
+          disabled={group?.disableEditing}
+        />
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <label className="text-mti-gray-dim text-base font-normal">
+              Participants
+            </label>
+            <div
+              className="tooltip"
+              data-tip="The Excel file should only include a column with the desired e-mails."
+            >
               <BsQuestionCircleFill />
             </div>
           </div>
-					<div className="flex gap-8 w-full">
+          <div className="flex w-full gap-8">
             <Select
               className="w-full"
               value={participants.map((x) => ({
@@ -120,7 +153,11 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
                 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"))
+                .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
@@ -138,18 +175,33 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
               }}
             />
             {user.type !== "teacher" && (
-							<Button className="w-full max-w-[300px]" onClick={openFilePicker} variant="outline">
+              <Button
-								{filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
+                className="w-full max-w-[300px]"
+                onClick={openFilePicker}
+                variant="outline"
+              >
+                {filesContent.length === 0
+                  ? "Upload participants Excel file"
+                  : filesContent[0].name}
               </Button>
             )}
           </div>
         </div>
       </div>
-			<div className="flex w-full justify-end items-center gap-8 mt-8">
+      <div className="mt-8 flex w-full items-center justify-end gap-8">
-				<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
+        <Button
+          variant="outline"
+          color="red"
+          className="w-full max-w-[200px]"
+          onClick={onClose}
+        >
           Cancel
         </Button>
-				<Button className="w-full max-w-[200px]" onClick={submit} disabled={!name}>
+        <Button
+          className="w-full max-w-[200px]"
+          onClick={submit}
+          disabled={!name}
+        >
           Submit
         </Button>
       </div>
@@ -165,7 +217,9 @@ export default function GroupList({user}: {user: User}) {
   const [filterByUser, setFilterByUser] = useState(false);
 
   const { users } = useUsers();
-	const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined);
+  const { groups, reload } = useGroups(
+    user && filterTypes.includes(user?.type) ? user.id : undefined,
+  );
 
   useEffect(() => {
     if (user && (user.type === "corporate" || user.type === "teacher")) {
@@ -195,7 +249,12 @@ export default function GroupList({user}: {user: User}) {
     columnHelper.accessor("admin", {
       header: "Admin",
       cell: (info) => (
-				<div className="tooltip" data-tip={capitalize(users.find((x) => x.id === info.getValue())?.type)}>
+        <div
+          className="tooltip"
+          data-tip={capitalize(
+            users.find((x) => x.id === info.getValue())?.type,
+          )}
+        >
           {users.find((x) => x.id === info.getValue())?.name}
         </div>
       ),
@@ -214,16 +273,29 @@ export default function GroupList({user}: {user: User}) {
       cell: ({ row }: { row: { original: Group } }) => {
         return (
           <>
-						{user && (user.type === "developer" || user.type === "admin" || user.id === row.original.admin) && (
+            {user &&
+              (user.type === "developer" ||
+                user.type === "admin" ||
+                user.id === row.original.admin) && (
                 <div className="flex gap-2">
-								{!row.original.disableEditing && (
+                  {(!row.original.disableEditing ||
-									<div data-tip="Edit" className="cursor-pointer tooltip" onClick={() => setEditingGroup(row.original)}>
+                    ["developer", "admin"].includes(user.type)) && (
-										<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                    <div
+                      data-tip="Edit"
+                      className="tooltip cursor-pointer"
+                      onClick={() => setEditingGroup(row.original)}
+                    >
+                      <BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
                     </div>
                   )}
-								{!row.original.disableEditing && (
+                  {(!row.original.disableEditing ||
-									<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteGroup(row.original)}>
+                    ["developer", "admin"].includes(user.type)) && (
-										<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                    <div
+                      data-tip="Delete"
+                      className="tooltip cursor-pointer"
+                      onClick={() => deleteGroup(row.original)}
+                    >
+                      <BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
                     </div>
                   )}
                 </div>
@@ -247,8 +319,12 @@ export default function GroupList({user}: {user: User}) {
   };
 
   return (
-		<div className="w-full h-full rounded-xl">
+    <div className="h-full w-full rounded-xl">
-			<Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
+      <Modal
+        isOpen={isCreating || !!editingGroup}
+        onClose={closeModal}
+        title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}
+      >
         <CreatePanel
           group={editingGroup}
           user={user}
@@ -260,19 +336,25 @@ export default function GroupList({user}: {user: User}) {
                     groups
                       .filter((g) => g.admin === user.id)
                       .flatMap((g) => g.participants)
-											.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
+                      .includes(u.id) ||
+                    groups.flatMap((g) => g.participants).includes(u.id),
                 )
               : users
           }
         />
       </Modal>
-			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+      <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
         <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())}
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
                 </th>
               ))}
             </tr>
@@ -280,7 +362,10 @@ export default function GroupList({user}: {user: User}) {
         </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}>
+            <tr
+              className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white"
+              key={row.id}
+            >
               {row.getVisibleCells().map((cell) => (
                 <td className="px-4 py-2" key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -293,7 +378,8 @@ export default function GroupList({user}: {user: User}) {
 
       <button
         onClick={() => setIsCreating(true)}
-				className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white">
+        className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out"
+      >
         New Group
       </button>
     </div>