tab-seperated modals + eslint fix + much more bug fixed and improvements

components/Modal/Collection/CollectionInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { Dispatch, SetStateAction } from "react";
 import {
   faFolder,
   faPenToSquare,
@@ -13,18 +13,17 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props = {
   toggleCollectionModal: Function;
-  activeCollection: CollectionIncludingMembers;
+  setCollection: Dispatch<SetStateAction<CollectionIncludingMembers>>;
+  collection: CollectionIncludingMembers;
   method: "CREATE" | "UPDATE";
 };
 
 export default function CollectionInfo({
   toggleCollectionModal,
-  activeCollection,
+  setCollection,
+  collection,
   method,
 }: Props) {
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembers>(activeCollection);
-
   const { updateCollection, addCollection } = useCollectionStore();
 
   const submit = async () => {
@@ -41,10 +40,6 @@ export default function CollectionInfo({
 
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="text-xl text-sky-500 mb-2 text-center">
-        {method === "CREATE" ? "Add" : "Edit"} Collection
-      </p>
-
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">
           <p className="text-sm text-sky-500 mb-2">

components/Modal/Collection/DeleteCollection.tsx

@@ -21,7 +21,7 @@ export default function DeleteCollection({
   const router = useRouter();
 
   const submit = async () => {
-    if (!collection.id) return null;
+    if (!collection.id || collection.name !== inputField) return null;
 
     const response = await removeCollection(collection.id);
     if (response) {
@@ -31,23 +31,56 @@ export default function DeleteCollection({
   };
 
   return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="text-xl text-sky-500 mb-2 text-center">Delete Collection</p>
+    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
+      <p className="text-red-500 font-bold text-center">Warning!</p>
 
-      <p className="text-sky-900 select-none text-center">
-        To confirm, type "
-        <span className="font-bold text-sky-500">{collection.name}</span>" in
-        the box below:
-      </p>
+      <div className="max-h-[20rem] overflow-y-auto">
+        <div className="text-gray-500">
+          <p>
+            Please note that deleting the collection will permanently remove all
+            its contents, including the following:
+          </p>
+          <div className="p-3">
+            <li className="list-inside">
+              Links: All links within the collection will be permanently
+              deleted.
+            </li>
+            <li className="list-inside">
+              Tags: All tags associated with the collection will be removed.
+            </li>
+            <li className="list-inside">
+              Screenshots/PDFs: Any screenshots or PDFs attached to links within
+              this collection will be permanently deleted.
+            </li>
+            <li className="list-inside">
+              Members: Any members who have been granted access to the
+              collection will lose their permissions and no longer be able to
+              view or interact with the content.
+            </li>
+          </div>
+          <p>
+            Please double-check that you have backed up any essential data and
+            have informed the relevant members about this action.
+          </p>
+        </div>
+      </div>
 
-      <input
-        autoFocus
-        value={inputField}
-        onChange={(e) => setInputField(e.target.value)}
-        type="text"
-        placeholder={`Type "${collection.name}" Here.`}
-        className=" w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-      />
+      <div className="flex flex-col gap-3">
+        <p className="text-sky-900 select-none text-center">
+          To confirm, type &quot;
+          <span className="font-bold text-sky-500">{collection.name}</span>
+          &quot; in the box below:
+        </p>
+
+        <input
+          autoFocus
+          value={inputField}
+          onChange={(e) => setInputField(e.target.value)}
+          type="text"
+          placeholder={`Type "${collection.name}" Here.`}
+          className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
+      </div>
 
       <div
         className={`mx-auto mt-2  text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 ${

components/Modal/Collection/TeamManagement.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faClose,
   faPenToSquare,
+  faPlus,
   faUserPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
@@ -15,16 +16,17 @@ import ProfilePhoto from "@/components/ProfilePhoto";
 
 type Props = {
   toggleCollectionModal: Function;
-  activeCollection: CollectionIncludingMembers;
+  setCollection: Dispatch<SetStateAction<CollectionIncludingMembers>>;
+  collection: CollectionIncludingMembers;
+  method: "CREATE" | "UPDATE";
 };
 
 export default function TeamManagement({
   toggleCollectionModal,
-  activeCollection,
+  setCollection,
+  collection,
+  method,
 }: Props) {
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembers>(activeCollection);
-
   const currentURL = new URL(document.URL);
 
   const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
@@ -39,7 +41,7 @@ export default function TeamManagement({
     },
   });
 
-  const { updateCollection } = useCollectionStore();
+  const { addCollection, updateCollection } = useCollectionStore();
 
   const session = useSession();
 
@@ -65,17 +67,17 @@ export default function TeamManagement({
   const submit = async () => {
     if (!collection) return null;
 
-    const response = await updateCollection(collection);
+    let response = null;
+
+    if (method === "CREATE") response = await addCollection(collection);
+    else if (method === "UPDATE") response = await updateCollection(collection);
+    else console.log("Unknown method.");
 
     if (response) toggleCollectionModal();
   };
 
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="text-xl text-sky-500 mb-2 text-center w-5/6 mx-auto">
-        Sharing & Collaboration
-      </p>
-
       <p className="text-sm text-sky-500">Make Public</p>
 
       <Checkbox
@@ -153,12 +155,12 @@ export default function TeamManagement({
           <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
         </div>
       </div>
-      {collection?.members[0]?.user ? (
+
+      {collection?.members[0]?.user && (
         <>
           <p className="text-center text-gray-500 text-xs sm:text-sm">
             (All Members have <b>Read</b> access to this collection.)
           </p>
-
           <div className="max-h-[20rem] overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
             {collection.members
               .sort((a, b) => (a.userId as number) - (b.userId as number))
@@ -297,12 +299,12 @@ export default function TeamManagement({
               })}
           </div>
         </>
-      ) : null}
+      )}
 
       <SubmitButton
         onClick={submit}
-        label="Edit Collection"
-        icon={faPenToSquare}
+        label={method === "CREATE" ? "Add Collection" : "Edit Collection"}
+        icon={method === "CREATE" ? faPlus : faPenToSquare}
         className="mx-auto mt-2"
       />
     </div>

components/Modal/Collection/index.tsx

@@ -0,0 +1,102 @@
+import { Tab } from "@headlessui/react";
+import CollectionInfo from "./CollectionInfo";
+import { CollectionIncludingMembers } from "@/types/global";
+import TeamManagement from "./TeamManagement";
+import { useState } from "react";
+import DeleteCollection from "./DeleteCollection";
+
+type Props = {
+  toggleCollectionModal: Function;
+  activeCollection: CollectionIncludingMembers;
+  method: "CREATE" | "UPDATE";
+  className?: string;
+  defaultIndex?: number;
+};
+
+export default function CollectionModal({
+  className,
+  defaultIndex,
+  toggleCollectionModal,
+  activeCollection,
+  method,
+}: Props) {
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembers>(activeCollection);
+
+  return (
+    <div className={className}>
+      <Tab.Group defaultIndex={defaultIndex}>
+        <p
+          className={`text-xl text-sky-500 text-center ${
+            method === "UPDATE" && "mb-5"
+          }`}
+        >
+          {method === "CREATE" && "Add"} Collection{" "}
+          {method === "UPDATE" && "Settings"}
+        </p>
+        <Tab.List className="flex justify-center flex-col sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600">
+          {method === "UPDATE" && (
+            <>
+              <Tab
+                className={({ selected }) =>
+                  selected
+                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                }
+              >
+                Collection Info
+              </Tab>
+              <Tab
+                className={({ selected }) =>
+                  selected
+                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                }
+              >
+                Share & Collaborate
+              </Tab>
+              <Tab
+                className={({ selected }) =>
+                  selected
+                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                }
+              >
+                Delete Collection
+              </Tab>
+            </>
+          )}
+        </Tab.List>
+        <Tab.Panels>
+          <Tab.Panel>
+            <CollectionInfo
+              toggleCollectionModal={toggleCollectionModal}
+              setCollection={setCollection}
+              collection={collection}
+              method={method}
+            />
+          </Tab.Panel>
+
+          {method === "UPDATE" && (
+            <>
+              <Tab.Panel>
+                <TeamManagement
+                  toggleCollectionModal={toggleCollectionModal}
+                  setCollection={setCollection}
+                  collection={collection}
+                  method={method}
+                />
+              </Tab.Panel>
+              <Tab.Panel>
+                <DeleteCollection
+                  toggleDeleteCollectionModal={toggleCollectionModal}
+                  collection={collection}
+                />
+              </Tab.Panel>
+            </>
+          )}
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+}