added details drawer

2024-08-18 02:55:59 -04:00
parent a40026040c
commit c18a5f4162
25 changed files with 881 additions and 310 deletions
@@ -12,22 +12,20 @@ import { useTranslation } from "next-i18next";
 import { useUser } from "@/hooks/store/user";
 import { useDeleteLink, useUpdateLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
+import LinkDetailModal from "@/components/ModalContent/LinkDetailModal";
+import { useRouter } from "next/router";

 type Props = {
  link: LinkIncludingShortenedCollectionAndTags;
  collection: CollectionIncludingMembersAndLinkCount;
  position?: string;
-  toggleShowInfo?: () => void;
-  linkInfo?: boolean;
  alignToTop?: boolean;
  flipDropdown?: boolean;
 };

 export default function LinkActions({
  link,
-  toggleShowInfo,
  position,
-  linkInfo,
  alignToTop,
  flipDropdown,
 }: Props) {
@@ -36,6 +34,7 @@ export default function LinkActions({
  const permissions = usePermissions(link.collection.id as number);

  const [editLinkModal, setEditLinkModal] = useState(false);
+  const [linkDetailModal, setLinkDetailModal] = useState(false);
  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);

@@ -70,119 +69,137 @@ export default function LinkActions({
    );
  };

+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
  return (
    <>
-      <div
-        className={`dropdown dropdown-left absolute ${
-          position || "top-3 right-3"
-        } ${alignToTop ? "" : "dropdown-end"} z-20`}
-      >
+      {isPublicRoute ? (
        <div
-          tabIndex={0}
-          role="button"
-          onMouseDown={dropdownTriggerer}
-          className="btn btn-ghost btn-sm btn-square text-neutral"
+          className={`absolute ${position || "top-3 right-3"} ${
+            alignToTop ? "" : "dropdown-end"
+          } z-20`}
+          onClick={() => setLinkDetailModal(true)}
        >
-          <i title="More" className="bi-three-dots text-xl" />
+          <div className="btn btn-ghost btn-sm btn-square text-neutral">
+            <i title="More" className="bi-three-dots text-xl" />
+          </div>
        </div>
-        <ul
-          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mr-1 ${
-            alignToTop ? "" : "translate-y-10"
-          }`}
+      ) : (
+        <div
+          className={`dropdown dropdown-left absolute ${
+            position || "top-3 right-3"
+          } ${alignToTop ? "" : "dropdown-end"} z-20`}
        >
-          <li>
-            <div
-              role="button"
-              tabIndex={0}
-              onClick={() => {
-                (document?.activeElement as HTMLElement)?.blur();
-                pinLink();
-              }}
-              className="whitespace-nowrap"
-            >
-              {link?.pinnedBy && link.pinnedBy[0]
-                ? t("unpin")
-                : t("pin_to_dashboard")}
-            </div>
-          </li>
-          {linkInfo !== undefined && toggleShowInfo ? (
+          <div
+            tabIndex={0}
+            role="button"
+            onMouseDown={dropdownTriggerer}
+            className="btn btn-ghost btn-sm btn-square text-neutral"
+          >
+            <i title="More" className="bi-three-dots text-xl" />
+          </div>
+          <ul
+            className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mr-1 ${
+              alignToTop ? "" : "translate-y-10"
+            }`}
+          >
+            {permissions === true ||
+              (permissions?.canUpdate && (
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      pinLink();
+                    }}
+                    className="whitespace-nowrap"
+                  >
+                    {link?.pinnedBy && link.pinnedBy[0]
+                      ? t("unpin")
+                      : t("pin_to_dashboard")}
+                  </div>
+                </li>
+              ))}
            <li>
              <div
                role="button"
                tabIndex={0}
                onClick={() => {
                  (document?.activeElement as HTMLElement)?.blur();
-                  toggleShowInfo();
+                  setLinkDetailModal(true);
                }}
                className="whitespace-nowrap"
              >
-                {!linkInfo ? t("show_link_details") : t("hide_link_details")}
+                {t("show_link_details")}
              </div>
            </li>
-          ) : undefined}
-          {permissions === true || permissions?.canUpdate ? (
-            <li>
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  setEditLinkModal(true);
-                }}
-                className="whitespace-nowrap"
-              >
-                {t("edit_link")}
-              </div>
-            </li>
-          ) : undefined}
-          {link.type === "url" && (
-            <li>
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  setPreservedFormatsModal(true);
-                }}
-                className="whitespace-nowrap"
-              >
-                {t("preserved_formats")}
-              </div>
-            </li>
-          )}
-          {permissions === true || permissions?.canDelete ? (
-            <li>
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={async (e) => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey
-                    ? async () => {
-                        const load = toast.loading(t("deleting"));
+            {permissions === true || permissions?.canUpdate ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setEditLinkModal(true);
+                  }}
+                  className="whitespace-nowrap"
+                >
+                  {t("edit_link")}
+                </div>
+              </li>
+            ) : undefined}
+            {link.type === "url" && (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setPreservedFormatsModal(true);
+                  }}
+                  className="whitespace-nowrap"
+                >
+                  {t("preserved_formats")}
+                </div>
+              </li>
+            )}
+            {permissions === true || permissions?.canDelete ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={async (e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey
+                      ? async () => {
+                          const load = toast.loading(t("deleting"));

-                        await deleteLink.mutateAsync(link.id as number, {
-                          onSettled: (data, error) => {
-                            toast.dismiss(load);
+                          await deleteLink.mutateAsync(link.id as number, {
+                            onSettled: (data, error) => {
+                              toast.dismiss(load);

-                            if (error) {
-                              toast.error(error.message);
-                            } else {
-                              toast.success(t("deleted"));
-                            }
-                          },
-                        });
-                      }
-                    : setDeleteLinkModal(true);
-                }}
-                className="whitespace-nowrap"
-              >
-                {t("delete")}
-              </div>
-            </li>
-          ) : undefined}
-        </ul>
-      </div>
+                              if (error) {
+                                toast.error(error.message);
+                              } else {
+                                toast.success(t("deleted"));
+                              }
+                            },
+                          });
+                        }
+                      : setDeleteLinkModal(true);
+                  }}
+                  className="whitespace-nowrap"
+                >
+                  {t("delete")}
+                </div>
+              </li>
+            ) : undefined}
+          </ul>
+        </div>
+      )}

      {editLinkModal ? (
        <EditLinkModal
@@ -202,9 +219,13 @@ export default function LinkActions({
          link={link}
        />
      ) : undefined}
-      {/* {expandedLink ? (
-                <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
-              ) : undefined} */}
+      {linkDetailModal ? (
+        <LinkDetailModal
+          onClose={() => setLinkDetailModal(false)}
+          onEdit={() => setEditLinkModal(true)}
+          link={link}
+        />
+      ) : undefined}
    </>
  );
 }
@@ -22,6 +22,7 @@ import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
+import { useRouter } from "next/router";

 type Props = {
  link: LinkIncludingShortenedCollectionAndTags;
@@ -90,6 +91,10 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
  const isVisible = useOnScreen(ref);
  const permissions = usePermissions(collection?.id as number);

+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
+
  useEffect(() => {
    let interval: any;

@@ -99,7 +104,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
      link.preview !== "unavailable"
    ) {
      interval = setInterval(async () => {
-        getLink.mutateAsync(link.id as number);
+        getLink.mutateAsync({ id: link.id as number, isPublicRoute: isPublic });
      }, 5000);
    }

@@ -110,8 +115,6 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
    };
  }, [isVisible, link.preview]);

-  const [showInfo, setShowInfo] = useState(false);
-
  const selectedStyle = selectedLinks.some(
    (selectedLink) => selectedLink.id === link.id
  )
@@ -196,63 +199,10 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
        </div>
      </div>

-      {showInfo && (
-        <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-[0.9rem] fade-in overflow-y-auto">
-          <div
-            onClick={() => setShowInfo(!showInfo)}
-            className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
-          >
-            <i className="bi-x text-neutral text-2xl"></i>
-          </div>
-          <p className="text-neutral text-lg font-semibold">
-            {t("description")}
-          </p>
-
-          <hr className="divider my-2 border-t border-neutral-content h-[1px]" />
-          <p>
-            {link.description ? (
-              unescapeString(link.description)
-            ) : (
-              <span className="text-neutral text-sm">
-                {t("no_description")}
-              </span>
-            )}
-          </p>
-          {link.tags && link.tags[0] && (
-            <>
-              <p className="text-neutral text-lg mt-3 font-semibold">
-                {t("tags")}
-              </p>
-
-              <hr className="divider my-2 border-t border-neutral-content h-[1px]" />
-
-              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                <div className="flex gap-1 items-center flex-wrap">
-                  {link.tags.map((e, i) => (
-                    <Link
-                      href={"/tags/" + e.id}
-                      key={i}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
-                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                    >
-                      #{e.name}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
      <LinkActions
        link={link}
        collection={collection}
        position="top-[10.75rem] right-3"
-        toggleShowInfo={() => setShowInfo(!showInfo)}
-        linkInfo={showInfo}
        flipDropdown={flipDropdown}
      />
    </div>
@@ -80,8 +80,6 @@ export default function LinkCardCompact({

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

-  const [showInfo, setShowInfo] = useState(false);
-
  const selectedStyle = selectedLinks.some(
    (selectedLink) => selectedLink.id === link.id
  )
@@ -96,7 +94,7 @@ export default function LinkCardCompact({
    <>
      <div
        className={`${selectedStyle} border relative items-center flex ${
-          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+          !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
        } duration-200 rounded-lg w-full`}
        onClick={() =>
          selectable
@@ -106,20 +104,6 @@ export default function LinkCardCompact({
              : undefined
        }
      >
-        {/* {showCheckbox &&
-          editMode &&
-          (permissions === true ||
-            permissions?.canCreate ||
-            permissions?.canDelete) && (
-            <input
-              type="checkbox"
-              className="checkbox checkbox-primary my-auto mr-2"
-              checked={selectedLinks.some(
-                (selectedLink) => selectedLink.id === link.id
-              )}
-              onChange={() => handleCheckboxClick(link)}
-            />
-          )} */}
        <div
          className="flex items-center cursor-pointer w-full"
          onClick={() =>
@@ -157,8 +141,6 @@ export default function LinkCardCompact({
          collection={collection}
          position="top-3 right-3"
          flipDropdown={flipDropdown}
-          // toggleShowInfo={() => setShowInfo(!showInfo)}
-          // linkInfo={showInfo}
        />
      </div>
      <div
@@ -96,7 +96,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
      link.preview !== "unavailable"
    ) {
      interval = setInterval(async () => {
-        getLink.mutateAsync(link.id as number);
+        getLink.mutateAsync({ id: link.id as number });
      }, 5000);
    }

@@ -107,8 +107,6 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
    };
  }, [isVisible, link.preview]);

-  const [showInfo, setShowInfo] = useState(false);
-
  const selectedStyle = selectedLinks.some(
    (selectedLink) => selectedLink.id === link.id
  )
@@ -207,57 +205,6 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
        </div>
      </div>

-      {showInfo && (
-        <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
-          <div
-            onClick={() => setShowInfo(!showInfo)}
-            className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
-          >
-            <i className="bi-x text-neutral text-2xl"></i>
-          </div>
-          <p className="text-neutral text-lg font-semibold">
-            {t("description")}
-          </p>
-
-          <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-          <p>
-            {link.description ? (
-              unescapeString(link.description)
-            ) : (
-              <span className="text-neutral text-sm">
-                {t("no_description")}
-              </span>
-            )}
-          </p>
-          {link.tags && link.tags[0] && (
-            <>
-              <p className="text-neutral text-lg mt-3 font-semibold">
-                {t("tags")}
-              </p>
-
-              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-
-              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                <div className="flex gap-1 items-center flex-wrap">
-                  {link.tags.map((e, i) => (
-                    <Link
-                      href={"/tags/" + e.id}
-                      key={i}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
-                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                    >
-                      #{e.name}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
      <LinkActions
        link={link}
        collection={collection}
@@ -266,8 +213,6 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
            ? "top-[10.75rem] right-3"
            : "top-[.75rem] right-3"
        }
-        toggleShowInfo={() => setShowInfo(!showInfo)}
-        linkInfo={showInfo}
        flipDropdown={flipDropdown}
      />
    </div>