added new api route + fixed dropdown

2023-10-29 00:57:24 -04:00
parent 2856e23a4a
commit 16024f40be
12 changed files with 348 additions and 203 deletions
@@ -15,6 +15,13 @@ type Props = {
  className?: string;
 };

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

@@ -29,83 +36,86 @@ export default function CollectionCard({ collection, className }: Props) {
    }
  );

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

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

  return (
-    <div
-      style={{
-        backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
-          theme === "dark" ? "#262626" : "#f3f4f6"
-        } 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
-      }}
-      className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
-        className || ""
-      }`}
-    >
+    <>
      <div
-        onClick={() => setExpandDropdown(!expandDropdown)}
-        id={"expand-dropdown" + collection.id}
-        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+        style={{
+          backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
+            theme === "dark" ? "#262626" : "#f3f4f6"
+          } 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
+        }}
+        className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
+          className || ""
+        }`}
      >
-        <FontAwesomeIcon
-          icon={faEllipsis}
+        <div
+          onClick={(e) => setExpandDropdown({ x: e.clientX, y: e.clientY })}
          id={"expand-dropdown" + collection.id}
-          className="w-5 h-5 text-gray-500 dark:text-gray-300"
-        />
-      </div>
-      <Link
-        href={`/collections/${collection.id}`}
-        className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
-      >
-        <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
-          {collection.name}
-        </p>
-        <div className="flex justify-between items-center">
-          <div className="flex items-center w-full">
-            {collection.members
-              .sort((a, b) => (a.userId as number) - (b.userId as number))
-              .map((e, i) => {
-                return (
-                  <ProfilePhoto
-                    key={i}
-                    src={e.user.image ? e.user.image : undefined}
-                    className="-mr-3 border-[3px]"
-                  />
-                );
-              })
-              .slice(0, 4)}
-            {collection.members.length - 4 > 0 ? (
-              <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
-                +{collection.members.length - 4}
-              </div>
-            ) : null}
-          </div>
-          <div className="text-right w-40">
-            <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
-              {collection.isPublic ? (
-                <FontAwesomeIcon
-                  icon={faGlobe}
-                  title="This collection is being shared publicly."
-                  className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
-                />
-              ) : undefined}
-              <FontAwesomeIcon
-                icon={faLink}
-                className="w-5 h-5 text-gray-500 dark:text-gray-300"
-              />
-              {collection._count && collection._count.links}
-            </div>
-            <div className="flex items-center justify-end gap-1 text-gray-500 dark:text-gray-300">
-              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-              <p className="font-bold text-xs">{formattedDate}</p>
-            </div>
-          </div>
+          className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+        >
+          <FontAwesomeIcon
+            icon={faEllipsis}
+            id={"expand-dropdown" + collection.id}
+            className="w-5 h-5 text-gray-500 dark:text-gray-300"
+          />
        </div>
-      </Link>
+        <Link
+          href={`/collections/${collection.id}`}
+          className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
+        >
+          <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
+            {collection.name}
+          </p>
+          <div className="flex justify-between items-center">
+            <div className="flex items-center w-full">
+              {collection.members
+                .sort((a, b) => (a.userId as number) - (b.userId as number))
+                .map((e, i) => {
+                  return (
+                    <ProfilePhoto
+                      key={i}
+                      src={e.user.image ? e.user.image : undefined}
+                      className="-mr-3 border-[3px]"
+                    />
+                  );
+                })
+                .slice(0, 4)}
+              {collection.members.length - 4 > 0 ? (
+                <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
+                  +{collection.members.length - 4}
+                </div>
+              ) : null}
+            </div>
+            <div className="text-right w-40">
+              <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
+                {collection.isPublic ? (
+                  <FontAwesomeIcon
+                    icon={faGlobe}
+                    title="This collection is being shared publicly."
+                    className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
+                  />
+                ) : undefined}
+                <FontAwesomeIcon
+                  icon={faLink}
+                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                />
+                {collection._count && collection._count.links}
+              </div>
+              <div className="flex items-center justify-end gap-1 text-gray-500 dark:text-gray-300">
+                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+                <p className="font-bold text-xs">{formattedDate}</p>
+              </div>
+            </div>
+          </div>
+        </Link>
+      </div>
      {expandDropdown ? (
        <Dropdown
+          points={{ x: expandDropdown.x, y: expandDropdown.y }}
          items={[
            permissions === true
              ? {
@@ -161,9 +171,9 @@ export default function CollectionCard({ collection, className }: Props) {
            if (target.id !== "expand-dropdown" + collection.id)
              setExpandDropdown(false);
          }}
-          className="absolute top-[3.2rem] right-5 z-10 w-fit"
+          className="w-fit"
        />
      ) : null}
-    </div>
+    </>
  );
 }
@@ -19,9 +19,9 @@ type Props = {
  onClickOutside: Function;
  className?: string;
  items: MenuItem[];
-  points: { x: number; y: number };
+  points?: { x: number; y: number };
  style?: React.CSSProperties;
-  width: number; // in rem
+  width?: number; // in rem
 };

 export default function Dropdown({
@@ -33,6 +33,7 @@ export default function Dropdown({
 }: Props) {
  const [pos, setPos] = useState<{ x: number; y: number }>();
  const [dropdownHeight, setDropdownHeight] = useState<number>();
+  const [dropdownWidth, setDropdownWidth] = useState<number>();

  function convertRemToPixels(rem: number) {
    return (
@@ -41,48 +42,46 @@ export default function Dropdown({
  }

  useEffect(() => {
-    const dropdownWidth = convertRemToPixels(width);
+    if (points) {
+      let finalX = points.x;
+      let finalY = points.y;

-    let finalX = points.x;
-    let finalY = points.y;
+      // Check for x-axis overflow (left side)
+      if (dropdownWidth && points.x + dropdownWidth > window.innerWidth) {
+        finalX = points.x - dropdownWidth;
+      }

-    // Check for x-axis overflow (left side)
-    if (points.x + dropdownWidth > window.innerWidth) {
-      finalX = points.x - dropdownWidth;
+      // Check for y-axis overflow (bottom side)
+      if (dropdownHeight && points.y + dropdownHeight > window.innerHeight) {
+        finalY =
+          window.innerHeight -
+          (dropdownHeight + (window.innerHeight - points.y));
+      }
+
+      setPos({ x: finalX, y: finalY });
    }
-
-    // Check for y-axis overflow (bottom side)
-    if (dropdownHeight && points.y + dropdownHeight > window.innerHeight) {
-      finalY =
-        window.innerHeight - (dropdownHeight + (window.innerHeight - points.y));
-    }
-
-    setPos({ x: finalX, y: finalY });
  }, [points, width, dropdownHeight]);

-  useEffect(() => {
-    const dropdownWidth = convertRemToPixels(width);
-
-    if (points.x + dropdownWidth > window.innerWidth) {
-      setPos({ x: points.x - dropdownWidth, y: points.y });
-    } else setPos(points);
-  }, [points, width]);
-
  return (
-    pos && (
+    (!points || pos) && (
      <ClickAwayHandler
        onMount={(e) => {
          setDropdownHeight(e.height);
+          setDropdownWidth(e.width);
        }}
-        style={{
-          position: "fixed",
-          top: `${pos?.y}px`,
-          left: `${pos?.x}px`,
-        }}
+        style={
+          points
+            ? {
+                position: "fixed",
+                top: `${pos?.y}px`,
+                left: `${pos?.x}px`,
+              }
+            : undefined
+        }
        onClickOutside={onClickOutside}
        className={`${
          className || ""
-        } py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20 w-[${width}rem]`}
+        } py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
      >
        {items.map((e, i) => {
          const inner = e && (
@@ -71,7 +71,7 @@ export default function LinkCard({ link, count, className }: Props) {
    );
  }, [collections, links]);

-  const { removeLink, updateLink } = useLinkStore();
+  const { removeLink, updateLink, getLink } = useLinkStore();

  const pinLink = async () => {
    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
@@ -92,7 +92,7 @@ export default function LinkCard({ link, count, className }: Props) {
  };

  const updateArchive = async () => {
-    const load = toast.loading("Applying...");
+    const load = toast.loading("Sending request...");

    setExpandDropdown(false);

@@ -104,8 +104,10 @@ export default function LinkCard({ link, count, className }: Props) {

    toast.dismiss(load);

-    if (response.ok) toast.success(`Link is being archived.`);
-    else toast.error(data);
+    if (response.ok) {
+      toast.success(`Link is being archived...`);
+      getLink(link.id as number);
+    } else toast.error(data);
  };

  const deleteLink = async () => {
@@ -131,98 +133,100 @@ export default function LinkCard({ link, count, className }: Props) {
  );

  return (
-    <div
-      className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${
-        className || ""
-      }`}
-    >
-      {(permissions === true ||
-        permissions?.canUpdate ||
-        permissions?.canDelete) && (
-        <div
-          onClick={(e) => {
-            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"
-        >
-          <FontAwesomeIcon
-            icon={faEllipsis}
-            title="More"
-            className="w-5 h-5"
-            id={"expand-dropdown" + link.id}
-          />
-        </div>
-      )}
-
+    <>
      <div
-        onClick={() => {
-          setModal({
-            modal: "LINK",
-            state: true,
-            method: "UPDATE",
-            isOwnerOrMod:
-              permissions === true || (permissions?.canUpdate as boolean),
-            active: link,
-          });
-        }}
-        className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
+        className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${
+          className || ""
+        }`}
      >
-        {url && (
-          <Image
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-            width={64}
-            height={64}
-            alt=""
-            className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none"
-            draggable="false"
-            onError={(e) => {
-              const target = e.target as HTMLElement;
-              target.style.display = "none";
+        {(permissions === true ||
+          permissions?.canUpdate ||
+          permissions?.canDelete) && (
+          <div
+            onClick={(e) => {
+              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"
+          >
+            <FontAwesomeIcon
+              icon={faEllipsis}
+              title="More"
+              className="w-5 h-5"
+              id={"expand-dropdown" + link.id}
+            />
+          </div>
        )}

-        <div className="flex justify-between gap-5 w-full h-full z-0">
-          <div className="flex flex-col justify-between w-full">
-            <div className="flex items-baseline gap-1">
-              <p className="text-sm text-gray-500 dark:text-gray-300">
-                {count + 1}
-              </p>
-              <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
-                {unescapeString(link.name || link.description)}
-              </p>
-            </div>
-            <Link
-              href={`/collections/${link.collection.id}`}
-              onClick={(e) => {
-                e.stopPropagation();
+        <div
+          onClick={() => {
+            setModal({
+              modal: "LINK",
+              state: true,
+              method: "UPDATE",
+              isOwnerOrMod:
+                permissions === true || (permissions?.canUpdate as boolean),
+              active: link,
+            });
+          }}
+          className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
+        >
+          {url && (
+            <Image
+              src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
+              width={64}
+              height={64}
+              alt=""
+              className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none"
+              draggable="false"
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
              }}
-              className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100"
-            >
-              <FontAwesomeIcon
-                icon={faFolder}
-                className="w-4 h-4 mt-1 drop-shadow"
-                style={{ color: collection?.color }}
-              />
-              <p className="text-black dark:text-white truncate capitalize w-full">
-                {collection?.name}
-              </p>
-            </Link>
-            <Link
-              href={link.url}
-              target="_blank"
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-              className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
-            >
-              <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
-              <p className="truncate w-full">{shortendURL}</p>
-            </Link>
-            <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
-              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-              <p>{formattedDate}</p>
+            />
+          )}
+
+          <div className="flex justify-between gap-5 w-full h-full z-0">
+            <div className="flex flex-col justify-between w-full">
+              <div className="flex items-baseline gap-1">
+                <p className="text-sm text-gray-500 dark:text-gray-300">
+                  {count + 1}
+                </p>
+                <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
+                  {unescapeString(link.name || link.description)}
+                </p>
+              </div>
+              <Link
+                href={`/collections/${link.collection.id}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100"
+              >
+                <FontAwesomeIcon
+                  icon={faFolder}
+                  className="w-4 h-4 mt-1 drop-shadow"
+                  style={{ color: collection?.color }}
+                />
+                <p className="text-black dark:text-white truncate capitalize w-full">
+                  {collection?.name}
+                </p>
+              </Link>
+              <Link
+                href={link.url}
+                target="_blank"
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
+              >
+                <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
+                <p className="truncate w-full">{shortendURL}</p>
+              </Link>
+              <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
+                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+                <p>{formattedDate}</p>
+              </div>
            </div>
          </div>
        </div>
@@ -275,9 +279,9 @@ export default function LinkCard({ link, count, className }: Props) {
            if (target.id !== "expand-dropdown" + link.id)
              setExpandDropdown(false);
          }}
-          width={10}
+          className="w-40"
        />
      ) : null}
-    </div>
+    </>
  );
 }
@@ -23,15 +23,49 @@ import {
 import isValidUrl from "@/lib/client/isValidUrl";
 import { useTheme } from "next-themes";
 import unescapeString from "@/lib/client/unescapeString";
+import useLinkStore from "@/store/links";

 type Props = {
-  link: LinkIncludingShortenedCollectionAndTags;
+  linkId: number;
  isOwnerOrMod: boolean;
 };

-export default function LinkDetails({ link, isOwnerOrMod }: Props) {
+export default function LinkDetails({ linkId, isOwnerOrMod }: Props) {
  const { theme } = useTheme();

+  const { links, getLink } = useLinkStore();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>(
+    links.find(
+      (e) => e.id === linkId
+    ) as LinkIncludingShortenedCollectionAndTags
+  );
+
+  useEffect(() => {
+    setLink(
+      links.find(
+        (e) => e.id === linkId
+      ) as LinkIncludingShortenedCollectionAndTags
+    );
+  }, [links]);
+
+  useEffect(() => {
+    let interval: NodeJS.Timer | undefined;
+    if (link.screenshotPath === "pending" || link.pdfPath === "pending") {
+      interval = setInterval(() => getLink(link.id as number), 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link.screenshotPath, link.pdfPath]);
+
  const [imageError, setImageError] = useState<boolean>(false);
  const formattedDate = new Date(link.createdAt as string).toLocaleString(
    "en-US",
@@ -59,6 +93,14 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
    );
  }, [collections]);

+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
+    );
+  }, [collections]);
+
  const [colorPalette, setColorPalette] = useState<RGBColor[]>();

  const colorThief = new ColorThief();
@@ -64,7 +64,10 @@ export default function LinkModal({
        <Tab.Panels>
          {activeLink && method === "UPDATE" && (
            <Tab.Panel>
-              <LinkDetails link={activeLink} isOwnerOrMod={isOwnerOrMod} />
+              <LinkDetails
+                linkId={activeLink.id as number}
+                isOwnerOrMod={isOwnerOrMod}
+              />
            </Tab.Panel>
          )}

@@ -73,7 +76,9 @@ export default function LinkModal({
              <AddOrEditLink
                toggleLinkModal={toggleLinkModal}
                method="UPDATE"
-                activeLink={activeLink}
+                activeLink={
+                  activeLink as LinkIncludingShortenedCollectionAndTags
+                }
              />
            ) : (
              <AddOrEditLink
@@ -21,7 +21,7 @@ export default function SortDropdown({
        const target = e.target as HTMLInputElement;
        if (target.id !== "sort-dropdown") toggleSortDropdown();
      }}
-      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-48"
+      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-52"
    >
      <p className="mb-2 text-black dark:text-white text-center font-semibold">
        Sort by