recreated modals and many other components

pages/collections/[id].tsx

@@ -16,6 +16,8 @@ import NoLinksFound from "@/components/NoLinksFound";
 import useLocalSettingsStore from "@/store/localSettings";
 import useAccountStore from "@/store/account";
 import getPublicUserData from "@/lib/client/getPublicUserData";
+import EditCollectionModal from "@/components/Modals/EditCollectionModal";
+import EditCollectionSharingModal from "@/components/Modals/EditCollectionSharingModal";
 
 export default function Index() {
   const { setModal } = useModalStore();
@@ -71,13 +73,17 @@ export default function Index() {
     fetchOwner();
   }, [activeCollection]);
 
+  const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [editCollectionSharingModal, setEditCollectionSharingModal] =
+    useState(false);
+
   return (
     <MainLayout>
       <div
         style={{
           backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
             settings.theme === "dark" ? "#262626" : "#f3f4f6"
-          } 50%, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+          } 14rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
         }}
         className="h-full p-5 flex gap-3 flex-col"
       >
@@ -103,17 +109,7 @@ export default function Index() {
             <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
               <div
                 className="flex items-center btn px-2 btn-ghost rounded-full w-fit"
-                onClick={() =>
-                  activeCollection &&
-                  setModal({
-                    modal: "COLLECTION",
-                    state: true,
-                    method: "UPDATE",
-                    isOwner: permissions === true,
-                    active: activeCollection,
-                    defaultIndex: permissions === true ? 1 : 0,
-                  })
-                }
+                onClick={() => setEditCollectionSharingModal(true)}
               >
                 {collectionOwner.id ? (
                   <ProfilePhoto
@@ -156,7 +152,7 @@ export default function Index() {
           <p>{activeCollection?.description}</p>
         ) : undefined}
 
-        <hr className="border-1 border-neutral" />
+        <div className="divider my-0"></div>
 
         <div className="flex justify-between items-end gap-5">
           <p>Showing {activeCollection?._count?.links} results</p>
@@ -184,14 +180,7 @@ export default function Index() {
                         tabIndex={0}
                         onClick={() => {
                           (document?.activeElement as HTMLElement)?.blur();
-                          activeCollection &&
-                            setModal({
-                              modal: "COLLECTION",
-                              state: true,
-                              method: "UPDATE",
-                              isOwner: permissions === true,
-                              active: activeCollection,
-                            });
+                          setEditCollectionModal(true);
                         }}
                       >
                         Edit Collection Info
@@ -205,15 +194,7 @@ export default function Index() {
                       tabIndex={0}
                       onClick={() => {
                         (document?.activeElement as HTMLElement)?.blur();
-                        activeCollection &&
-                          setModal({
-                            modal: "COLLECTION",
-                            state: true,
-                            method: "UPDATE",
-                            isOwner: permissions === true,
-                            active: activeCollection,
-                            defaultIndex: permissions === true ? 1 : 0,
-                          });
+                        setEditCollectionSharingModal(true);
                       }}
                     >
                       {permissions === true
@@ -262,6 +243,22 @@ export default function Index() {
           <NoLinksFound />
         )}
       </div>
+      {activeCollection ? (
+        <>
+          <EditCollectionModal
+            isOpen={editCollectionModal}
+            onClose={() => setEditCollectionModal(false)}
+            modalId={"edit-collection-modal" + activeCollection.id}
+            activeCollection={activeCollection}
+          />
+          <EditCollectionSharingModal
+            isOpen={editCollectionSharingModal}
+            onClose={() => setEditCollectionSharingModal(false)}
+            modalId={"edit-collection-sharing-modal" + activeCollection.id}
+            activeCollection={activeCollection}
+          />
+        </>
+      ) : undefined}
     </MainLayout>
   );
 }

pages/collections/index.tsx

@@ -6,7 +6,6 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import CollectionCard from "@/components/CollectionCard";
-import Dropdown from "@/components/Dropdown";
 import { useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import { useSession } from "next-auth/react";
@@ -28,8 +27,7 @@ export default function Collections() {
 
   useSort({ sortBy, setData: setSortedCollections, data: collections });
 
-  const [newModalIsOpen, setNewModalIsOpen] = useState(false);
-  const closeNewModal = () => setNewModalIsOpen(false);
+  const [newCollectionModal, setNewCollectionModal] = useState(false);
 
   return (
     <MainLayout>
@@ -99,7 +97,7 @@ export default function Collections() {
 
           <div
             className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group btn"
-            onClick={() => setNewModalIsOpen(true)}
+            onClick={() => setNewCollectionModal(true)}
           >
             <p className="group-hover:opacity-0 duration-100">New Collection</p>
             <FontAwesomeIcon
@@ -136,8 +134,8 @@ export default function Collections() {
         ) : undefined}
       </div>
       <NewCollectionModal
-        isOpen={newModalIsOpen}
-        onClose={closeNewModal}
+        isOpen={newCollectionModal}
+        onClose={() => setNewCollectionModal(false)}
         modalId="new-collection-modal-1"
       />
     </MainLayout>