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();
   };