feat!: added PDF and screenshot archive support

components/AddLinkModal.tsx

@@ -7,14 +7,14 @@ import { useRouter } from "next/router";
 import { NewLink } from "@/types/global";
 import useLinkSlice from "@/store/links";
 
-export default function () {
+export default function ({ toggleLinkModal }: { toggleLinkModal: Function }) {
   const router = useRouter();
 
   const [newLink, setNewLink] = useState<NewLink>({
     name: "",
     url: "",
     tags: [],
-    collectionId: { id: Number(router.query.id) },
+    collection: { id: Number(router.query.id) },
   });
 
   const { addLink } = useLinkSlice();
@@ -30,23 +30,13 @@ export default function () {
   const setCollection = (e: any) => {
     const collection = { id: e?.value, isNew: e?.__isNew__ };
 
-    setNewLink({ ...newLink, collectionId: collection });
+    setNewLink({ ...newLink, collection: collection });
   };
 
-  const postLink = async () => {
-    const response = await fetch("/api/routes/links", {
-      body: JSON.stringify(newLink),
-      headers: {
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-    });
+  const submitLink = async () => {
+    const response = await addLink(newLink);
 
-    const data = await response.json();
-
-    console.log(newLink);
-
-    console.log(data);
+    if (response) toggleLinkModal();
   };
 
   return (
@@ -87,7 +77,7 @@ export default function () {
 
       <div
         className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-        onClick={() => addLink(newLink)}
+        onClick={submitLink}
       >
         <FontAwesomeIcon icon={faPlus} className="h-5" />
         Add Link

components/LinkList.tsx

@@ -9,7 +9,7 @@ export default function ({
 }) {
   return (
     <div className="border border-sky-100 mb-5 bg-gray-100 p-5 rounded">
-      <div className="flex items-baseline gap-1">
+      {/* <div className="flex items-baseline gap-1">
         <p className="text-sm text-sky-600">{count + 1}.</p>
         <p className="text-lg text-sky-500">{link.name}</p>
       </div>
@@ -17,7 +17,8 @@ export default function ({
         {link.tags.map((e, i) => (
           <p key={i}>{e.name}</p>
         ))}
-      </div>
+      </div> */}
+      {JSON.stringify(link)}
     </div>
   );
 }

components/Navbar.tsx

@@ -59,10 +59,10 @@ export default function () {
     }
   }, [router, collections, tags]);
 
-  const [collectionInput, setCollectionInput] = useState(false);
+  const [linkModal, setLinkModal] = useState(false);
 
-  const toggleCollectionInput = () => {
-    setCollectionInput(!collectionInput);
+  const toggleLinkModal = () => {
+    setLinkModal(!linkModal);
   };
 
   return (
@@ -76,7 +76,7 @@ export default function () {
       <div className="flex items-center gap-3">
         <FontAwesomeIcon
           icon={faPlus}
-          onClick={toggleCollectionInput}
+          onClick={toggleLinkModal}
           className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
         />
         <FontAwesomeIcon
@@ -90,13 +90,13 @@ export default function () {
           Sign Out
         </div>
 
-        {collectionInput ? (
+        {linkModal ? (
           <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in">
             <ClickAwayHandler
-              onClickOutside={toggleCollectionInput}
+              onClickOutside={toggleLinkModal}
               className="w-fit mx-auto"
             >
-              <AddLinkModal />
+              <AddLinkModal toggleLinkModal={toggleLinkModal} />
             </ClickAwayHandler>
           </div>
         ) : null}