bug fix + code cleanup

components/CollectionCard.tsx

@@ -5,10 +5,9 @@ import { CollectionIncludingMembers } from "@/types/global";
 import useLinkStore from "@/store/links";
 import Dropdown from "./Dropdown";
 import { useState } from "react";
-import Modal from "@/components/Modal";
-import CollectionModal from "@/components/Modal/Collection";
 import ProfilePhoto from "./ProfilePhoto";
 import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
+import useModalStore from "@/store/modals";
 
 type Props = {
   collection: CollectionIncludingMembers;
@@ -16,6 +15,8 @@ type Props = {
 };
 
 export default function CollectionCard({ collection, className }: Props) {
+  const { setModal } = useModalStore();
+
   const { links } = useLinkStore();
   const formattedDate = new Date(collection.createdAt as string).toLocaleString(
     "en-US",
@@ -27,21 +28,6 @@ export default function CollectionCard({ collection, className }: Props) {
   );
 
   const [expandDropdown, setExpandDropdown] = useState(false);
-  const [editCollectionModal, setEditCollectionModal] = useState(false);
-  const [collectionMembersModal, setCollectionMembersModal] = useState(false);
-  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
-
-  const toggleEditCollectionModal = () => {
-    setEditCollectionModal(!editCollectionModal);
-  };
-
-  const toggleCollectionMembersModal = () => {
-    setCollectionMembersModal(!collectionMembersModal);
-  };
-
-  const toggleDeleteCollectionModal = () => {
-    setDeleteCollectionModal(!deleteCollectionModal);
-  };
 
   return (
     <div
@@ -103,21 +89,38 @@ export default function CollectionCard({ collection, className }: Props) {
             {
               name: "Edit Collection",
               onClick: () => {
-                toggleEditCollectionModal();
+                setModal({
+                  modal: "COLLECTION",
+                  state: true,
+                  method: "UPDATE",
+                  active: collection,
+                });
                 setExpandDropdown(false);
               },
             },
             {
               name: "Share/Collaborate",
               onClick: () => {
-                toggleCollectionMembersModal();
+                setModal({
+                  modal: "COLLECTION",
+                  state: true,
+                  method: "UPDATE",
+                  active: collection,
+                  defaultIndex: 1,
+                });
                 setExpandDropdown(false);
               },
             },
             {
               name: "Delete Collection",
               onClick: () => {
-                toggleDeleteCollectionModal();
+                setModal({
+                  modal: "COLLECTION",
+                  state: true,
+                  method: "UPDATE",
+                  active: collection,
+                  defaultIndex: 2,
+                });
                 setExpandDropdown(false);
               },
             },
@@ -130,35 +133,6 @@ export default function CollectionCard({ collection, className }: Props) {
           className="absolute top-[3.2rem] right-5 z-10 w-36"
         />
       ) : null}
-      {editCollectionModal ? (
-        <Modal toggleModal={toggleEditCollectionModal}>
-          <CollectionModal
-            toggleCollectionModal={toggleEditCollectionModal}
-            activeCollection={collection}
-            method="UPDATE"
-          />
-        </Modal>
-      ) : null}
-      {collectionMembersModal ? (
-        <Modal toggleModal={toggleCollectionMembersModal}>
-          <CollectionModal
-            defaultIndex={1}
-            toggleCollectionModal={toggleCollectionMembersModal}
-            activeCollection={collection}
-            method="UPDATE"
-          />
-        </Modal>
-      ) : null}
-      {deleteCollectionModal ? (
-        <Modal toggleModal={toggleDeleteCollectionModal}>
-          <CollectionModal
-            defaultIndex={2}
-            activeCollection={collection}
-            toggleCollectionModal={toggleDeleteCollectionModal}
-            method="UPDATE"
-          />
-        </Modal>
-      ) : null}
     </div>
   );
 }

components/LinkCard.tsx

@@ -13,10 +13,9 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Dropdown from "./Dropdown";
 import useLinkStore from "@/store/links";
-import Modal from "./Modal";
-import LinkModal from "./Modal/LinkModal";
 import Link from "next/link";
 import useCollectionStore from "@/store/collections";
+import useModalStore from "@/store/modals";
 
 type Props = {
   link: LinkIncludingCollectionAndTags;
@@ -25,8 +24,9 @@ type Props = {
 };
 
 export default function LinkCard({ link, count, className }: Props) {
+  const { setModal } = useModalStore();
+
   const [expandDropdown, setExpandDropdown] = useState(false);
-  const [editModal, setEditModal] = useState(false);
 
   const { collections } = useCollectionStore();
 
@@ -56,25 +56,11 @@ export default function LinkCard({ link, count, className }: Props) {
     }
   );
 
-  const toggleEditModal = () => {
-    setEditModal(!editModal);
-  };
-
   return (
     <div
       className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-sm p-5 rounded-2xl relative group/item ${className}`}
     >
       <div className="flex items-start gap-5 sm:gap-10 h-full w-full">
-        {editModal ? (
-          <Modal toggleModal={toggleEditModal}>
-            <LinkModal
-              toggleLinkModal={toggleEditModal}
-              activeLink={link}
-              method="UPDATE"
-            />
-          </Modal>
-        ) : null}
-
         <Image
           src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
           width={42}
@@ -203,7 +189,12 @@ export default function LinkCard({ link, count, className }: Props) {
                   {
                     name: "Edit",
                     onClick: () => {
-                      setEditModal(true);
+                      setModal({
+                        modal: "LINK",
+                        state: true,
+                        method: "UPDATE",
+                        active: link,
+                      });
                       setExpandDropdown(false);
                     },
                   },

components/Modal/User/ProfileSettings.tsx

@@ -80,7 +80,7 @@ export default function ProfileSettings({
           <div className="w-28 h-28 flex items-center justify-center border border-sky-100 rounded-full relative">
             <ProfilePhoto
               src={user.profilePic}
-              className="h-28 w-28 border-[1px]"
+              className="h-auto aspect-square w-28 border-[0px]"
               status={handleProfileStatus}
             />
             {profileStatus && (

components/ModalManagement.tsx

@@ -0,0 +1,51 @@
+import useModalStore from "@/store/modals";
+import Modal from "./Modal";
+import LinkModal from "./Modal/LinkModal";
+import {
+  AccountSettings,
+  CollectionIncludingMembers,
+  LinkIncludingCollectionAndTags,
+} from "@/types/global";
+import CollectionModal from "./Modal/Collection";
+import UserModal from "./Modal/User";
+
+export default function ModalManagement() {
+  const { modal, setModal } = useModalStore();
+
+  const toggleModal = () => {
+    setModal(null);
+  };
+
+  if (modal && modal.modal === "LINK")
+    return (
+      <Modal toggleModal={toggleModal}>
+        <LinkModal
+          toggleLinkModal={toggleModal}
+          method={modal.method}
+          activeLink={modal.active as LinkIncludingCollectionAndTags}
+        />
+      </Modal>
+    );
+  else if (modal && modal.modal === "COLLECTION")
+    return (
+      <Modal toggleModal={toggleModal}>
+        <CollectionModal
+          toggleCollectionModal={toggleModal}
+          method={modal.method}
+          defaultIndex={modal.defaultIndex}
+          activeCollection={modal.active as CollectionIncludingMembers}
+        />
+      </Modal>
+    );
+  else if (modal && modal.modal === "ACCOUNT")
+    return (
+      <Modal toggleModal={toggleModal}>
+        <UserModal
+          toggleSettingsModal={toggleModal}
+          defaultIndex={modal.defaultIndex}
+          activeUser={modal.active as AccountSettings}
+        />
+      </Modal>
+    );
+  else return <></>;
+}

components/Navbar.tsx

@@ -7,23 +7,21 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
 import Dropdown from "@/components/Dropdown";
-import Modal from "@/components/Modal";
-import LinkModal from "@/components/Modal/LinkModal";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
 import { useRouter } from "next/router";
 import Search from "@/components/Search";
-import UserModal from "@/components/Modal/User";
 import useAccountStore from "@/store/account";
 import ProfilePhoto from "@/components/ProfilePhoto";
+import useModalStore from "@/store/modals";
 
 export default function Navbar() {
+  const { setModal } = useModalStore();
+
   const { account } = useAccountStore();
 
   const [profileDropdown, setProfileDropdown] = useState(false);
 
-  const [linkModal, setLinkModal] = useState(false);
-  const [settingsModal, setSettingsModal] = useState(false);
   const [sidebar, setSidebar] = useState(false);
 
   const router = useRouter();
@@ -38,14 +36,6 @@ export default function Navbar() {
     setSidebar(!sidebar);
   };
 
-  const toggleLinkModal = () => {
-    setLinkModal(!linkModal);
-  };
-
-  const toggleSettingsModal = () => {
-    setSettingsModal(!settingsModal);
-  };
-
   return (
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
       <div
@@ -57,7 +47,13 @@ export default function Navbar() {
       <Search />
       <div className="flex items-center gap-2">
         <div
-          onClick={toggleLinkModal}
+          onClick={() => {
+            setModal({
+              modal: "LINK",
+              state: true,
+              method: "CREATE",
+            });
+          }}
           className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-500 sm:text-white sm:bg-sky-500 sm:hover:bg-sky-400 duration-100 group"
         >
           <FontAwesomeIcon
@@ -102,7 +98,12 @@ export default function Navbar() {
                 {
                   name: "Settings",
                   onClick: () => {
-                    toggleSettingsModal();
+                    setModal({
+                      modal: "ACCOUNT",
+                      state: true,
+                      method: "CREATE",
+                      active: account,
+                    });
                     setProfileDropdown(!profileDropdown);
                   },
                 },
@@ -122,21 +123,6 @@ export default function Navbar() {
             />
           ) : null}
 
-          {linkModal ? (
-            <Modal toggleModal={toggleLinkModal}>
-              <LinkModal toggleLinkModal={toggleLinkModal} method="CREATE" />
-            </Modal>
-          ) : null}
-
-          {settingsModal ? (
-            <Modal toggleModal={toggleSettingsModal}>
-              <UserModal
-                toggleSettingsModal={toggleSettingsModal}
-                activeUser={account}
-              />
-            </Modal>
-          ) : null}
-
           {sidebar ? (
             <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
               <ClickAwayHandler onClickOutside={toggleSidebar}>

layouts/MainLayout.tsx

@@ -5,6 +5,7 @@ import { useSession } from "next-auth/react";
 import Loader from "../components/Loader";
 import useRedirect from "@/hooks/useRedirect";
 import { useRouter } from "next/router";
+import ModalManagement from "@/components/ModalManagement";
 
 interface Props {
   children: ReactNode;
@@ -18,16 +19,20 @@ export default function MainLayout({ children }: Props) {
 
   if (status === "authenticated" && !redirect && routeExists)
     return (
-      <div className="flex">
+      <>
-        <div className="hidden lg:block">
+        <ModalManagement />
-          <Sidebar className="fixed" />
-        </div>
 
-        <div className="w-full lg:ml-64 xl:ml-80">
+        <div className="flex">
-          <Navbar />
+          <div className="hidden lg:block">
-          {children}
+            <Sidebar className="fixed" />
+          </div>
+
+          <div className="w-full lg:ml-64 xl:ml-80">
+            <Navbar />
+            {children}
+          </div>
         </div>
-      </div>
+      </>
     );
   else if ((status === "unauthenticated" && !redirect) || !routeExists)
     return <>{children}</>;

pages/collections/[id].tsx

@@ -1,8 +1,5 @@
 import Dropdown from "@/components/Dropdown";
 import LinkCard from "@/components/LinkCard";
-import Modal from "@/components/Modal";
-import LinkModal from "@/components/Modal/LinkModal";
-import CollectionModal from "@/components/Modal/Collection";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
 import { CollectionIncludingMembers } from "@/types/global";
@@ -18,8 +15,11 @@ import MainLayout from "@/layouts/MainLayout";
 import { useSession } from "next-auth/react";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import SortLinkDropdown from "@/components/SortLinkDropdown";
+import useModalStore from "@/store/modals";
 
 export default function Index() {
+  const { setModal } = useModalStore();
+
   const router = useRouter();
 
   const { links } = useLinkStore();
@@ -28,10 +28,6 @@ export default function Index() {
   const { data } = useSession();
 
   const [expandDropdown, setExpandDropdown] = useState(false);
-  const [linkModal, setLinkModal] = useState(false);
-  const [collectionInfoModal, setCollectionInfoModal] = useState(false);
-  const [collectionMembersModal, setCollectionMembersModal] = useState(false);
-  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
   const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState("Name (A-Z)");
 
@@ -40,22 +36,6 @@ export default function Index() {
 
   const [sortedLinks, setSortedLinks] = useState(links);
 
-  const toggleLinkModal = () => {
-    setLinkModal(!linkModal);
-  };
-
-  const toggleCollectionInfoModal = () => {
-    setCollectionInfoModal(!collectionInfoModal);
-  };
-
-  const toggleCollectionMembersModal = () => {
-    setCollectionMembersModal(!collectionMembersModal);
-  };
-
-  const toggleDeleteCollectionModal = () => {
-    setDeleteCollectionModal(!deleteCollectionModal);
-  };
-
   const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSortBy(event.target.value);
   };
@@ -124,7 +104,16 @@ export default function Index() {
                 }`}
               >
                 <div
-                  onClick={toggleCollectionMembersModal}
+                  onClick={() =>
+                    activeCollection &&
+                    setModal({
+                      modal: "COLLECTION",
+                      state: true,
+                      method: "UPDATE",
+                      active: activeCollection,
+                      defaultIndex: 1,
+                    })
+                  }
                   className="flex justify-center sm:justify-end items-center w-fit mx-auto sm:mr-0 sm:ml-auto group cursor-pointer"
                 >
                   <div
@@ -203,28 +192,52 @@ export default function Index() {
                       {
                         name: "Add Link Here",
                         onClick: () => {
-                          toggleLinkModal();
+                          setModal({
+                            modal: "LINK",
+                            state: true,
+                            method: "CREATE",
+                          });
                           setExpandDropdown(false);
                         },
                       },
                       {
                         name: "Edit Collection Info",
                         onClick: () => {
-                          toggleCollectionInfoModal();
+                          activeCollection &&
+                            setModal({
+                              modal: "COLLECTION",
+                              state: true,
+                              method: "UPDATE",
+                              active: activeCollection,
+                            });
                           setExpandDropdown(false);
                         },
                       },
                       {
                         name: "Share/Collaborate",
                         onClick: () => {
-                          toggleCollectionMembersModal();
+                          activeCollection &&
+                            setModal({
+                              modal: "COLLECTION",
+                              state: true,
+                              method: "UPDATE",
+                              active: activeCollection,
+                              defaultIndex: 1,
+                            });
                           setExpandDropdown(false);
                         },
                       },
                       {
                         name: "Delete Collection",
                         onClick: () => {
-                          toggleDeleteCollectionModal();
+                          activeCollection &&
+                            setModal({
+                              modal: "COLLECTION",
+                              state: true,
+                              method: "UPDATE",
+                              active: activeCollection,
+                              defaultIndex: 2,
+                            });
                           setExpandDropdown(false);
                         },
                       },
@@ -237,47 +250,6 @@ export default function Index() {
                     className="absolute top-8 right-0 z-10 w-40"
                   />
                 ) : null}
-
-                {linkModal ? (
-                  <Modal toggleModal={toggleLinkModal}>
-                    <LinkModal
-                      toggleLinkModal={toggleLinkModal}
-                      method="CREATE"
-                    />
-                  </Modal>
-                ) : null}
-
-                {collectionInfoModal && activeCollection ? (
-                  <Modal toggleModal={toggleCollectionInfoModal}>
-                    <CollectionModal
-                      toggleCollectionModal={toggleCollectionInfoModal}
-                      activeCollection={activeCollection}
-                      method="UPDATE"
-                    />
-                  </Modal>
-                ) : null}
-
-                {collectionMembersModal && activeCollection ? (
-                  <Modal toggleModal={toggleCollectionMembersModal}>
-                    <CollectionModal
-                      defaultIndex={1}
-                      toggleCollectionModal={toggleCollectionMembersModal}
-                      activeCollection={activeCollection}
-                      method="UPDATE"
-                    />
-                  </Modal>
-                ) : null}
-
-                {deleteCollectionModal && activeCollection ? (
-                  <Modal toggleModal={toggleDeleteCollectionModal}>
-                    <CollectionModal
-                      defaultIndex={2}
-                      toggleCollectionModal={toggleDeleteCollectionModal}
-                      activeCollection={activeCollection}
-                      method="UPDATE"
-                    />
-                  </Modal>
-                ) : null}
               </div>
             </div>
           </div>

pages/collections/index.tsx

@@ -9,12 +9,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import CollectionCard from "@/components/CollectionCard";
 import Dropdown from "@/components/Dropdown";
 import { ChangeEvent, useEffect, useState } from "react";
-import Modal from "@/components/Modal";
 import MainLayout from "@/layouts/MainLayout";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import RadioButton from "@/components/RadioButton";
-import CollectionModal from "@/components/Modal/Collection";
 import { useSession } from "next-auth/react";
+import useModalStore from "@/store/modals";
 
 export default function Collections() {
   const { collections } = useCollectionStore();
@@ -23,13 +22,9 @@ export default function Collections() {
   const [sortBy, setSortBy] = useState("Name (A-Z)");
   const [sortedCollections, setSortedCollections] = useState(collections);
 
-  const [collectionModal, setCollectionModal] = useState(false);
-
   const session = useSession();
 
-  const toggleCollectionModal = () => {
+  const { setModal } = useModalStore();
-    setCollectionModal(!collectionModal);
-  };
 
   const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSortBy(event.target.value);
@@ -109,7 +104,19 @@ export default function Collections() {
                     {
                       name: "New Collection",
                       onClick: () => {
-                        toggleCollectionModal();
+                        setModal({
+                          modal: "COLLECTION",
+                          state: true,
+                          method: "CREATE",
+                          active: {
+                            name: "",
+                            description: "",
+                            color: "#0ea5e9",
+                            isPublic: false,
+                            ownerId: session.data?.user.id as number,
+                            members: [],
+                          },
+                        });
                         setExpandDropdown(false);
                       },
                     },
@@ -198,7 +205,21 @@ export default function Collections() {
 
           <div
             className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
-            onClick={toggleCollectionModal}
+            onClick={() => {
+              setModal({
+                modal: "COLLECTION",
+                state: true,
+                method: "CREATE",
+                active: {
+                  name: "",
+                  description: "",
+                  color: "#0ea5e9",
+                  isPublic: false,
+                  ownerId: session.data?.user.id as number,
+                  members: [],
+                },
+              });
+            }}
           >
             <p className="text-sky-900 group-hover:opacity-0 duration-100">
               New Collection
@@ -210,23 +231,6 @@ export default function Collections() {
           </div>
         </div>
       </div>
-
-      {collectionModal ? (
-        <Modal toggleModal={toggleCollectionModal}>
-          <CollectionModal
-            activeCollection={{
-              name: "",
-              description: "",
-              color: "#0ea5e9",
-              isPublic: false,
-              ownerId: session.data?.user.id as number,
-              members: [],
-            }}
-            toggleCollectionModal={toggleCollectionModal}
-            method="CREATE"
-          />
-        </Modal>
-      ) : null}
     </MainLayout>
   );
 }

store/modals.ts

@@ -0,0 +1,48 @@
+import {
+  AccountSettings,
+  CollectionIncludingMembers,
+  LinkIncludingCollectionAndTags,
+} from "@/types/global";
+import { create } from "zustand";
+
+type Modal =
+  | {
+      modal: "ACCOUNT";
+      state: boolean;
+      active: AccountSettings;
+      defaultIndex?: number;
+    }
+  | {
+      modal: "LINK";
+      state: boolean;
+      method: "CREATE";
+      active?: LinkIncludingCollectionAndTags;
+    }
+  | {
+      modal: "LINK";
+      state: boolean;
+      method: "UPDATE";
+      active: LinkIncludingCollectionAndTags;
+    }
+  | {
+      modal: "COLLECTION";
+      state: boolean;
+      method: "CREATE" | "UPDATE";
+      active: CollectionIncludingMembers;
+      defaultIndex?: number;
+    }
+  | null;
+
+type ModalsStore = {
+  modal: Modal;
+  setModal: (modal: Modal) => void;
+};
+
+const useLocalSettingsStore = create<ModalsStore>((set) => ({
+  modal: null,
+  setModal: (modal: Modal) => {
+    set({ modal });
+  },
+}));
+
+export default useLocalSettingsStore;