From a3c6d9b42edfb974fa4988845ae203a722a5a79d Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Fri, 1 Dec 2023 14:00:52 -0500 Subject: [PATCH] more modals replaced --- components/Checkbox.tsx | 16 +- components/CollectionCard.tsx | 20 +- components/Modals/DeleteCollectionModal.tsx | 180 ++++++++++++++++++ components/Modals/EditCollectionModal.tsx | 1 - .../Modals/EditCollectionSharingModal.tsx | 3 - components/Navbar.tsx | 1 - components/ProfilePhoto.tsx | 14 +- pages/collections/[id].tsx | 5 +- pages/public/collections/[id].tsx | 2 +- pages/settings/account.tsx | 114 ++++++----- pages/settings/api.tsx | 2 +- pages/settings/appearance.tsx | 6 +- pages/settings/password.tsx | 2 + 13 files changed, 266 insertions(+), 100 deletions(-) create mode 100644 components/Modals/DeleteCollectionModal.tsx diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx index 3b7cd7e..5c95bbe 100644 --- a/components/Checkbox.tsx +++ b/components/Checkbox.tsx @@ -12,23 +12,17 @@ type Props = { export default function Checkbox({ label, state, className, onClick }: Props) { return ( ); } diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index 955bd30..8bb0f94 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -12,6 +12,7 @@ import getPublicUserData from "@/lib/client/getPublicUserData"; import useAccountStore from "@/store/account"; import EditCollectionModal from "./Modals/EditCollectionModal"; import EditCollectionSharingModal from "./Modals/EditCollectionSharingModal"; +import DeleteCollectionModal from "./Modals/DeleteCollectionModal"; type Props = { collection: CollectionIncludingMembersAndLinkCount; @@ -62,6 +63,7 @@ export default function CollectionCard({ collection, className }: Props) { const [editCollectionModal, setEditCollectionModal] = useState(false); const [editCollectionSharingModal, setEditCollectionSharingModal] = useState(false); + const [deleteCollectionModal, setDeleteCollectionModal] = useState(false); return (
@@ -109,15 +111,7 @@ export default function CollectionCard({ collection, className }: Props) { tabIndex={0} onClick={() => { (document?.activeElement as HTMLElement)?.blur(); - collection && - setModal({ - modal: "COLLECTION", - state: true, - method: "UPDATE", - isOwner: permissions === true, - active: collection, - defaultIndex: permissions === true ? 2 : 1, - }); + setDeleteCollectionModal(true); }} > {permissions === true ? "Delete Collection" : "Leave Collection"} @@ -132,7 +126,7 @@ export default function CollectionCard({ collection, className }: Props) { {collectionOwner.id ? ( ) : undefined} {collection.members @@ -212,6 +206,12 @@ export default function CollectionCard({ collection, className }: Props) { modalId={"edit-collection-sharing-modal" + collection.id} activeCollection={collection} /> + setDeleteCollectionModal(false)} + modalId={"delete-collection-modal" + collection.id} + activeCollection={collection} + />
); } diff --git a/components/Modals/DeleteCollectionModal.tsx b/components/Modals/DeleteCollectionModal.tsx new file mode 100644 index 0000000..70b6d7b --- /dev/null +++ b/components/Modals/DeleteCollectionModal.tsx @@ -0,0 +1,180 @@ +import React, { useEffect, useState } from "react"; +import TextInput from "@/components/TextInput"; +import useCollectionStore from "@/store/collections"; +import toast, { Toaster } 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"; + +type Props = { + modalId: string; + isOpen: boolean; + onClose: Function; + activeCollection: CollectionIncludingMembersAndLinkCount; +}; + +export default function DeleteCollectionModal({ + modalId, + isOpen, + onClose, + activeCollection, +}: Props) { + const modal = document.getElementById(modalId); + + useEffect(() => { + modal?.addEventListener("close", () => { + onClose(); + }); + + return () => { + modal?.addEventListener("close", () => { + onClose(); + }); + }; + }, [isOpen]); + + const [collection, setCollection] = + useState(activeCollection); + + useEffect(() => { + setCollection(activeCollection); + setInputField(""); + }, [isOpen]); + + const [submitLoader, setSubmitLoader] = useState(false); + const { removeCollection } = useCollectionStore(); + const router = useRouter(); + const [inputField, setInputField] = useState(""); + + const permissions = usePermissions(collection.id as number); + + const submit = async () => { + if (permissions === true) if (collection.name !== inputField) return null; + + if (!submitLoader) { + setSubmitLoader(true); + if (!collection) return null; + + setSubmitLoader(true); + + const load = toast.loading("Deleting..."); + + let response; + + response = await removeCollection(collection.id as any); + + toast.dismiss(load); + + if (response.ok) { + toast.success(`Deleted.`); + (document.getElementById(modalId) as any).close(); + router.push("/collections"); + } else toast.error(response.data as string); + + setSubmitLoader(false); + } + }; + + return ( + + +
+
+ +
+ +

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

+ +
+ {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" + /> +
+ +
+ + + + + + 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 37f5fe9..ce1456c 100644 --- a/components/Modals/EditCollectionModal.tsx +++ b/components/Modals/EditCollectionModal.tsx @@ -4,7 +4,6 @@ import useCollectionStore from "@/store/collections"; import toast, { Toaster } from "react-hot-toast"; 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 { CollectionIncludingMembersAndLinkCount } from "@/types/global"; diff --git a/components/Modals/EditCollectionSharingModal.tsx b/components/Modals/EditCollectionSharingModal.tsx index 88cb335..a8271a0 100644 --- a/components/Modals/EditCollectionSharingModal.tsx +++ b/components/Modals/EditCollectionSharingModal.tsx @@ -5,11 +5,8 @@ import toast, { Toaster } from "react-hot-toast"; import { faClose, faCrown, - faFolder, faUserPlus, } from "@fortawesome/free-solid-svg-icons"; -import { HexColorPicker } from "react-colorful"; -import { Collection } from "@prisma/client"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global"; import getPublicUserData from "@/lib/client/getPublicUserData"; diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 78286b7..b710b28 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -110,7 +110,6 @@ export default function Navbar() {
    diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx index 721db3e..07a8cc5 100644 --- a/components/ProfilePhoto.tsx +++ b/components/ProfilePhoto.tsx @@ -8,6 +8,7 @@ type Props = { className?: string; priority?: boolean; name?: string; + dimensionClass?: string; }; export default function ProfilePhoto({ @@ -15,6 +16,7 @@ export default function ProfilePhoto({ className, priority, name, + dimensionClass, }: Props) { const [image, setImage] = useState(""); @@ -28,7 +30,11 @@ export default function ProfilePhoto({ }, [src]); return !image ? ( -
    +
    {name ? ( {name.slice(0, 1)} @@ -41,7 +47,11 @@ export default function ProfilePhoto({
    ) : ( -
    +
    setEditCollectionSharingModal(true)} > {collectionOwner.id ? ( - + ) : undefined} {activeCollection.members .sort((a, b) => (a.userId as number) - (b.userId as number)) diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx index 2f383ef..0ab99e8 100644 --- a/pages/public/collections/[id].tsx +++ b/pages/public/collections/[id].tsx @@ -153,7 +153,7 @@ export default function PublicCollections() { {collectionOwner.id ? ( ) : undefined} {collection.members diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx index 3796cf8..e79c0d9 100644 --- a/pages/settings/account.tsx +++ b/pages/settings/account.tsx @@ -162,6 +162,7 @@ export default function Account() {

    Display Name

    setUser({ ...user, name: e.target.value })} />
    @@ -169,6 +170,7 @@ export default function Account() {

    Username

    setUser({ ...user, username: e.target.value })} />
    @@ -184,6 +186,7 @@ export default function Account() { ) : undefined} setUser({ ...user, email: e.target.value })} />
    @@ -196,7 +199,7 @@ export default function Account() { {user.image && (
    )}
    -