From 8af9a36dfaa070276224342490918e192baebe6c Mon Sep 17 00:00:00 2001 From: Daniel Date: Sat, 27 May 2023 07:59:45 +0330 Subject: [PATCH] cleaner code --- components/CollectionCard.tsx | 20 +- components/Modal/ChangePassword.tsx | 2 +- ...{AddCollection.tsx => CollectionModal.tsx} | 119 ++++-- components/Modal/DeleteCollection.tsx | 4 +- components/Modal/EditCollection.tsx | 345 ------------------ pages/collections/[id].tsx | 5 +- pages/collections/index.tsx | 22 +- types/global.ts | 2 +- 8 files changed, 127 insertions(+), 392 deletions(-) rename components/Modal/{AddCollection.tsx => CollectionModal.tsx} (77%) delete mode 100644 components/Modal/EditCollection.tsx diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index ffde8ee..34c8cd0 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -17,7 +17,7 @@ import ImageWithFallback from "./ImageWithFallback"; import Dropdown from "./Dropdown"; import { useState } from "react"; import Modal from "@/components/Modal"; -import EditCollection from "@/components/Modal/EditCollection"; +import CollectionModal from "@/components/Modal/CollectionModal"; import DeleteCollection from "@/components/Modal/DeleteCollection"; export default function ({ @@ -26,13 +26,14 @@ export default function ({ collection: CollectionIncludingMembers; }) { const { links } = useLinkStore(); - const formattedDate = new Date( - collection.createdAt as unknown as string - ).toLocaleString("en-US", { - year: "numeric", - month: "short", - day: "numeric", - }); + const formattedDate = new Date(collection.createdAt as string).toLocaleString( + "en-US", + { + year: "numeric", + month: "short", + day: "numeric", + } + ); const [expandDropdown, setExpandDropdown] = useState(false); const [editCollectionModal, setEditCollectionModal] = useState(false); @@ -129,9 +130,10 @@ export default function ({ {editCollectionModal ? ( - ) : null} diff --git a/components/Modal/ChangePassword.tsx b/components/Modal/ChangePassword.tsx index 110315e..a719f74 100644 --- a/components/Modal/ChangePassword.tsx +++ b/components/Modal/ChangePassword.tsx @@ -12,7 +12,7 @@ type Props = { setPasswordForm: Function; }; -export default function AddCollection({ +export default function ChangePassword({ togglePasswordFormModal, user, setPasswordForm, diff --git a/components/Modal/AddCollection.tsx b/components/Modal/CollectionModal.tsx similarity index 77% rename from components/Modal/AddCollection.tsx rename to components/Modal/CollectionModal.tsx index 00157c5..989ea72 100644 --- a/components/Modal/AddCollection.tsx +++ b/components/Modal/CollectionModal.tsx @@ -3,34 +3,38 @@ // This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. // You should have received a copy of the GNU General Public License along with this program. If not, see . -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faClose, - faPlus, + faPenToSquare, + faTrashCan, faUser, faUserPlus, } from "@fortawesome/free-solid-svg-icons"; import useCollectionStore from "@/store/collections"; import { CollectionIncludingMembers, Member } from "@/types/global"; import { useSession } from "next-auth/react"; +import Modal from "@/components/Modal"; +import DeleteCollection from "@/components/Modal/DeleteCollection"; import RequiredBadge from "../RequiredBadge"; import addMemberToCollection from "@/lib/client/addMemberToCollection"; import ImageWithFallback from "../ImageWithFallback"; +import Checkbox from "../Checkbox"; type Props = { toggleCollectionModal: Function; + activeCollection: CollectionIncludingMembers; + method: "CREATE" | "UPDATE"; }; -export default function AddCollection({ toggleCollectionModal }: Props) { - const session = useSession(); - - const [collection, setCollection] = useState({ - name: "", - description: "", - ownerId: session.data?.user.id as number, - members: [], - }); +export default function CollectionModal({ + toggleCollectionModal, + activeCollection, + method, +}: Props) { + const [collection, setCollection] = + useState(activeCollection); const [member, setMember] = useState({ canCreate: false, @@ -42,16 +46,16 @@ export default function AddCollection({ toggleCollectionModal }: Props) { }, }); - const { addCollection } = useCollectionStore(); + const { updateCollection, addCollection } = useCollectionStore(); - const submit = async () => { - if (!collection) return null; + const [deleteCollectionModal, setDeleteCollectionModal] = useState(false); - const response = await addCollection(collection); - - if (response) toggleCollectionModal(); + const toggleDeleteCollectionModal = () => { + setDeleteCollectionModal(!deleteCollectionModal); }; + const session = useSession(); + const setMemberState = (newMember: Member) => { if (!collection) return null; @@ -71,9 +75,23 @@ export default function AddCollection({ toggleCollectionModal }: Props) { }); }; + const submit = async () => { + if (!collection) return null; + + let response = null; + + if (method === "CREATE") response = await updateCollection(collection); + else if (method === "UPDATE") response = await addCollection(collection); + else console.log("Unknown method."); + + if (response) toggleCollectionModal(); + }; + return (
-

New Collection

+

+ {method === "CREATE" ? "Add" : "Edit"} Collection +

@@ -109,9 +127,27 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
-
+
+ + {/*

Sharing & Collaboration Settings

+ +

Collaboration

+ +
+
+ Manage Team +
+
+ + console.log("Clicked!")} + /> +

+ This will let anyone to access this collection. +

*/} -

Members

addMemberToCollection( session.data?.user.email as string, - member.user.email as string, + member.user.email, collection, setMemberState ) @@ -140,7 +176,6 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
- {collection?.members[0]?.user ? ( <>

@@ -284,13 +319,41 @@ export default function AddCollection({ toggleCollectionModal }: Props) { ) : null} -

- - Add Collection +
+
+ + Edit Collection +
+ +
+
+ +

OR

+ +
+
+ +
{ + toggleDeleteCollectionModal(); + }} + className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2" + > + +
+ + {deleteCollectionModal ? ( + + + + ) : null}
); } diff --git a/components/Modal/DeleteCollection.tsx b/components/Modal/DeleteCollection.tsx index 0cd8dde..a658f21 100644 --- a/components/Modal/DeleteCollection.tsx +++ b/components/Modal/DeleteCollection.tsx @@ -5,7 +5,7 @@ import React, { useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons"; +import { faTrashCan } from "@fortawesome/free-solid-svg-icons"; import { CollectionIncludingMembers } from "@/types/global"; import useCollectionStore from "@/store/collections"; import { useRouter } from "next/router"; @@ -15,7 +15,7 @@ type Props = { collection: CollectionIncludingMembers; }; -export default function AddCollection({ +export default function DeleteCollection({ toggleDeleteCollectionModal, collection, }: Props) { diff --git a/components/Modal/EditCollection.tsx b/components/Modal/EditCollection.tsx deleted file mode 100644 index 96e02bd..0000000 --- a/components/Modal/EditCollection.tsx +++ /dev/null @@ -1,345 +0,0 @@ -// Copyright (C) 2022-present Daniel31x13 -// This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3. -// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. -// You should have received a copy of the GNU General Public License along with this program. If not, see . - -import React, { useState } from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faClose, - faPenToSquare, - faTrashCan, - faUser, - faUserPlus, -} from "@fortawesome/free-solid-svg-icons"; -import useCollectionStore from "@/store/collections"; -import { CollectionIncludingMembers, Member } from "@/types/global"; -import { useSession } from "next-auth/react"; -import Modal from "@/components/Modal"; -import DeleteCollection from "@/components/Modal/DeleteCollection"; -import RequiredBadge from "../RequiredBadge"; -import addMemberToCollection from "@/lib/client/addMemberToCollection"; -import ImageWithFallback from "../ImageWithFallback"; -import Checkbox from "../Checkbox"; - -type Props = { - toggleCollectionModal: Function; - activeCollection: CollectionIncludingMembers; -}; - -export default function EditCollection({ - toggleCollectionModal, - activeCollection, -}: Props) { - const [collection, setCollection] = - useState(activeCollection); - - const [member, setMember] = useState({ - canCreate: false, - canUpdate: false, - canDelete: false, - user: { - name: "", - email: "", - }, - }); - - const { updateCollection } = useCollectionStore(); - - const [deleteCollectionModal, setDeleteCollectionModal] = useState(false); - - const toggleDeleteCollectionModal = () => { - setDeleteCollectionModal(!deleteCollectionModal); - }; - - const session = useSession(); - - const setMemberState = (newMember: Member) => { - if (!collection) return null; - - setCollection({ - ...collection, - members: [...collection.members, newMember], - }); - - setMember({ - canCreate: false, - canUpdate: false, - canDelete: false, - user: { - name: "", - email: "", - }, - }); - }; - - const submit = async () => { - if (!collection) return null; - - const response = await updateCollection(collection); - - if (response) toggleCollectionModal(); - }; - - return ( -
-

Edit Collection

- -
-
-

- Name - -

- - setCollection({ ...collection, name: e.target.value }) - } - type="text" - placeholder="e.g. Example Collection" - className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" - /> -
- -
-

Description

- - setCollection({ - ...collection, - description: e.target.value, - }) - } - type="text" - placeholder="Collection description" - className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" - /> -
-
- -
- - {/*

Sharing & Collaboration Settings

- -

Collaboration

- -
-
- Manage Team -
-
- - console.log("Clicked!")} - /> -

- This will let anyone to access this collection. -

*/} - -
- { - setMember({ - ...member, - user: { ...member.user, email: e.target.value }, - }); - }} - type="text" - placeholder="Email" - className="w-full rounded-md p-3 pr-12 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" - /> - -
- addMemberToCollection( - session.data?.user.email as string, - member.user.email, - collection, - setMemberState - ) - } - className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer" - > - -
-
- {collection.members[0] ? ( -

- (All Members have Read access to this collection.) -

- ) : null} - -
- {collection.members.map((e, i) => { - return ( -
- { - const updatedMembers = collection.members.filter((member) => { - return member.user.email !== e.user.email; - }); - setCollection({ - ...collection, - members: updatedMembers, - }); - }} - /> -
- -
- -
- -
-

- {e.user.name} -

-

{e.user.email}

-
-
-
-
-

Permissions

-

- (Click to toggle.) -

-
- -
- - - - - -
-
-
- ); - })} -
- -
-
- - Edit Collection -
- -
-
- -

OR

- -
-
- -
{ - toggleDeleteCollectionModal(); - }} - className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2" - > - -
-
- - {deleteCollectionModal ? ( - - - - ) : null} -
- ); -} diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index 59b2d17..ae27ef6 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -7,7 +7,7 @@ import Dropdown from "@/components/Dropdown"; import LinkList from "@/components/LinkList"; import Modal from "@/components/Modal"; import AddLink from "@/components/Modal/AddLink"; -import EditCollection from "@/components/Modal/EditCollection"; +import CollectionModal from "@/components/Modal/CollectionModal"; import DeleteCollection from "@/components/Modal/DeleteCollection"; import useCollectionStore from "@/store/collections"; import useLinkStore from "@/store/links"; @@ -284,9 +284,10 @@ export default function () { {editCollectionModal && activeCollection ? ( - ) : null} diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx index e2960cf..29a19f4 100644 --- a/pages/collections/index.tsx +++ b/pages/collections/index.tsx @@ -16,10 +16,11 @@ import CollectionCard from "@/components/CollectionCard"; import Dropdown from "@/components/Dropdown"; import { ChangeEvent, useEffect, useState } from "react"; import Modal from "@/components/Modal"; -import AddCollection from "@/components/Modal/AddCollection"; import MainLayout from "@/layouts/MainLayout"; import ClickAwayHandler from "@/components/ClickAwayHandler"; import RadioButton from "@/components/RadioButton"; +import CollectionModal from "@/components/Modal/CollectionModal"; +import { useSession } from "next-auth/react"; export default function () { const { collections } = useCollectionStore(); @@ -30,6 +31,8 @@ export default function () { const [collectionModal, setCollectionModal] = useState(false); + const session = useSession(); + const toggleCollectionModal = () => { setCollectionModal(!collectionModal); }; @@ -65,14 +68,16 @@ export default function () { setSortedCollections( collectionsArray.sort( (a, b) => - new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() + new Date(b.createdAt as string).getTime() - + new Date(a.createdAt as string).getTime() ) ); else if (sortBy === "Date (Oldest First)") setSortedCollections( collectionsArray.sort( (a, b) => - new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime() + new Date(a.createdAt as string).getTime() - + new Date(b.createdAt as string).getTime() ) ); }, [collections, sortBy]); @@ -210,7 +215,16 @@ export default function () { {collectionModal ? ( - + ) : null} diff --git a/types/global.ts b/types/global.ts index 61e1f65..77822e8 100644 --- a/types/global.ts +++ b/types/global.ts @@ -48,7 +48,7 @@ export interface Member { export interface CollectionIncludingMembers extends Omit { id?: number; - createdAt?: Date; + createdAt?: string; members: Member[]; }