From 9e4502c015c9755f27cbe2aa82a1632f3dc7610f Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Fri, 1 Dec 2023 17:42:45 -0500 Subject: [PATCH] improved DX --- components/CollectionCard.tsx | 36 +- components/LinkCard.tsx | 16 +- components/Modal/Collection/index.tsx | 2 +- components/Modal/index.tsx | 15 +- components/Modals/DeleteCollectionModal.tsx | 179 ++--- components/Modals/EditCollectionModal.tsx | 157 ++-- .../Modals/EditCollectionSharingModal.tsx | 707 ++++++++---------- components/Modals/EditLinkModal.tsx | 201 ++--- components/Modals/NewCollectionModal.tsx | 160 ++-- components/Modals/NewLinkModal.tsx | 197 ++--- components/Navbar.tsx | 16 +- components/NoLinksFound.tsx | 8 +- pages/collections/[id].tsx | 36 +- pages/collections/index.tsx | 8 +- pages/dashboard.tsx | 8 +- pages/public/collections/[id].tsx | 12 +- styles/globals.css | 2 +- 17 files changed, 744 insertions(+), 1016 deletions(-) diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index 5b73735..beca2ae 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -192,24 +192,24 @@ export default function CollectionCard({ collection, className }: Props) { - setEditCollectionModal(false)} - modalId={"edit-collection-modal" + collection.id} - activeCollection={collection} - /> - setEditCollectionSharingModal(false)} - modalId={"edit-collection-sharing-modal" + collection.id} - activeCollection={collection} - /> - setDeleteCollectionModal(false)} - modalId={"delete-collection-modal" + collection.id} - activeCollection={collection} - /> + {editCollectionModal ? ( + setEditCollectionModal(false)} + activeCollection={collection} + /> + ) : undefined} + {editCollectionSharingModal ? ( + setEditCollectionSharingModal(false)} + activeCollection={collection} + /> + ) : undefined} + {deleteCollectionModal ? ( + setDeleteCollectionModal(false)} + activeCollection={collection} + /> + ) : undefined} ); } diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx index 5d2d9e7..61c4371 100644 --- 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 (
{ (document?.activeElement as HTMLElement)?.blur(); - setNewLinkModal(true); + setEditLinkModal(true); }} > Edit @@ -291,12 +291,12 @@ export default function LinkCard({ link, count, className }: Props) {
- setNewLinkModal(false)} - modalId={"edit-link-modal" + link.id} - activeLink={link} - /> + {editLinkModal ? ( + setEditLinkModal(false)} + activeLink={link} + /> + ) : undefined} ); } diff --git a/components/Modal/Collection/index.tsx b/components/Modal/Collection/index.tsx index b17f9d1..44802f4 100644 --- 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"; diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx index d7bd5bf..cf9ccdc 100644 --- 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) {
-
+
} - 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" > - +
{children}
diff --git a/components/Modals/DeleteCollectionModal.tsx b/components/Modals/DeleteCollectionModal.tsx index 43d99e9..0550c1d 100644 --- 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(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,98 +63,75 @@ export default function DeleteCollectionModal({ }; return ( - - -
-
- -
+ +

+ {permissions === true ? "Delete" : "Leave"} Collection +

-

- {permissions === true ? "Delete" : "Leave"} Collection -

+
+ {permissions === true ? ( + <> +
+

+ To confirm, type " + {collection.name} + " in the box below: +

-
- {permissions === true ? ( - <> -
-

- To confirm, type " - {collection.name} - " in the box below: -

+ setInputField(e.target.value)} + placeholder={`Type "${collection.name}" Here.`} + className="w-3/4 mx-auto" + /> +
- setInputField(e.target.value)} - placeholder={`Type "${collection.name}" Here.`} - className="w-3/4 mx-auto" +
+ + -
+ + + + Warning: Deleting this collection will permanently erase all + its contents + + , and it will become inaccessible to everyone, including members + with previous access. + +
+ + ) : ( +

Click the button below to leave the current collection.

+ )} -
- - - - - - Warning: Deleting this collection will permanently erase all - its contents - - , and it will become inaccessible to everyone, including - members with previous access. - -
- - ) : ( -

Click the button below to leave the current collection.

- )} - - -
+
-
- -
-
+ ); } diff --git a/components/Modals/EditCollectionModal.tsx b/components/Modals/EditCollectionModal.tsx index 752d32f..5d15687 100644 --- 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(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,95 +48,70 @@ export default function EditCollectionModal({ }; return ( - - -
-
- -
+ +

Edit Collection Info

-

Edit Collection Info

- -
-
-
-

Name

-
- - setCollection({ ...collection, name: e.target.value }) - } - /> -
-

Color

-
-
-
- -
-
- setCollection({ ...collection, color: "#0ea5e9" }) - } - > - Reset -
+
+
+
+

Name

+
+ + setCollection({ ...collection, name: e.target.value }) + } + /> +
+

Color

+
+
+
+
- - setCollection({ ...collection, color: e }) +
+ setCollection({ ...collection, color: "#0ea5e9" }) } - /> + > + Reset +
+ setCollection({ ...collection, color: e })} + />
- -
-

Description

-