added rearchive functionallity + dropdown fix [WIP]

2023-10-28 05:57:53 -04:00
parent 9b6038201c
commit ac795cdbdc
6 changed files with 169 additions and 62 deletions
@@ -28,12 +28,19 @@ type Props = {
  className?: string;
 };

+type DropdownTrigger =
+  | {
+      x: number;
+      y: number;
+    }
+  | false;
+
 export default function LinkCard({ link, count, className }: Props) {
  const { setModal } = useModalStore();

  const permissions = usePermissions(link.collection.id as number);

-  const [expandDropdown, setExpandDropdown] = useState(false);
+  const [expandDropdown, setExpandDropdown] = useState<DropdownTrigger>(false);

  const { collections } = useCollectionStore();

@@ -84,6 +91,23 @@ export default function LinkCard({ link, count, className }: Props) {
      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
  };

+  const updateArchive = async () => {
+    const load = toast.loading("Applying...");
+
+    setExpandDropdown(false);
+
+    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.`);
+    else toast.error(data);
+  };
+
  const deleteLink = async () => {
    const load = toast.loading("Deleting...");

@@ -114,7 +138,10 @@ export default function LinkCard({ link, count, className }: Props) {
        permissions?.canUpdate ||
        permissions?.canDelete) && (
        <div
-          onClick={() => setExpandDropdown(!expandDropdown)}
+          onClick={(e) => {
+            console.log();
+            setExpandDropdown({ x: e.clientX, y: e.clientY });
+          }}
          id={"expand-dropdown" + link.id}
          className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
        >
@@ -228,6 +255,12 @@ export default function LinkCard({ link, count, className }: Props) {
                  },
                }
              : undefined,
+            permissions === true
+              ? {
+                  name: "Update Archive",
+                  onClick: updateArchive,
+                }
+              : undefined,
            permissions === true || permissions?.canDelete
              ? {
                  name: "Delete",
@@ -228,72 +228,77 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
          <p>{formattedDate}</p>
        </div>
      </div>
+
      <div className="flex flex-col gap-2">
-        <div className="flex justify-between items-center pr-1 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-l-md">
-              <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
+        {link.screenshotPath && link.screenshotPath !== "pending" ? (
+          <div className="flex justify-between items-center pr-1 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-l-md">
+                <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
+              </div>
+
+              <p className="text-black dark:text-white">Screenshot</p>
            </div>

-            <p className="text-black dark:text-white">Screenshot</p>
-          </div>
+            <div className="flex text-black dark:text-white gap-1">
+              <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 className="flex text-black dark:text-white gap-1">
-            <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"
-              />
+              <Link
+                href={`/api/v1/archives/${link.collectionId}/${link.id}.png`}
+                target="_blank"
+                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>
+          </div>
+        ) : undefined}
+
+        {link.pdfPath && link.pdfPath !== "pending" ? (
+          <div className="flex justify-between items-center pr-1 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-l-md">
+                <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
+              </div>
+
+              <p className="text-black dark:text-white">PDF</p>
            </div>

-            <Link
-              href={`/api/v1/archives/${link.collectionId}/${link.id}.png`}
-              target="_blank"
-              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>
-        </div>
+            <div className="flex text-black dark:text-white gap-1">
+              <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 className="flex justify-between items-center pr-1 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-l-md">
-              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
+              <Link
+                href={`/api/v1/archives/${link.collectionId}/${link.id}.pdf`}
+                target="_blank"
+                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>
-
-            <p className="text-black dark:text-white">PDF</p>
          </div>
-
-          <div className="flex text-black dark:text-white gap-1">
-            <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>
-
-            <Link
-              href={`/api/v1/archives/${link.collectionId}/${link.id}.pdf`}
-              target="_blank"
-              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>
-        </div>
+        ) : undefined}

        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
          <div className="flex gap-2 items-center">