[WIP]

2023-12-06 16:13:11 -05:00
parent 6f77882ffc
commit 4b1017f45b
12 changed files with 695 additions and 191 deletions
@@ -0,0 +1,254 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import Image from "next/image";
+import ColorThief, { RGBColor } from "colorthief";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faArrowUpRightFromSquare,
+  faBoxArchive,
+  faCloudArrowDown,
+  faFolder,
+} from "@fortawesome/free-solid-svg-icons";
+import useCollectionStore from "@/store/collections";
+import {
+  faCalendarDays,
+  faFileImage,
+  faFilePdf,
+} from "@fortawesome/free-regular-svg-icons";
+import isValidUrl from "@/lib/shared/isValidUrl";
+import unescapeString from "@/lib/client/unescapeString";
+import useLocalSettingsStore from "@/store/localSettings";
+import Modal from "../Modal";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  onClose: Function;
+};
+
+export default function LinkDetails({ link, onClose }: Props) {
+  const {
+    settings: { theme },
+  } = useLocalSettingsStore();
+
+  const [imageError, setImageError] = useState<boolean>(false);
+  const formattedDate = new Date(link.createdAt as string).toLocaleString(
+    "en-US",
+    {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    }
+  );
+
+  const { collections } = useCollectionStore();
+
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
+    );
+
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
+    );
+  }, [collections]);
+
+  const [colorPalette, setColorPalette] = useState<RGBColor[]>();
+
+  const colorThief = new ColorThief();
+
+  const url = link.url && isValidUrl(link.url) ? new URL(link.url) : undefined;
+
+  const handleDownload = (format: "png" | "pdf") => {
+    const path = `/api/v1/archives/${link.collection.id}/${link.id}.${format}`;
+    fetch(path)
+      .then((response) => {
+        if (response.ok) {
+          // Create a temporary link and click it to trigger the download
+          const link = document.createElement("a");
+          link.href = path;
+          link.download = format === "pdf" ? "PDF" : "Screenshot";
+          link.click();
+        } else {
+          console.error("Failed to download file");
+        }
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <div className={`relative flex gap-5 items-start mr-10`}>
+        {!imageError && url && (
+          <Image
+            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
+            width={42}
+            height={42}
+            alt=""
+            id={"favicon-" + link.id}
+            className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
+            draggable="false"
+            onLoad={(e) => {
+              try {
+                const color = colorThief.getPalette(
+                  e.target as HTMLImageElement,
+                  4
+                );
+
+                setColorPalette(color);
+              } catch (err) {
+                console.log(err);
+              }
+            }}
+            onError={(e) => {
+              setImageError(true);
+            }}
+          />
+        )}
+        <div className="flex w-full flex-col min-h-[3rem] justify-center drop-shadow">
+          <p className="text-2xl capitalize break-words hyphens-auto">
+            {unescapeString(link.name)}
+          </p>
+          <Link
+            href={link.url || ""}
+            target="_blank"
+            rel="noreferrer"
+            className={`${
+              link.name ? "text-sm" : "text-xl"
+            } text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit`}
+          >
+            {url ? url.host : link.url}
+          </Link>
+        </div>
+      </div>
+      <div className="flex gap-1 items-center flex-wrap">
+        <Link
+          href={`/collections/${link.collection.id}`}
+          className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
+        >
+          <FontAwesomeIcon
+            icon={faFolder}
+            className="w-5 h-5 drop-shadow"
+            style={{ color: collection?.color }}
+          />
+          <p
+            title={collection?.name}
+            className="text-lg truncate max-w-[12rem]"
+          >
+            {collection?.name}
+          </p>
+        </Link>
+        {link.tags.map((e, i) => (
+          <Link key={i} href={`/tags/${e.id}`} className="z-10">
+            <p
+              title={e.name}
+              className="px-2 py-1 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+            >
+              {e.name}
+            </p>
+          </Link>
+        ))}
+      </div>
+      {link.description && (
+        <>
+          <div className="max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
+            {unescapeString(link.description)}
+          </div>
+        </>
+      )}
+
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
+          <FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
+          <p>Archived Formats:</p>
+        </div>
+        <div
+          className="flex items-center gap-1 text-gray-500 dark:text-gray-300"
+          title={"Created at: " + formattedDate}
+        >
+          <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+          <p>{formattedDate}</p>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <div className="flex justify-between items-center p-2 border border-sky-100 dark:border-neutral-700 rounded-md">
+          <div className="flex gap-2 items-center">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
+              <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
+            </div>
+
+            <p>Screenshot</p>
+          </div>
+
+          <div className="flex gap-1">
+            <Link
+              href={`/api/v1/archives/${link.collectionId}/${link.id}.png`}
+              target="_blank"
+              rel="noreferrer"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="w-5 h-5 text-sky-500 dark:text-sky-500"
+              />
+            </Link>
+
+            <div
+              onClick={() => handleDownload("png")}
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faCloudArrowDown}
+                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center p-2 border border-sky-100 dark:border-neutral-700 rounded-md">
+          <div className="flex gap-2 items-center">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
+              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
+            </div>
+
+            <p>PDF</p>
+          </div>
+
+          <div className="flex gap-1">
+            <Link
+              href={`/api/v1/archives/${link.collectionId}/${link.id}.pdf`}
+              target="_blank"
+              rel="noreferrer"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="w-5 h-5 text-sky-500 dark:text-sky-500"
+              />
+            </Link>
+
+            <div
+              onClick={() => handleDownload("pdf")}
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faCloudArrowDown}
+                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}
@@ -64,7 +64,6 @@ export default function NewLinkModal({ onClose }: Props) {
  };

  useEffect(() => {
-    setOptionsExpanded(false);
    if (router.query.id) {
      const currentCollection = collections.find(
        (e) => e.id == Number(router.query.id)
@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from "react";
+import { Toaster } from "react-hot-toast";
+import CollectionSelection from "@/components/InputSelect/CollectionSelection";
+import TagSelection from "@/components/InputSelect/TagSelection";
+import TextInput from "@/components/TextInput";
+import unescapeString from "@/lib/client/unescapeString";
+import useLinkStore from "@/store/links";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import toast from "react-hot-toast";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faArrowUpRightFromSquare,
+  faCloudArrowDown,
+  faLink,
+  faTrashCan,
+  faUpRightFromSquare,
+} from "@fortawesome/free-solid-svg-icons";
+import Modal from "../Modal";
+import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+
+type Props = {
+  onClose: Function;
+  activeLink: LinkIncludingShortenedCollectionAndTags;
+};
+
+export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
+  const session = useSession();
+  const { links, getLink } = useLinkStore();
+
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+
+  const router = useRouter();
+
+  useEffect(() => {
+    let isPublicRoute = router.pathname.startsWith("/public")
+      ? true
+      : undefined;
+
+    (async () => {
+      const data = await getLink(link.id as number, isPublicRoute);
+      setLink(
+        (data as any).response as LinkIncludingShortenedCollectionAndTags
+      );
+    })();
+
+    let interval: NodeJS.Timer | undefined;
+    if (link?.screenshotPath === "pending" || link?.pdfPath === "pending") {
+      interval = setInterval(async () => {
+        const data = await getLink(link.id as number, isPublicRoute);
+        setLink(
+          (data as any).response as LinkIncludingShortenedCollectionAndTags
+        );
+      }, 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
+
+  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 handleDownload = (format: ArchivedFormat) => {
+    const path = `/api/v1/archives/${link?.id}?format=${format}`;
+    fetch(path)
+      .then((response) => {
+        if (response.ok) {
+          // Create a temporary link and click it to trigger the download
+          const link = document.createElement("a");
+          link.href = path;
+          link.download = format === ArchivedFormat.png ? "Screenshot" : "PDF";
+          link.click();
+        } else {
+          console.error("Failed to download file");
+        }
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">Preserved Formats</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className={`flex flex-col gap-3`}>
+        {link?.screenshotPath && link?.screenshotPath !== "pending" ? (
+          <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+            <div className="flex gap-2 items-center">
+              <div className="bg-primary text-primary-content p-2 rounded-l-md">
+                <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
+              </div>
+
+              <p>Screenshot</p>
+            </div>
+
+            <div className="flex gap-1">
+              <div
+                onClick={() => handleDownload(ArchivedFormat.png)}
+                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+              >
+                <FontAwesomeIcon
+                  icon={faCloudArrowDown}
+                  className="w-5 h-5 cursor-pointer text-neutral"
+                />
+              </div>
+
+              <Link
+                href={`/api/v1/archives/${link?.id}?format=${
+                  link.screenshotPath.endsWith("png")
+                    ? ArchivedFormat.png
+                    : ArchivedFormat.jpeg
+                }`}
+                target="_blank"
+                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+              >
+                <FontAwesomeIcon
+                  icon={faUpRightFromSquare}
+                  className="w-5 h-5 text-neutral"
+                />
+              </Link>
+            </div>
+          </div>
+        ) : undefined}
+
+        {link?.pdfPath && link.pdfPath !== "pending" ? (
+          <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+            <div className="flex gap-2 items-center">
+              <div className="bg-primary text-primary-content p-2 rounded-l-md">
+                <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
+              </div>
+
+              <p>PDF</p>
+            </div>
+
+            <div className="flex gap-1">
+              <div
+                onClick={() => handleDownload(ArchivedFormat.pdf)}
+                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+              >
+                <FontAwesomeIcon
+                  icon={faCloudArrowDown}
+                  className="w-5 h-5 cursor-pointer text-neutral"
+                />
+              </div>
+
+              <Link
+                href={`/api/v1/archives/${link?.id}?format=${ArchivedFormat.pdf}`}
+                target="_blank"
+                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+              >
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="w-5 h-5 text-neutral"
+                />
+              </Link>
+            </div>
+          </div>
+        ) : undefined}
+
+        <div className="flex flex-col-reverse sm:flex-row sm:gap-3 items-center justify-center">
+          {link?.collection.ownerId === session.data?.user.id ? (
+            <div
+              className={`btn btn-accent text-white ${
+                link?.pdfPath &&
+                link?.screenshotPath &&
+                link?.pdfPath !== "pending" &&
+                link?.screenshotPath !== "pending"
+                  ? "mt-3"
+                  : ""
+              }`}
+              onClick={() => updateArchive()}
+            >
+              <div>
+                <p>Update Preserved Formats</p>
+                <p className="text-xs">(Refresh Link)</p>
+              </div>
+            </div>
+          ) : undefined}
+          <Link
+            href={`https://web.archive.org/web/${link?.url?.replace(
+              /(^\w+:|^)\/\//,
+              ""
+            )}`}
+            target="_blank"
+            className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-fit items-center text-sm ${
+              link?.pdfPath &&
+              link?.screenshotPath &&
+              link?.pdfPath !== "pending" &&
+              link?.screenshotPath !== "pending"
+                ? "sm:mt-3"
+                : ""
+            }`}
+          >
+            <p className="whitespace-nowrap">
+              View Latest Snapshot on archive.org
+            </p>
+            <FontAwesomeIcon
+              icon={faArrowUpRightFromSquare}
+              className="w-4 h-4"
+            />
+          </Link>
+        </div>
+      </div>
+    </Modal>
+  );
+}