updated links id page

components/LinkCard.tsx

@@ -69,7 +69,7 @@ export default function LinkCard({ link, count, className }: Props) {
     );
   }, [collections, links]);
 
-  const { removeLink, updateLink, getLink } = useLinkStore();
+  const { removeLink, updateLink } = useLinkStore();
 
   const pinLink = async () => {
     const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
@@ -87,23 +87,6 @@ export default function LinkCard({ link, count, className }: Props) {
       toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
   };
 
-  const updateArchive = async () => {
-    const load = toast.loading("Sending request...");
-
-    const response = await fetch(`/api/v1/links/${link.id}/archive`, {
-      method: "PUT",
-    });
-
-    const data = await response.json();
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(`Link is being archived...`);
-      getLink(link.id as number);
-    } else toast.error(data.response);
-  };
-
   const deleteLink = async () => {
     const load = toast.loading("Deleting...");
 
@@ -227,7 +210,7 @@ export default function LinkCard({ link, count, className }: Props) {
       >
         {link.url && url ? (
           <Image
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
+            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
             width={64}
             height={64}
             alt=""
@@ -258,25 +241,24 @@ export default function LinkCard({ link, count, className }: Props) {
         </div>
 
         {link.url ? (
-          <Link
-            href={link.url || ""}
-            target="_blank"
+          <div
             onClick={(e) => {
-              e.stopPropagation();
+              e.preventDefault();
+              window.open(link.url || "", "_blank");
             }}
             className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-60 duration-100"
           >
             <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
             <p className="truncate w-full">{shortendURL}</p>
-          </Link>
+          </div>
         ) : (
           <div className="badge badge-primary badge-sm my-1">{link.type}</div>
         )}
 
-        <Link
-          href={`/collections/${link.collection.id}`}
+        <div
           onClick={(e) => {
-            e.stopPropagation();
+            e.preventDefault();
+            router.push(`/collections/${link.collection.id}`);
           }}
           className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
         >
@@ -286,7 +268,7 @@ export default function LinkCard({ link, count, className }: Props) {
             style={{ color: collection?.color }}
           />
           <p className="truncate capitalize w-full">{collection?.name}</p>
-        </Link>
+        </div>
 
         <div className="flex items-center gap-1 text-neutral">
           <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />

components/Modal.tsx

@@ -11,12 +11,14 @@ type Props = {
 
 export default function Modal({ toggleModal, className, children }: Props) {
   return (
-    <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
+    <div className="overflow-y-auto pt-2 sm:py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
       <ClickAwayHandler
         onClickOutside={toggleModal}
-        className={`m-auto w-11/12 max-w-2xl ${className || ""}`}
+        className={`w-full mt-auto sm:m-auto sm:w-11/12 sm:max-w-2xl ${
+          className || ""
+        }`}
       >
-        <div className="slide-up m-auto relative border-neutral-content rounded-2xl border-solid border shadow-2xl p-5 bg-base-100">
+        <div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
             className="absolute top-3 right-3 btn btn-sm outline-none btn-circle btn-ghost"

components/ModalContent/DeleteLinkModal.tsx

@@ -11,6 +11,7 @@ import Link from "next/link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLink, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import Modal from "../Modal";
+import { useRouter } from "next/router";
 
 type Props = {
   onClose: Function;
@@ -24,6 +25,8 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
   const { removeLink } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
 
+  const router = useRouter();
+
   useEffect(() => {
     setLink(activeLink);
   }, []);
@@ -37,6 +40,10 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
 
     response.ok && toast.success(`Link Deleted.`);
 
+    if (router.pathname.startsWith("/links/[id]")) {
+      router.push("/dashboard");
+    }
+
     onClose();
   };
 

layouts/LinkLayout.tsx

@@ -21,6 +21,9 @@ import { useSession } from "next-auth/react";
 import useCollectionStore from "@/store/collections";
 import EditLinkModal from "@/components/ModalContent/EditLinkModal";
 import Link from "next/link";
+import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
+import toast from "react-hot-toast";
+import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
 
 interface Props {
   children: ReactNode;
@@ -75,7 +78,21 @@ export default function LinkLayout({ children }: Props) {
       setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
   }, [link, collections]);
 
+  const deleteLink = async () => {
+    const load = toast.loading("Deleting...");
+
+    const response = await removeLink(link?.id as number);
+
+    toast.dismiss(load);
+
+    response.ok && toast.success(`Link Deleted.`);
+
+    router.push("/dashboard");
+  };
+
   const [editLinkModal, setEditLinkModal] = useState(false);
+  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
+  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
 
   return (
     <>
@@ -118,9 +135,7 @@ export default function LinkLayout({ children }: Props) {
               ) ? (
                 <div
                   title="Edit"
-                  onClick={() => {
-                    setEditLinkModal(true);
-                  }}
+                  onClick={() => setEditLinkModal(true)}
                   className={`btn btn-ghost btn-square btn-sm`}
                 >
                   <FontAwesomeIcon
@@ -131,22 +146,13 @@ export default function LinkLayout({ children }: Props) {
               ) : undefined}
 
               <div
-                onClick={() => {
-                  link
-                    ? setModal({
-                        modal: "LINK",
-                        state: true,
-                        active: link,
-                        method: "FORMATS",
-                      })
-                    : undefined;
-                }}
+                onClick={() => setPreservedFormatsModal(true)}
                 title="Preserved Formats"
-                className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+                className={`btn btn-ghost btn-square btn-sm`}
               >
                 <FontAwesomeIcon
                   icon={faBoxesStacked}
-                  className="w-6 h-6 text-neutral"
+                  className="w-4 h-4 text-neutral"
                 />
               </div>
 
@@ -155,18 +161,16 @@ export default function LinkLayout({ children }: Props) {
                 (e) => e.userId === userId && e.canDelete
               ) ? (
                 <div
-                  onClick={() => {
-                    if (link?.id) {
-                      removeLink(link.id);
-                      router.back();
-                    }
+                  onClick={(e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
                   }}
                   title="Delete"
-                  className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+                  className={`btn btn-ghost btn-square btn-sm`}
                 >
                   <FontAwesomeIcon
                     icon={faTrashCan}
-                    className="w-6 h-6 text-neutral"
+                    className="w-4 h-4 text-neutral"
                   />
                 </div>
               ) : undefined}
@@ -194,6 +198,18 @@ export default function LinkLayout({ children }: Props) {
             activeLink={link}
           />
         ) : undefined}
+        {link && deleteLinkModal ? (
+          <DeleteLinkModal
+            onClose={() => setDeleteLinkModal(false)}
+            activeLink={link}
+          />
+        ) : undefined}
+        {link && preservedFormatsModal ? (
+          <PreservedFormatsModal
+            onClose={() => setPreservedFormatsModal(false)}
+            activeLink={link}
+          />
+        ) : undefined}
       </div>
     </>
   );

lib/api/urlHandler.ts

@@ -37,6 +37,23 @@ export default async function urlHandler(
 
       const content = await page.content();
 
+      // TODO
+      // const session = await page.context().newCDPSession(page);
+
+      // const doc = await session.send("Page.captureSnapshot", {
+      //   format: "mhtml",
+      // });
+
+      // const saveDocLocally = (doc: any) => {
+      //   console.log(doc);
+      //   return createFile({
+      //     data: doc,
+      //     filePath: `archives/${targetLink.collectionId}/${linkId}.mhtml`,
+      //   });
+      // };
+
+      // saveDocLocally(doc.data);
+
       // Readability
 
       const window = new JSDOM("").window;

pages/collections/index.tsx

@@ -44,35 +44,6 @@ export default function Collections() {
                 <p>Collections you own</p>
               </div>
             </div>
-            <div className="relative mt-2">
-              <div className="dropdown dropdown-bottom">
-                <div
-                  tabIndex={0}
-                  role="button"
-                  className="btn btn-ghost btn-sm btn-square text-neutral"
-                >
-                  <FontAwesomeIcon
-                    icon={faEllipsis}
-                    title="More"
-                    className="w-5 h-5"
-                  />
-                </div>
-                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
-                  <li>
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        (document?.activeElement as HTMLElement)?.blur();
-                        setNewCollectionModal(true);
-                      }}
-                    >
-                      New Collection
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </div>
           </div>
 
           <div className="relative mt-2">