From 3de8872f26002f6e1c39f70f95a09eebeb8d0ae2 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Wed, 4 Sep 2024 22:19:40 -0400 Subject: [PATCH] upload preview functionality --- components/IconPopover.tsx | 99 +++++++++--- components/LinkDetails.tsx | 78 +++++----- .../LinkViews/LinkComponents/LinkActions.tsx | 39 ++--- .../LinkViews/LinkComponents/LinkCard.tsx | 2 +- .../LinkViews/LinkComponents/LinkIcon.tsx | 2 - .../LinkViews/LinkComponents/LinkMasonry.tsx | 2 +- components/ModalContent/LinkModal.tsx | 143 ++++-------------- components/ViewDropdown.tsx | 6 +- hooks/store/links.tsx | 37 +++++ .../links/linkId/updateLinkById.ts | 8 +- pages/api/v1/archives/[linkId].ts | 95 +++++++++++- public/locales/en/common.json | 2 +- 12 files changed, 301 insertions(+), 212 deletions(-) diff --git a/components/IconPopover.tsx b/components/IconPopover.tsx index febca0e..1208661 100644 --- a/components/IconPopover.tsx +++ b/components/IconPopover.tsx @@ -39,32 +39,10 @@ const IconPopover = ({ onClose={() => onClose()} className={clsx( className, - "fade-in bg-base-200 border border-neutral-content p-2 h-44 w-[22.5rem] rounded-lg shadow-md" + "fade-in bg-base-200 border border-neutral-content p-2 w-[22.5rem] rounded-lg shadow-md" )} >
-
-
} - > - {t("reset")} -
- - setColor(e)} /> -
-
setQuery(e.target.value)} /> -
+
+ +
+ setColor(e)} /> + +
+ + + + + + +
+
+
} + > + {t("reset_defaults")} +
diff --git a/components/LinkDetails.tsx b/components/LinkDetails.tsx index b6aade5..5c71ff7 100644 --- a/components/LinkDetails.tsx +++ b/components/LinkDetails.tsx @@ -4,7 +4,6 @@ import { ArchivedFormat, } from "@/types/global"; import Link from "next/link"; -import { useSession } from "next-auth/react"; import { pdfAvailable, readabilityAvailable, @@ -17,7 +16,11 @@ import getPublicUserData from "@/lib/client/getPublicUserData"; import { useTranslation } from "next-i18next"; import { BeatLoader } from "react-spinners"; import { useUser } from "@/hooks/store/user"; -import { useGetLink, useUpdateLink } from "@/hooks/store/links"; +import { + useGetLink, + useUpdateLink, + useUpdatePreview, +} from "@/hooks/store/links"; import LinkIcon from "./LinkViews/LinkComponents/LinkIcon"; import CopyButton from "./CopyButton"; import { useRouter } from "next/router"; @@ -31,6 +34,7 @@ import TagSelection from "./InputSelect/TagSelection"; import unescapeString from "@/lib/client/unescapeString"; import IconPopover from "./IconPopover"; import TextInput from "./TextInput"; +import usePermissions from "@/hooks/usePermissions"; type Props = { className?: string; @@ -50,8 +54,13 @@ export default function LinkDetails({ const [link, setLink] = useState(activeLink); + useEffect(() => { + setLink(activeLink); + }, [activeLink]); + + const permissions = usePermissions(link.collection.id as number); + const { t } = useTranslation(); - const session = useSession(); const getLink = useGetLink(); const { data: user = {} } = useUser(); @@ -140,13 +149,14 @@ export default function LinkDetails({ clearInterval(interval); } }; - }, [link?.monolith]); + }, [link.monolith]); const router = useRouter(); const isPublicRoute = router.pathname.startsWith("/public") ? true : false; const updateLink = useUpdateLink(); + const updatePreview = useUpdatePreview(); const submit = async (e?: any) => { e?.preventDefault(); @@ -169,7 +179,6 @@ export default function LinkDetails({ } else { toast.success(t("updated")); setMode && setMode("view"); - console.log(data); setLink(data); } }, @@ -208,7 +217,7 @@ export default function LinkDetails({ > {previewAvailable(link) ? (
)} - {!standalone && ( + {!standalone && (permissions === true || permissions?.canUpdate) && (
- {standalone ? ( -
- setIconPopover(true)} /> -
- ) : ( + {!standalone && (permissions === true || permissions?.canUpdate) ? (
)}
+ ) : ( +
+ setIconPopover(true)} /> +
)}
diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx index f8f1a29..9dfe2b2 100644 --- a/components/LinkViews/LinkComponents/LinkActions.tsx +++ b/components/LinkViews/LinkComponents/LinkActions.tsx @@ -49,7 +49,7 @@ export default function LinkActions({ await updateLink.mutateAsync( { ...link, - pinnedBy: isAlreadyPinned ? undefined : [{ id: user.id }], + pinnedBy: isAlreadyPinned ? [{ id: undefined }] : [{ id: user.id }], }, { onSettled: (data, error) => { @@ -95,6 +95,9 @@ export default function LinkActions({ className={`absolute ${position || "top-3 right-3"} ${ alignToTop ? "" : "dropdown-end" } z-20`} + tabIndex={0} + role="button" + onMouseDown={dropdownTriggerer} onClick={() => setLinkModal(true)} >
@@ -120,23 +123,21 @@ export default function LinkActions({ alignToTop ? "" : "translate-y-10" }`} > - {(permissions === true || permissions?.canUpdate) && ( -
  • -
    { - (document?.activeElement as HTMLElement)?.blur(); - pinLink(); - }} - className="whitespace-nowrap" - > - {link?.pinnedBy && link.pinnedBy[0] - ? t("unpin") - : t("pin_to_dashboard")} -
    -
    • - )} +
  • +
    { + (document?.activeElement as HTMLElement)?.blur(); + pinLink(); + }} + className="whitespace-nowrap" + > + {link?.pinnedBy && link.pinnedBy[0] + ? t("unpin") + : t("pin_to_dashboard")} +
    +
    • )} - {link.type === "url" && ( + {link.type === "url" && permissions === true && (
  • {previewAvailable(link) ? ( ); }; - -// `text-black aspect-square text-4xl ${iconClasses}` diff --git a/components/LinkViews/LinkComponents/LinkMasonry.tsx b/components/LinkViews/LinkComponents/LinkMasonry.tsx index 7d2163a..8da4f25 100644 --- a/components/LinkViews/LinkComponents/LinkMasonry.tsx +++ b/components/LinkViews/LinkComponents/LinkMasonry.tsx @@ -146,7 +146,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
    {previewAvailable(link) ? ( { - 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" - ); - }; - - useEffect(() => { - (async () => { - await getLink.mutateAsync({ - id: link.id as number, - }); - })(); - - let interval: any; - - 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 permissions = usePermissions(link.collection.id as number); @@ -136,30 +51,32 @@ export default function LinkModal({ onClick={() => onClose()} >
    -
    -
    { - setMode("view"); - }} - > - View + {(permissions === true || permissions?.canUpdate) && ( +
    +
    { + setMode("view"); + }} + > + View +
    +
    { + setMode("edit"); + }} + > + Edit +
    -
    { - setMode("edit"); - }} - > - Edit -
    -
    + )}
    @@ -174,7 +91,7 @@ export default function LinkModal({
      - {(permissions === true || permissions?.canUpdate) && ( + {
      • - )} + } {link.type === "url" && permissions === true && (