improved DX

2023-12-01 17:42:45 -05:00 · 2023-12-01 17:42:45 -05:00 · 9e4502c015
parent a36769c521
commit 9e4502c015
17 changed files with 744 additions and 1016 deletions
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@ -192,24 +192,24 @@ export default function CollectionCard({ collection, className }: Props) {
          </div>
        </div>
      </Link>
+      {editCollectionModal ? (
        <EditCollectionModal
-        isOpen={editCollectionModal}
          onClose={() => setEditCollectionModal(false)}
-        modalId={"edit-collection-modal" + collection.id}
          activeCollection={collection}
        />
+      ) : undefined}
+      {editCollectionSharingModal ? (
        <EditCollectionSharingModal
-        isOpen={editCollectionSharingModal}
          onClose={() => setEditCollectionSharingModal(false)}
-        modalId={"edit-collection-sharing-modal" + collection.id}
          activeCollection={collection}
        />
+      ) : undefined}
+      {deleteCollectionModal ? (
        <DeleteCollectionModal
-        isOpen={deleteCollectionModal}
          onClose={() => setDeleteCollectionModal(false)}
-        modalId={"delete-collection-modal" + collection.id}
          activeCollection={collection}
        />
+      ) : undefined}
    </div>
  );
 }
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@ -118,7 +118,7 @@ export default function LinkCard({ link, count, className }: Props) {
    }
  );

-  const [newLinkModal, setNewLinkModal] = useState(false);
+  const [editLinkModal, setEditLinkModal] = useState(false);

  return (
    <div
@ -168,7 +168,7 @@ export default function LinkCard({ link, count, className }: Props) {
                  tabIndex={0}
                  onClick={() => {
                    (document?.activeElement as HTMLElement)?.blur();
-                    setNewLinkModal(true);
+                    setEditLinkModal(true);
                  }}
                >
                  Edit
@ -291,12 +291,12 @@ export default function LinkCard({ link, count, className }: Props) {
          </div>
        </div>
      </div>
+      {editLinkModal ? (
        <EditLinkModal
-        isOpen={newLinkModal}
-        onClose={() => setNewLinkModal(false)}
-        modalId={"edit-link-modal" + link.id}
+          onClose={() => setEditLinkModal(false)}
          activeLink={link}
        />
+      ) : undefined}
    </div>
  );
 }
--- a/components/Modal/Collection/index.tsx
+++ b/components/Modal/Collection/index.tsx
@ -2,7 +2,7 @@ import { Tab } from "@headlessui/react";
 import CollectionInfo from "./CollectionInfo";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import TeamManagement from "./TeamManagement";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import DeleteCollection from "./DeleteCollection";
 import ViewTeam from "./ViewTeam";

--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@ -1,7 +1,7 @@
-import { MouseEventHandler, ReactNode } from "react";
+import { MouseEventHandler, ReactNode, useEffect } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { faClose } from "@fortawesome/free-solid-svg-icons";

 type Props = {
  toggleModal: Function;
@ -14,17 +14,14 @@ export default function Modal({ toggleModal, className, children }: Props) {
    <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
      <ClickAwayHandler
        onClickOutside={toggleModal}
-        className={`m-auto ${className || ""}`}
+        className={`m-auto w-11/12 max-w-2xl ${className || ""}`}
      >
-        <div className="slide-up relative border-neutral-content rounded-2xl border-solid border shadow-lg p-5 bg-base-100">
+        <div className="slide-up m-auto relative border-neutral-content rounded-2xl border-solid border shadow-2xl p-5 bg-base-100">
          <div
            onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 z-20 p-2"
+            className="absolute top-3 right-3 btn btn-sm outline-none btn-circle btn-ghost"
          >
-            <FontAwesomeIcon
-              icon={faChevronLeft}
-              className="w-4 h-4 text-neutral"
-            />
+            <FontAwesomeIcon icon={faClose} className="w-4 h-4 text-neutral" />
          </div>
          {children}
        </div>
--- a/components/Modals/DeleteCollectionModal.tsx
+++ b/components/Modals/DeleteCollectionModal.tsx
@ -1,52 +1,32 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
-import toast, { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
 import {
-  faFolder,
  faRightFromBracket,
  faTrashCan,
 } from "@fortawesome/free-solid-svg-icons";
-import { HexColorPicker } from "react-colorful";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
+import Modal from "../Modal";

 type Props = {
-  modalId: string;
-  isOpen: boolean;
  onClose: Function;
  activeCollection: CollectionIncludingMembersAndLinkCount;
 };

 export default function DeleteCollectionModal({
-  modalId,
-  isOpen,
  onClose,
  activeCollection,
 }: Props) {
-  const modal = document.getElementById(modalId);
-
  const [collection, setCollection] =
    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);

  useEffect(() => {
-    modal?.scrollTo(0, 0);
-
    setCollection(activeCollection);
-    setInputField("");
-
-    modal?.addEventListener("close", () => {
-      onClose();
-    });
-
-    return () => {
-      modal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
+  }, []);

  const [submitLoader, setSubmitLoader] = useState(false);
  const { removeCollection } = useCollectionStore();
@ -74,7 +54,7 @@ export default function DeleteCollectionModal({

      if (response.ok) {
        toast.success(`Deleted.`);
-        (document.getElementById(modalId) as any).close();
+        onClose();
        router.push("/collections");
      } else toast.error(response.data as string);

@ -83,26 +63,7 @@ export default function DeleteCollectionModal({
  };

  return (
-    <dialog
-      id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto p-5"
-      open={isOpen}
-    >
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-        toastOptions={{
-          className:
-            "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
-        }}
-      />
-      <div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
-        <form method="dialog">
-          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
-            ✕
-          </button>
-        </form>
-
+    <Modal toggleModal={onClose}>
      <p className="text-xl mb-5 font-thin text-red-500">
        {permissions === true ? "Delete" : "Leave"} Collection
      </p>
@ -144,8 +105,8 @@ export default function DeleteCollectionModal({
                  Warning: Deleting this collection will permanently erase all
                  its contents
                </b>
-                  , and it will become inaccessible to everyone, including
-                  members with previous access.
+                , and it will become inaccessible to everyone, including members
+                with previous access.
              </span>
            </div>
          </>
@ -171,10 +132,6 @@ export default function DeleteCollectionModal({
          {permissions === true ? "Delete" : "Leave"} Collection
        </button>
      </div>
-      </div>
-      <form method="dialog" className="modal-backdrop">
-        <button>close</button>
-      </form>
-    </dialog>
+    </Modal>
  );
 }
--- a/components/Modals/EditCollectionModal.tsx
+++ b/components/Modals/EditCollectionModal.tsx
@ -6,37 +6,17 @@ import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { HexColorPicker } from "react-colorful";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import Modal from "../Modal";

 type Props = {
-  modalId: string;
-  isOpen: boolean;
  onClose: Function;
  activeCollection: CollectionIncludingMembersAndLinkCount;
 };

 export default function EditCollectionModal({
-  modalId,
-  isOpen,
  onClose,
  activeCollection,
 }: Props) {
-  const modal = document.getElementById(modalId);
-
-  useEffect(() => {
-    modal?.scrollTo(0, 0);
-    setCollection(activeCollection);
-
-    modal?.addEventListener("close", () => {
-      onClose();
-    });
-
-    return () => {
-      modal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
-
  const [collection, setCollection] =
    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);

@ -60,7 +40,7 @@ export default function EditCollectionModal({

      if (response.ok) {
        toast.success(`Updated!`);
-        (document.getElementById(modalId) as any).close();
+        onClose();
      } else toast.error(response.data as string);

      setSubmitLoader(false);
@ -68,26 +48,7 @@ export default function EditCollectionModal({
  };

  return (
-    <dialog
-      id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto p-5"
-      open={isOpen}
-    >
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-        toastOptions={{
-          className:
-            "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
-        }}
-      />
-      <div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
-        <form method="dialog">
-          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
-            ✕
-          </button>
-        </form>
-
+    <Modal toggleModal={onClose}>
      <p className="text-xl mb-5 font-thin">Edit Collection Info</p>

      <div className="flex flex-col gap-3">
@ -124,9 +85,7 @@ export default function EditCollectionModal({
                  </div>
                  <HexColorPicker
                    color={collection.color}
-                      onChange={(e) =>
-                        setCollection({ ...collection, color: e })
-                      }
+                    onChange={(e) => setCollection({ ...collection, color: e })}
                  />
                </div>
              </div>
@ -153,10 +112,6 @@ export default function EditCollectionModal({
          Save
        </button>
      </div>
-      </div>
-      <form method="dialog" className="modal-backdrop">
-        <button>close</button>
-      </form>
-    </dialog>
+    </Modal>
  );
 }
--- a/components/Modals/EditCollectionSharingModal.tsx
+++ b/components/Modals/EditCollectionSharingModal.tsx
@ -14,22 +14,17 @@ import useAccountStore from "@/store/account";
 import usePermissions from "@/hooks/usePermissions";
 import ProfilePhoto from "../ProfilePhoto";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
+import Modal from "../Modal";

 type Props = {
-  modalId: string;
-  isOpen: boolean;
  onClose: Function;
  activeCollection: CollectionIncludingMembersAndLinkCount;
 };

 export default function EditCollectionSharingModal({
-  modalId,
-  isOpen,
  onClose,
  activeCollection,
 }: Props) {
-  const modal = document.getElementById(modalId);
-
  useEffect(() => {
    const fetchOwner = async () => {
      const owner = await getPublicUserData(collection.ownerId as number);
@ -38,19 +33,8 @@ export default function EditCollectionSharingModal({

    fetchOwner();

-    modal?.scrollTo(0, 0);
    setCollection(activeCollection);
-
-    modal?.addEventListener("close", () => {
-      onClose();
-    });
-
-    return () => {
-      modal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
+  }, []);

  const [collection, setCollection] =
    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
@ -75,7 +59,7 @@ export default function EditCollectionSharingModal({

      if (response.ok) {
        toast.success(`Updated!`);
-        (document.getElementById(modalId) as any).close();
+        onClose();
      } else toast.error(response.data as string);

      setSubmitLoader(false);
@ -110,26 +94,7 @@ export default function EditCollectionSharingModal({
  };

  return (
-    <dialog
-      id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto p-5"
-      open={isOpen}
-    >
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-        toastOptions={{
-          className:
-            "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
-        }}
-      />
-      <div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
-        <form method="dialog">
-          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
-            ✕
-          </button>
-        </form>
-
+    <Modal toggleModal={onClose}>
      <p className="text-xl font-thin mb-5">
        {permissions === true ? "Share and Collaborate" : "Team"}
      </p>
@ -151,9 +116,7 @@ export default function EditCollectionSharingModal({
                }
                className="checkbox checkbox-primary"
              />
-                <span className="label-text">
-                  Make this a public collection
-                </span>
+              <span className="label-text">Make this a public collection</span>
            </label>

            <p className="text-neutral text-sm">
@ -244,9 +207,7 @@ export default function EditCollectionSharingModal({
                <div className="flex items-center gap-2 w-full">
                  <ProfilePhoto
                    src={
-                        collectionOwner.image
-                          ? collectionOwner.image
-                          : undefined
+                      collectionOwner.image ? collectionOwner.image : undefined
                    }
                  />
                  <div className="w-full">
@ -262,9 +223,7 @@ export default function EditCollectionSharingModal({
                        Admin
                      </div>
                    </div>
-                      <p className="text-neutral">
-                        @{collectionOwner.username}
-                      </p>
+                    <p className="text-neutral">@{collectionOwner.username}</p>
                  </div>
                </div>
              </div>
@ -285,9 +244,7 @@ export default function EditCollectionSharingModal({
                          onClick={() => {
                            const updatedMembers = collection.members.filter(
                              (member) => {
-                                  return (
-                                    member.user.username !== e.user.username
-                                  );
+                                return member.user.username !== e.user.username;
                              }
                            );
                            setCollection({
@ -484,10 +441,6 @@ export default function EditCollectionSharingModal({
          </button>
        )}
      </div>
-      </div>
-      <form method="dialog" className="modal-backdrop">
-        <button>close</button>
-      </form>
-    </dialog>
+    </Modal>
  );
 }
--- a/components/Modals/EditLinkModal.tsx
+++ b/components/Modals/EditLinkModal.tsx
@ -10,22 +10,14 @@ import toast from "react-hot-toast";
 import Link from "next/link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLink } from "@fortawesome/free-solid-svg-icons";
+import Modal from "../Modal";

 type Props = {
-  modalId: string;
-  isOpen: boolean;
  onClose: Function;
  activeLink: LinkIncludingShortenedCollectionAndTags;
 };

-export default function EditLinkModal({
-  modalId,
-  isOpen,
-  onClose,
-  activeLink,
-}: Props) {
-  const modal = document.getElementById(modalId);
-
+export default function EditLinkModal({ onClose, activeLink }: Props) {
  const [link, setLink] =
    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);

@ -58,20 +50,8 @@ export default function EditLinkModal({
  };

  useEffect(() => {
-    modal?.scrollTo(0, 0);
-
    setLink(activeLink);
-
-    modal?.addEventListener("close", () => {
-      onClose();
-    });
-
-    return () => {
-      modal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
+  }, []);

  const submit = async () => {
    if (!submitLoader) {
@ -87,7 +67,7 @@ export default function EditLinkModal({

      if (response.ok) {
        toast.success(`Updated!`);
-        (document.getElementById(modalId) as any).close();
+        onClose();
      } else toast.error(response.data as string);

      setSubmitLoader(false);
@ -97,26 +77,7 @@ export default function EditLinkModal({
  };

  return (
-    <dialog
-      id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto p-5"
-      open={isOpen}
-    >
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-        toastOptions={{
-          className:
-            "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
-        }}
-      />
-      <div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
-        <form method="dialog">
-          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
-            ✕
-          </button>
-        </form>
-
+    <Modal toggleModal={onClose}>
      <p className="text-xl mb-5 font-thin">Edit Link</p>

      <Link
@ -198,10 +159,6 @@ export default function EditLinkModal({
          Save
        </button>
      </div>
-      </div>
-      <form method="dialog" className="modal-backdrop">
-        <button>close</button>
-      </form>
-    </dialog>
+    </Modal>
  );
 }
--- a/components/Modals/NewCollectionModal.tsx
+++ b/components/Modals/NewCollectionModal.tsx
@ -6,20 +6,13 @@ import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Modal from "../Modal";

 type Props = {
-  modalId: string;
-  isOpen: boolean;
  onClose: Function;
 };

-export default function NewCollectionModal({
-  modalId,
-  isOpen,
-  onClose,
-}: Props) {
-  const modal = document.getElementById(modalId);
-
+export default function NewCollectionModal({ onClose }: Props) {
  const initial = {
    name: "",
    description: "",
@ -29,20 +22,8 @@ export default function NewCollectionModal({
  const [collection, setCollection] = useState<Partial<Collection>>(initial);

  useEffect(() => {
-    modal?.scrollTo(0, 0);
-
-    modal?.addEventListener("close", () => {
-      onClose();
-    });
-
    setCollection(initial);
-
-    return () => {
-      modal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
+  }, []);

  const [submitLoader, setSubmitLoader] = useState(false);
  const { addCollection } = useCollectionStore();
@ -64,7 +45,7 @@ export default function NewCollectionModal({

      if (response.ok) {
        toast.success("Created!");
-        (document.getElementById(modalId) as any).close();
+        onClose();
      } else toast.error(response.data as string);

      setSubmitLoader(false);
@ -72,26 +53,7 @@ export default function NewCollectionModal({
  };

  return (
-    <dialog
-      id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto p-5"
-      open={isOpen}
-    >
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-        toastOptions={{
-          className:
-            "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
-        }}
-      />
-      <div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
-        <form method="dialog">
-          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
-            ✕
-          </button>
-        </form>
-
+    <Modal toggleModal={onClose}>
      <p className="text-xl mb-5 font-thin">Create a New Collection</p>

      <div className="flex flex-col gap-3">
@ -128,9 +90,7 @@ export default function NewCollectionModal({
                  </div>
                  <HexColorPicker
                    color={collection.color}
-                      onChange={(e) =>
-                        setCollection({ ...collection, color: e })
-                      }
+                    onChange={(e) => setCollection({ ...collection, color: e })}
                  />
                </div>
              </div>
@ -157,10 +117,6 @@ export default function NewCollectionModal({
          Create Collection
        </button>
      </div>
-      </div>
-      <form method="dialog" className="modal-backdrop">
-        <button>close</button>
-      </form>
-    </dialog>
+    </Modal>
  );
 }
--- a/components/Modals/NewLinkModal.tsx
+++ b/components/Modals/NewLinkModal.tsx
@ -10,16 +10,13 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import toast from "react-hot-toast";
+import Modal from "../Modal";

 type Props = {
-  modalId: string;
-  isOpen: boolean;
  onClose: Function;
 };

-export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
-  const modal = document.getElementById(modalId);
-
+export default function NewLinkModal({ onClose }: Props) {
  const { data } = useSession();

  const initial = {
@ -71,7 +68,6 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
    setResetCollectionSelection(Date.now().toString());
    console.log(link);

-    modal?.scrollTo(0, 0);
    setOptionsExpanded(false);
    if (router.query.id) {
      const currentCollection = collections.find(
@ -99,17 +95,7 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
          ownerId: data?.user.id as number,
        },
      });
-
-    modal?.addEventListener("close", () => {
-      onClose();
-    });
-
-    return () => {
-      modal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
+  }, []);

  const submit = async () => {
    if (!submitLoader) {
@ -125,7 +111,7 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {

      if (response.ok) {
        toast.success(`Created!`);
-        (document?.getElementById(modalId) as any)?.close();
+        onClose();
      } else toast.error(response.data as string);

      setSubmitLoader(false);
@ -135,26 +121,7 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
  };

  return (
-    <dialog
-      id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto p-5"
-      open={isOpen}
-    >
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-        toastOptions={{
-          className:
-            "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
-        }}
-      />
-      <div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
-        <form method="dialog">
-          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
-            ✕
-          </button>
-        </form>
-
+    <Modal toggleModal={onClose}>
      <p className="text-xl mb-5 font-thin">Create a New Link</p>
      <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
        <div className="sm:col-span-3 col-span-5">
@ -232,10 +199,6 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
          Create Link
        </button>
      </div>
-      </div>
-      <form method="dialog" className="modal-backdrop">
-        <button>close</button>
-      </form>
-    </dialog>
+    </Modal>
  );
 }
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@ -162,16 +162,12 @@ export default function Navbar() {
          </ClickAwayHandler>
        </div>
      ) : null}
-      <NewLinkModal
-        isOpen={newLinkModal}
-        onClose={() => setNewLinkModal(false)}
-        modalId="new-link-modal-nav"
-      />
-      <NewCollectionModal
-        isOpen={newCollectionModal}
-        onClose={() => setNewCollectionModal(false)}
-        modalId="new-collection-modal-nav"
-      />
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
+      {newCollectionModal ? (
+        <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
+      ) : undefined}
    </div>
  );
 }
--- a/components/NoLinksFound.tsx
+++ b/components/NoLinksFound.tsx
@ -31,11 +31,9 @@ export default function NoLinksFound({ text }: Props) {
          </span>
        </div>
      </div>
-      <NewLinkModal
-        isOpen={newLinkModal}
-        onClose={() => setNewLinkModal(false)}
-        modalId="new-link-modal"
-      />
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
    </div>
  );
 }
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@ -233,24 +233,24 @@ export default function Index() {
      </div>
      {activeCollection ? (
        <>
+          {editCollectionModal ? (
            <EditCollectionModal
-            isOpen={editCollectionModal}
              onClose={() => setEditCollectionModal(false)}
-            modalId={"edit-collection-modal" + activeCollection.id}
              activeCollection={activeCollection}
            />
+          ) : undefined}
+          {editCollectionSharingModal ? (
            <EditCollectionSharingModal
-            isOpen={editCollectionSharingModal}
              onClose={() => setEditCollectionSharingModal(false)}
-            modalId={"edit-collection-sharing-modal" + activeCollection.id}
              activeCollection={activeCollection}
            />
+          ) : undefined}
+          {deleteCollectionModal ? (
            <DeleteCollectionModal
-            isOpen={deleteCollectionModal}
              onClose={() => setDeleteCollectionModal(false)}
-            modalId={"delete-collection-modal" + activeCollection.id}
              activeCollection={activeCollection}
            />
+          ) : undefined}
        </>
      ) : undefined}
    </MainLayout>
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@ -126,11 +126,9 @@ export default function Collections() {
          </>
        ) : undefined}
      </div>
-      <NewCollectionModal
-        isOpen={newCollectionModal}
-        onClose={() => setNewCollectionModal(false)}
-        modalId="new-collection-modal-1"
-      />
+      {newCollectionModal ? (
+        <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
+      ) : undefined}
    </MainLayout>
  );
 }
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@ -315,11 +315,9 @@ export default function Dashboard() {
          )}
        </div>
      </div>
-      <NewLinkModal
-        isOpen={newLinkModal}
-        onClose={() => setNewLinkModal(false)}
-        modalId="new-link-modal"
-      />
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
    </MainLayout>
  );
 }
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@ -228,12 +228,12 @@ export default function PublicCollections() {
        </p> */}
        </div>
      </div>
+      {editCollectionSharingModal ? (
        <EditCollectionSharingModal
-        isOpen={editCollectionSharingModal}
          onClose={() => setEditCollectionSharingModal(false)}
-        modalId={"edit-collection-sharing-modal" + collection.id}
          activeCollection={collection}
        />
+      ) : undefined}
    </div>
  ) : (
    <></>
--- a/styles/globals.css
+++ b/styles/globals.css
@ -69,7 +69,7 @@ body {
 }

 .slide-up {
-  animation: slide-up-animation 70ms;
+  animation: slide-up-animation 200ms;
 }

 .slide-down {