feat: added edit + delete collection functionality

pages/api/routes/collections/index.ts

@@ -8,6 +8,8 @@ import { getServerSession } from "next-auth/next";
 import { authOptions } from "pages/api/auth/[...nextauth]";
 import getCollections from "@/lib/api/controllers/collections/getCollections";
 import postCollection from "@/lib/api/controllers/collections/postCollection";
+import updateCollection from "@/lib/api/controllers/collections/updateCollection";
+import deleteCollection from "@/lib/api/controllers/collections/deleteCollection";
 
 export default async function (req: NextApiRequest, res: NextApiResponse) {
   const session = await getServerSession(req, res, authOptions);
@@ -26,5 +28,11 @@ export default async function (req: NextApiRequest, res: NextApiResponse) {
     return res
       .status(newCollection.status)
       .json({ response: newCollection.response });
+  } else if (req.method === "PUT") {
+    const updated = await updateCollection(req.body, session.user.id);
+    return res.status(updated.status).json({ response: updated.response });
+  } else if (req.method === "DELETE") {
+    const deleted = await deleteCollection(req.body, session.user.id);
+    return res.status(deleted.status).json({ response: deleted.response });
   }
 }

pages/api/routes/links/index.ts

@@ -26,15 +26,15 @@ export default async function (req: NextApiRequest, res: NextApiResponse) {
     return res.status(newlink.status).json({
       response: newlink.response,
     });
-  } else if (req.method === "DELETE") {
-    const deleted = await deleteLink(req.body, session.user.id);
-    return res.status(deleted.status).json({
-      response: deleted.response,
-    });
   } else if (req.method === "PUT") {
     const updated = await updateLink(req.body, session.user.id);
     return res.status(updated.status).json({
       response: updated.response,
     });
+  } else if (req.method === "DELETE") {
+    const deleted = await deleteLink(req.body, session.user.id);
+    return res.status(deleted.status).json({
+      response: deleted.response,
+    });
   }
 }

pages/collections/[id].tsx

@@ -8,6 +8,7 @@ import LinkList from "@/components/LinkList";
 import Modal from "@/components/Modal";
 import AddLink from "@/components/Modal/AddLink";
 import EditCollection from "@/components/Modal/EditCollection";
+import DeleteCollection from "@/components/Modal/DeleteCollection";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
 import { ExtendedCollection, ExtendedLink } from "@/types/global";
@@ -19,7 +20,6 @@ import {
   faTrashCan,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Collection } from "@prisma/client";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
@@ -31,7 +31,8 @@ export default function () {
 
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [linkModal, setLinkModal] = useState(false);
-  const [collectionModal, setCollectionModal] = useState(false);
+  const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
   const [activeCollection, setActiveCollection] =
     useState<ExtendedCollection>();
   const [linksByCollection, setLinksByCollection] =
@@ -41,8 +42,12 @@ export default function () {
     setLinkModal(!linkModal);
   };
 
-  const toggleCollectionModal = () => {
-    setCollectionModal(!collectionModal);
+  const toggleEditCollectionModal = () => {
+    setEditCollectionModal(!editCollectionModal);
+  };
+
+  const toggleDeleteCollectionModal = () => {
+    setDeleteCollectionModal(!deleteCollectionModal);
   };
 
   useEffect(() => {
@@ -90,13 +95,17 @@ export default function () {
                   name: "Edit Collection",
                   icon: <FontAwesomeIcon icon={faPenToSquare} />,
                   onClick: () => {
-                    toggleCollectionModal();
+                    toggleEditCollectionModal();
                     setExpandDropdown(false);
                   },
                 },
                 {
                   name: "Delete Collection",
                   icon: <FontAwesomeIcon icon={faTrashCan} />,
+                  onClick: () => {
+                    toggleDeleteCollectionModal();
+                    setExpandDropdown(false);
+                  },
                 },
               ]}
               onClickOutside={(e: Event) => {
@@ -113,14 +122,23 @@ export default function () {
             </Modal>
           ) : null}
 
-          {collectionModal && activeCollection ? (
-            <Modal toggleModal={toggleCollectionModal}>
+          {editCollectionModal && activeCollection ? (
+            <Modal toggleModal={toggleEditCollectionModal}>
               <EditCollection
-                toggleCollectionModal={toggleCollectionModal}
+                toggleCollectionModal={toggleEditCollectionModal}
                 collection={activeCollection}
               />
             </Modal>
           ) : null}
+
+          {deleteCollectionModal && activeCollection ? (
+            <Modal toggleModal={toggleDeleteCollectionModal}>
+              <DeleteCollection
+                collection={activeCollection}
+                toggleCollectionModal={toggleDeleteCollectionModal}
+              />
+            </Modal>
+          ) : null}
         </div>
       </div>
       {linksByCollection.map((e, i) => {