improvements

components/LinkDetails.tsx

@@ -30,15 +30,9 @@ type Props = {
   className?: string;
   link: LinkIncludingShortenedCollectionAndTags;
   standalone?: boolean;
-  editMode?: boolean;
 };
 
-export default function LinkDetails({
+export default function LinkDetails({ className, link, standalone }: Props) {
-  className,
-  link,
-  standalone,
-  editMode,
-}: Props) {
   const { t } = useTranslation();
   const session = useSession();
   const getLink = useGetLink();

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -6,11 +6,10 @@ import {
 import usePermissions from "@/hooks/usePermissions";
 import EditLinkModal from "@/components/ModalContent/EditLinkModal";
 import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
-import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
 import { useUser } from "@/hooks/store/user";
-import { useDeleteLink, useUpdateLink } from "@/hooks/store/links";
+import { useDeleteLink, useGetLink, useUpdateLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
 import LinkDetailModal from "@/components/ModalContent/LinkDetailModal";
 import { useRouter } from "next/router";
@@ -32,11 +31,11 @@ export default function LinkActions({
   const { t } = useTranslation();
 
   const permissions = usePermissions(link.collection.id as number);
+  const getLink = useGetLink();
 
   const [editLinkModal, setEditLinkModal] = useState(false);
   const [linkDetailModal, setLinkDetailModal] = useState(false);
   const [deleteLinkModal, setDeleteLinkModal] = useState(false);
-  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
 
   const { data: user = {} } = useUser();
 
@@ -69,6 +68,23 @@ export default function LinkActions({
     );
   };
 
+  const updateArchive = async () => {
+    const load = toast.loading(t("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) {
+      await getLink.mutateAsync({ id: link.id as number });
+
+      toast.success(t("link_being_archived"));
+    } else toast.error(data.response);
+  };
+
   const router = useRouter();
 
   const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
@@ -157,11 +173,11 @@ export default function LinkActions({
                   tabIndex={0}
                   onClick={() => {
                     (document?.activeElement as HTMLElement)?.blur();
-                    setPreservedFormatsModal(true);
+                    updateArchive();
                   }}
                   className="whitespace-nowrap"
                 >
-                  {t("preserved_formats")}
+                  {t("refresh_preserved_formats")}
                 </div>
               </li>
             )}
@@ -212,16 +228,12 @@ export default function LinkActions({
           activeLink={link}
         />
       )}
-      {preservedFormatsModal && (
-        <PreservedFormatsModal
-          onClose={() => setPreservedFormatsModal(false)}
-          link={link}
-        />
-      )}
       {linkDetailModal && (
         <LinkDetailModal
           onClose={() => setLinkDetailModal(false)}
           onEdit={() => setEditLinkModal(true)}
+          onPin={pinLink}
+          onUpdateArchive={updateArchive}
           onDelete={() => setDeleteLinkModal(true)}
           link={link}
         />

components/ModalContent/LinkDetailModal.tsx

@@ -12,18 +12,15 @@ import LinkDetails from "../LinkDetails";
 import Link from "next/link";
 import usePermissions from "@/hooks/usePermissions";
 import { useRouter } from "next/router";
-import { previewAvailable } from "@/lib/shared/getArchiveValidity";
-import Image from "next/image";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import toast from "react-hot-toast";
-import EditLinkModal from "./EditLinkModal";
-import DeleteLinkModal from "./DeleteLinkModal";
-import PreservedFormatsModal from "./PreservedFormatsModal";
 
 type Props = {
   onClose: Function;
   onEdit: Function;
   onDelete: Function;
+  onUpdateArchive: Function;
+  onPin: Function;
   link: LinkIncludingShortenedCollectionAndTags;
 };
 
@@ -31,6 +28,8 @@ export default function LinkDetailModal({
   onClose,
   onEdit,
   onDelete,
+  onUpdateArchive,
+  onPin,
   link,
 }: Props) {
   const { t } = useTranslation();
@@ -124,53 +123,6 @@ export default function LinkDetailModal({
   const updateLink = useUpdateLink();
   const deleteLink = useDeleteLink();
 
-  const pinLink = async () => {
-    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0] ? true : false;
-
-    const load = toast.loading(t("updating"));
-
-    await updateLink.mutateAsync(
-      {
-        ...link,
-        pinnedBy: isAlreadyPinned ? undefined : [{ id: user.id }],
-      },
-      {
-        onSettled: (data, error) => {
-          toast.dismiss(load);
-
-          if (error) {
-            toast.error(error.message);
-          } else {
-            toast.success(
-              isAlreadyPinned ? t("link_unpinned") : t("link_pinned")
-            );
-          }
-        },
-      }
-    );
-  };
-
-  const updateArchive = async () => {
-    const load = toast.loading(t("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) {
-      await getLink.mutateAsync({ id: link.id as number });
-
-      toast.success(t("link_being_archived"));
-    } else toast.error(data.response);
-  };
-
-  const [editLinkModal, setEditLinkModal] = useState(false);
-  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
-  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
-
   return (
     <Drawer toggleDrawer={onClose} className="sm:h-screen sm:flex relative">
       <div
@@ -197,7 +149,7 @@ export default function LinkDetailModal({
                 tabIndex={0}
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  pinLink();
+                  onPin();
                 }}
                 className="whitespace-nowrap"
               >
@@ -214,7 +166,8 @@ export default function LinkDetailModal({
                 tabIndex={0}
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  setEditLinkModal(true);
+                  onEdit();
+                  onClose();
                 }}
                 className="whitespace-nowrap"
               >
@@ -229,7 +182,7 @@ export default function LinkDetailModal({
                 tabIndex={0}
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  updateArchive();
+                  onUpdateArchive();
                 }}
                 className="whitespace-nowrap"
               >
@@ -281,20 +234,6 @@ export default function LinkDetailModal({
 
       <div className="w-full">
         <LinkDetails link={link} className="sm:mt-0 -mt-11" />
-
-        {/* {(permissions === true || permissions?.canUpdate) && (
-          <div className="mx-auto text-center">
-            <div
-              className="btn btn-sm btn-ghost"
-              onClick={() => {
-                onEdit();
-                onClose();
-              }}
-            >
-              {t("edit_link")}
-            </div>
-          </div>
-        )} */}
       </div>
     </Drawer>
   );

components/ModalContent/PreservedFormatsModal.tsx

@@ -1,246 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  LinkIncludingShortenedCollectionAndTags,
-  ArchivedFormat,
-  AccountSettings,
-} from "@/types/global";
-import toast from "react-hot-toast";
-import Link from "next/link";
-import Modal from "../Modal";
-import { useRouter } from "next/router";
-import { useSession } from "next-auth/react";
-import {
-  pdfAvailable,
-  readabilityAvailable,
-  monolithAvailable,
-  screenshotAvailable,
-} from "@/lib/shared/getArchiveValidity";
-import PreservedFormatRow from "@/components/PreserverdFormatRow";
-import getPublicUserData from "@/lib/client/getPublicUserData";
-import { useTranslation } from "next-i18next";
-import { BeatLoader } from "react-spinners";
-import { useUser } from "@/hooks/store/user";
-import { useGetLink } from "@/hooks/store/links";
-
-type Props = {
-  onClose: Function;
-  link: LinkIncludingShortenedCollectionAndTags;
-};
-
-export default function PreservedFormatsModal({ onClose, link }: Props) {
-  const { t } = useTranslation();
-  const session = useSession();
-  const getLink = useGetLink();
-  const { data: user = {} } = useUser();
-  const router = useRouter();
-
-  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
-
-  const [collectionOwner, setCollectionOwner] = useState<
-    Partial<AccountSettings>
-  >({});
-
-  useEffect(() => {
-    const fetchOwner = async () => {
-      if (link.collection.ownerId !== user.id) {
-        const owner = await getPublicUserData(
-          link.collection.ownerId as number
-        );
-        setCollectionOwner(owner);
-      } else if (link.collection.ownerId === user.id) {
-        setCollectionOwner({
-          id: user.id as number,
-          name: user.name,
-          username: user.username as string,
-          image: user.image as string,
-          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
-          archiveAsMonolith: user.archiveAsScreenshot as boolean,
-          archiveAsPDF: user.archiveAsPDF as boolean,
-        });
-      }
-    };
-
-    fetchOwner();
-  }, [link.collection.ownerId]);
-
-  const isReady = () => {
-    return (
-      link &&
-      (collectionOwner.archiveAsScreenshot === true
-        ? link.pdf && link.pdf !== "pending"
-        : true) &&
-      (collectionOwner.archiveAsMonolith === true
-        ? link.monolith && link.monolith !== "pending"
-        : true) &&
-      (collectionOwner.archiveAsPDF === true
-        ? link.pdf && link.pdf !== "pending"
-        : true) &&
-      link.readable &&
-      link.readable !== "pending"
-    );
-  };
-
-  const atLeastOneFormatAvailable = () => {
-    return (
-      screenshotAvailable(link) ||
-      pdfAvailable(link) ||
-      readabilityAvailable(link) ||
-      monolithAvailable(link)
-    );
-  };
-
-  useEffect(() => {
-    (async () => {
-      await getLink.mutateAsync({ id: link.id as number });
-    })();
-
-    let interval: NodeJS.Timeout | null = null;
-
-    if (!isReady()) {
-      interval = setInterval(async () => {
-        await getLink.mutateAsync({ id: link.id as number });
-      }, 5000);
-    } else {
-      if (interval) {
-        clearInterval(interval);
-      }
-    }
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [link?.monolith]);
-
-  const updateArchive = async () => {
-    const load = toast.loading(t("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) {
-      await getLink.mutateAsync({ id: link.id as number });
-
-      toast.success(t("link_being_archived"));
-    } else toast.error(data.response);
-  };
-
-  return (
-    <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">{t("preserved_formats")}</p>
-      <div className="divider mb-2 mt-1"></div>
-      {screenshotAvailable(link) ||
-      pdfAvailable(link) ||
-      readabilityAvailable(link) ||
-      monolithAvailable(link) ? (
-        <p className="mb-3">{t("available_formats")}</p>
-      ) : (
-        ""
-      )}
-
-      <div className={`flex flex-col gap-3`}>
-        {monolithAvailable(link) && (
-          <PreservedFormatRow
-            name={t("webpage")}
-            icon={"bi-filetype-html"}
-            format={ArchivedFormat.monolith}
-            link={link}
-            downloadable={true}
-          />
-        )}
-
-        {screenshotAvailable(link) && (
-          <PreservedFormatRow
-            name={t("screenshot")}
-            icon={"bi-file-earmark-image"}
-            format={
-              link?.image?.endsWith("png")
-                ? ArchivedFormat.png
-                : ArchivedFormat.jpeg
-            }
-            link={link}
-            downloadable={true}
-          />
-        )}
-
-        {pdfAvailable(link) && (
-          <PreservedFormatRow
-            name={t("pdf")}
-            icon={"bi-file-earmark-pdf"}
-            format={ArchivedFormat.pdf}
-            link={link}
-            downloadable={true}
-          />
-        )}
-
-        {readabilityAvailable(link) && (
-          <PreservedFormatRow
-            name={t("readable")}
-            icon={"bi-file-earmark-text"}
-            format={ArchivedFormat.readability}
-            link={link}
-          />
-        )}
-
-        {!isReady() && !atLeastOneFormatAvailable() ? (
-          <div className={`w-full h-full flex flex-col justify-center p-10`}>
-            <BeatLoader
-              color="oklch(var(--p))"
-              className="mx-auto mb-3"
-              size={30}
-            />
-
-            <p className="text-center text-2xl">{t("preservation_in_queue")}</p>
-            <p className="text-center text-lg">{t("check_back_later")}</p>
-          </div>
-        ) : (
-          !isReady() &&
-          atLeastOneFormatAvailable() && (
-            <div className={`w-full h-full flex flex-col justify-center p-5`}>
-              <BeatLoader
-                color="oklch(var(--p))"
-                className="mx-auto mb-3"
-                size={20}
-              />
-              <p className="text-center">{t("there_are_more_formats")}</p>
-              <p className="text-center text-sm">{t("check_back_later")}</p>
-            </div>
-          )
-        )}
-
-        <div
-          className={`flex flex-col sm:flex-row gap-3 items-center justify-center ${
-            isReady() ? "sm:mt " : ""
-          }`}
-        >
-          <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-1/2 justify-center items-center text-sm"
-          >
-            <p className="whitespace-nowrap">{t("view_latest_snapshot")}</p>
-            <i className="bi-box-arrow-up-right" />
-          </Link>
-          {link?.collection.ownerId === session.data?.user.id && (
-            <div className="btn btn-outline" onClick={updateArchive}>
-              <div>
-                <p>{t("refresh_preserved_formats")}</p>
-                <p className="text-xs">
-                  {t("this_deletes_current_preservations")}
-                </p>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </Modal>
-  );
-}