many bug fixes and improvements

pages/preserved/[id].tsx

@@ -46,7 +46,14 @@ export default function Index() {
         <img
           alt=""
           src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.png}`}
-          className="object-contain w-full h-screen"
+          className="w-fit mx-auto"
+        />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.jpeg && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}`}
+          className="w-fit mx-auto"
         />
       )}
     </div>

pages/public/collections/[id].tsx

@@ -96,11 +96,11 @@ export default function PublicCollections() {
 
   return collection ? (
     <div
-      className="h-screen"
+      className="h-96"
       style={{
         backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
           settings.theme === "dark" ? "#262626" : "#f3f4f6"
-        } 18rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+        } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
       }}
     >
       {collection ? (
@@ -208,6 +208,11 @@ export default function PublicCollections() {
             {links
               ?.filter((e) => e.collectionId === Number(router.query.id))
               .map((e, i) => {
+                const linkWithCollectionData = {
+                  ...e,
+                  collection: collection, // Append collection data
+                };
+
                 return (
                   <motion.div
                     key={i}
@@ -216,7 +221,10 @@ export default function PublicCollections() {
                     viewport={{ once: true, amount: 0.8 }}
                   >
                     <motion.div variants={cardVariants}>
-                      <PublicLinkCard link={e as any} count={i} />
+                      <PublicLinkCard
+                        link={linkWithCollectionData as any}
+                        count={i}
+                      />
                     </motion.div>
                   </motion.div>
                 );

pages/public/preserved/[id].tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import { useRouter } from "next/router";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import ReadableView from "@/components/ReadableView";
+
+export default function Index() {
+  const { links, getLink } = useLinkStore();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : false;
+
+  useEffect(() => {
+    const fetchLink = async () => {
+      if (router.query.id) {
+        await getLink(Number(router.query.id), isPublic);
+      }
+    };
+
+    fetchLink();
+  }, []);
+
+  useEffect(() => {
+    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  return (
+    <div className="relative">
+      {/* <div className="fixed left-1/2 transform -translate-x-1/2 w-fit py-1 px-3 bg-base-200 border border-neutral-content rounded-md">
+        Readable
+      </div> */}
+      {link && Number(router.query.format) === ArchivedFormat.readability && (
+        <ReadableView link={link} />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.pdf && (
+        <iframe
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
+          className="w-full h-screen border-none"
+        ></iframe>
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.png && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.png}`}
+          className="w-fit mx-auto"
+        />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.jpeg && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}`}
+          className="w-fit mx-auto"
+        />
+      )}
+    </div>
+  );
+}

pages/settings/account.tsx

@@ -10,7 +10,6 @@ import SubmitButton from "@/components/SubmitButton";
 import React from "react";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import Link from "next/link";
-import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Checkbox from "@/components/Checkbox";
 
 export default function Account() {
@@ -85,9 +84,9 @@ export default function Account() {
     setSubmitLoader(false);
   };
 
-  const [importDropdown, setImportDropdown] = useState(false);
-
   const importBookmarks = async (e: any, format: MigrationFormat) => {
+    setSubmitLoader(true);
+
     const file: File = e.target.files[0];
 
     if (file) {
@@ -112,18 +111,19 @@ export default function Account() {
 
         toast.dismiss(load);
 
-        toast.success("Imported the Bookmarks! Reloading the page...");
-
-        setImportDropdown(false);
-
-        setTimeout(() => {
-          location.reload();
-        }, 2000);
+        if (response.ok) {
+          toast.success("Imported the Bookmarks! Reloading the page...");
+          setTimeout(() => {
+            location.reload();
+          }, 2000);
+        } else toast.error(data.response as string);
       };
       reader.onerror = function (e) {
         console.log("Error:", e);
       };
     }
+
+    setSubmitLoader(false);
   };
 
   const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState("");