Revert "Feat/customizable links"

2024-08-18 14:46:52 -04:00
parent ee2319996b
commit 9a3e82470a
28 changed files with 326 additions and 976 deletions
@@ -12,20 +12,22 @@ 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) {
@@ -34,7 +36,6 @@ 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);

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

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

-                          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
@@ -219,13 +202,9 @@ export default function LinkActions({
          link={link}
        />
      ) : undefined}
-      {linkDetailModal ? (
-        <LinkDetailModal
-          onClose={() => setLinkDetailModal(false)}
-          onEdit={() => setEditLinkModal(true)}
-          link={link}
-        />
-      ) : undefined}
+      {/* {expandedLink ? (
+                <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
+              ) : undefined} */}
    </>
  );
 }
@@ -22,7 +22,6 @@ 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;
@@ -91,10 +90,6 @@ 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;

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

@@ -115,6 +110,8 @@ 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
  )
@@ -199,10 +196,63 @@ 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,6 +80,8 @@ 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
  )
@@ -94,7 +96,7 @@ export default function LinkCardCompact({
    <>
      <div
        className={`${selectedStyle} border relative items-center flex ${
-          !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
        } duration-200 rounded-lg w-full`}
        onClick={() =>
          selectable
@@ -104,6 +106,20 @@ 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={() =>
@@ -141,6 +157,8 @@ 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({ id: link.id as number });
+        getLink.mutateAsync(link.id as number);
      }, 5000);
    }

@@ -107,6 +107,8 @@ 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
  )
@@ -205,6 +207,57 @@ 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}
@@ -213,6 +266,8 @@ 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>