egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into fixes

Browse Source
This commit is contained in:
Isaac Wise
2024-08-18 13:21:02 -05:00
committed by GitHub
parent 63678b7f1e 8c738d4a99
commit 2b83522eaa
32 changed files with 956 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CopyButton.tsx
+36
View File
@@ -0,0 +1,36 @@
import React from "react";
type Props = {
text: string;
};
const CopyButton = ({ text }: Props) => {
return (
<div
className="bi-copy text-xl text-neutral btn btn-sm btn-square btn-ghost"
onClick={() => {
try {
navigator.clipboard.writeText(text).then(() => {
const copyIcon = document.querySelector(".bi-copy");
if (copyIcon) {
copyIcon.classList.remove("bi-copy");
copyIcon.classList.add("bi-check2");
copyIcon.classList.add("text-success");
}
setTimeout(() => {
if (copyIcon) {
copyIcon.classList.remove("bi-check2");
copyIcon.classList.remove("text-success");
copyIcon.classList.add("bi-copy");
}
}, 1000);
});
} catch (err) {
console.log(err);
}
}}
></div>
);
};
export default CopyButton;
components/DashboardItem.tsx
+6 -1
View File
@@ -14,7 +14,12 @@ export default function dashboardItem({
</div>
<div className="ml-4 flex flex-col justify-center">
<p className="text-neutral text-xs tracking-wider">{name}</p>
<p className="font-thin text-5xl text-primary mt-0.5">{value}</p>
<p className="font-thin text-5xl text-primary mt-0.5 hidden sm:block md:hidden">
{value < 1000 ? value : (value / 1000).toFixed(1) + "k"}
</p>
<p className="font-thin text-5xl text-primary mt-0.5 sm:hidden md:block">
{value}
</p>
</div>
</div>
);
components/Drawer.tsx
+88
View File
@@ -0,0 +1,88 @@
import React, { ReactNode, useEffect } from "react";
import ClickAwayHandler from "@/components/ClickAwayHandler";
import { Drawer as D } from "vaul";
type Props = {
toggleDrawer: Function;
children: ReactNode;
className?: string;
dismissible?: boolean;
};
export default function Drawer({
toggleDrawer,
className,
children,
dismissible = true,
}: Props) {
const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
useEffect(() => {
if (window.innerWidth >= 640) {
document.body.style.overflow = "hidden";
document.body.style.position = "relative";
return () => {
document.body.style.overflow = "auto";
document.body.style.position = "";
};
}
}, []);
if (window.innerWidth < 640) {
return (
<D.Root
open={drawerIsOpen}
onClose={() => dismissible && setTimeout(() => toggleDrawer(), 350)}
dismissible={dismissible}
>
<D.Portal>
<D.Overlay className="fixed inset-0 bg-black/40" />
<ClickAwayHandler
onClickOutside={() => dismissible && setDrawerIsOpen(false)}
>
<D.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
<div
className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
data-testid="mobile-modal-container"
>
<div
className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5"
data-testid="mobile-modal-slider"
/>
{children}
</div>
</D.Content>
</ClickAwayHandler>
</D.Portal>
</D.Root>
);
} else {
return (
<D.Root
open={drawerIsOpen}
onClose={() => dismissible && setTimeout(() => toggleDrawer(), 350)}
dismissible={dismissible}
direction="right"
>
<D.Portal>
<D.Overlay className="fixed inset-0 bg-black/10 z-20" />
<ClickAwayHandler
onClickOutside={() => dismissible && setDrawerIsOpen(false)}
className="z-30"
>
<D.Content className="bg-white flex flex-col h-full w-2/5 min-w-[30rem] mt-24 fixed bottom-0 right-0 z-40 !select-auto">
<div
className={
"p-4 bg-base-100 flex-1 border-neutral-content border-l overflow-y-auto " +
className
}
>
{children}
</div>
</D.Content>
</ClickAwayHandler>
</D.Portal>
</D.Root>
);
}
}
components/FilterSearchDropdown.tsx
+24 -16
View File
@@ -1,6 +1,8 @@
import { dropdownTriggerer } from "@/lib/client/utils";
import React from "react";
import React, { useEffect } from "react";
import { useTranslation } from "next-i18next";
import { resetInfiniteQueryPagination } from "@/hooks/store/links";
import { useQueryClient } from "@tanstack/react-query";
type Props = {
setSearchFilter: Function;
@@ -18,6 +20,7 @@ export default function FilterSearchDropdown({
searchFilter,
}: Props) {
const { t } = useTranslation();
const queryClient = useQueryClient();
return (
<div className="dropdown dropdown-bottom dropdown-end">
@@ -41,9 +44,10 @@ export default function FilterSearchDropdown({
name="search-filter-checkbox"
className="checkbox checkbox-primary"
checked={searchFilter.name}
onChange={() =>
setSearchFilter({ ...searchFilter, name: !searchFilter.name })
}
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSearchFilter({ ...searchFilter, name: !searchFilter.name });
}}
/>
<span className="label-text whitespace-nowrap">{t("name")}</span>
</label>
@@ -59,9 +63,10 @@ export default function FilterSearchDropdown({
name="search-filter-checkbox"
className="checkbox checkbox-primary"
checked={searchFilter.url}
onChange={() =>
setSearchFilter({ ...searchFilter, url: !searchFilter.url })
}
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSearchFilter({ ...searchFilter, url: !searchFilter.url });
}}
/>
<span className="label-text whitespace-nowrap">{t("link")}</span>
</label>
@@ -77,12 +82,13 @@ export default function FilterSearchDropdown({
name="search-filter-checkbox"
className="checkbox checkbox-primary"
checked={searchFilter.description}
onChange={() =>
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSearchFilter({
...searchFilter,
description: !searchFilter.description,
})
}
});
}}
/>
<span className="label-text whitespace-nowrap">
{t("description")}
@@ -100,9 +106,10 @@ export default function FilterSearchDropdown({
name="search-filter-checkbox"
className="checkbox checkbox-primary"
checked={searchFilter.tags}
onChange={() =>
setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
}
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSearchFilter({ ...searchFilter, tags: !searchFilter.tags });
}}
/>
<span className="label-text whitespace-nowrap">{t("tags")}</span>
</label>
@@ -118,12 +125,13 @@ export default function FilterSearchDropdown({
name="search-filter-checkbox"
className="checkbox checkbox-primary"
checked={searchFilter.textContent}
onChange={() =>
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSearchFilter({
...searchFilter,
textContent: !searchFilter.textContent,
})
}
});
}}
/>
<span className="label-text whitespace-nowrap">
{t("full_content")}
components/IconPicker.tsx
+46
View File
@@ -0,0 +1,46 @@
import { icons } from "@/lib/client/icons";
import React, { useMemo, useState } from "react";
import Fuse from "fuse.js";
import TextInput from "./TextInput";
const fuse = new Fuse(icons, {
keys: [{ name: "name", weight: 4 }, "tags", "categories"],
threshold: 0.2,
useExtendedSearch: true,
});
type Props = {};
const IconPicker = (props: Props) => {
const [query, setQuery] = useState("");
const filteredQueryResultsSelector = useMemo(() => {
if (!query) {
return icons;
}
return fuse.search(query).map((result) => result.item);
}, [query]);
return (
<div className="w-fit">
<TextInput
className="p-2 rounded w-full mb-5"
placeholder="Search icons"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<div className="grid grid-cols-6 gap-5 w-fit">
{filteredQueryResultsSelector.map((icon) => {
const IconComponent = icon.Icon;
return (
<div key={icon.name} onClick={() => console.log(icon.name)}>
<IconComponent size={32} weight="fill" />
</div>
);
})}
</div>
</div>
);
};
export default IconPicker;
components/LinkDetails.tsx
+302
View File
@@ -0,0 +1,302 @@
import React, { useEffect, useState } from "react";
import {
LinkIncludingShortenedCollectionAndTags,
ArchivedFormat,
} from "@/types/global";
import Link from "next/link";
import { useSession } from "next-auth/react";
import {
pdfAvailable,
readabilityAvailable,
monolithAvailable,
screenshotAvailable,
} from "@/lib/shared/getArchiveValidity";
import PreservedFormatRow from "@/components/PreserverdFormatRow";
import getPublicUserData from "@/lib/client/getPublicUserData";
import { useTranslation } from "next-i18next";
import { BeatLoader } from "react-spinners";
import { useUser } from "@/hooks/store/user";
import { useGetLink } from "@/hooks/store/links";
import LinkIcon from "./LinkViews/LinkComponents/LinkIcon";
import CopyButton from "./CopyButton";
import { useRouter } from "next/router";
type Props = {
className?: string;
link: LinkIncludingShortenedCollectionAndTags;
};
export default function LinkDetails({ className, link }: Props) {
const { t } = useTranslation();
const session = useSession();
const getLink = useGetLink();
const { data: user = {} } = useUser();
const [collectionOwner, setCollectionOwner] = useState({
id: null as unknown as number,
name: "",
username: "",
image: "",
archiveAsScreenshot: undefined as unknown as boolean,
archiveAsMonolith: undefined as unknown as boolean,
archiveAsPDF: undefined as unknown as boolean,
});
useEffect(() => {
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"
);
};
const atLeastOneFormatAvailable = () => {
return (
screenshotAvailable(link) ||
pdfAvailable(link) ||
readabilityAvailable(link) ||
monolithAvailable(link)
);
};
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 router = useRouter();
const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
return (
<div className={className} data-vaul-no-drag>
<LinkIcon link={link} className="mx-auto" />
{link.name && <p className="text-xl text-center mt-2">{link.name}</p>}
{link.url && (
<>
<br />
<p className="text-sm mb-2 text-neutral">{t("link")}</p>
<div className="rounded-lg p-2 bg-base-200 flex justify-between items-center gap-2">
<Link
href={link.url}
title={link.url}
target="_blank"
className="truncate"
>
{link.url}
</Link>
<CopyButton text={link.url} />
</div>
</>
)}
<br />
<p className="text-sm mb-2 text-neutral">{t("collection")}</p>
<Link
href={
isPublicRoute
? `/public/collections/${link.collection.id}`
: `/collections/${link.collection.id}`
}
className="rounded-lg p-2 bg-base-200 flex justify-between items-center gap-2"
>
<p className="truncate">{link.collection.name}</p>
<i
className="bi-folder-fill text-xl"
style={{ color: link.collection.color }}
></i>
</Link>
{link.tags[0] && (
<>
<br />
<div>
<p className="text-sm mb-2 text-neutral">{t("tags")}</p>
</div>
<div className="flex gap-2">
{link.tags.map((tag) =>
isPublicRoute ? (
<div key={tag.id} className="rounded-lg px-3 py-1 bg-base-200">
{tag.name}
</div>
) : (
<Link
href={"/tags/" + tag.id}
key={tag.id}
className="rounded-lg px-3 py-1 bg-base-200"
>
{tag.name}
</Link>
)
)}
</div>
</>
)}
{link.description && (
<>
<br />
<div>
<p className="text-sm mb-2 text-neutral">{t("notes")}</p>
<div className="rounded-lg p-2 bg-base-200 hyphens-auto">
<p>{link.description}</p>
</div>
</div>
</>
)}
<br />
<p className="text-sm mb-2 text-neutral" title={t("available_formats")}>
{link.url ? t("preserved_formats") : t("file")}
</p>
<div className={`flex flex-col gap-3`}>
{monolithAvailable(link) ? (
<PreservedFormatRow
name={t("webpage")}
icon={"bi-filetype-html"}
format={ArchivedFormat.monolith}
link={link}
downloadable={true}
/>
) : undefined}
{screenshotAvailable(link) ? (
<PreservedFormatRow
name={t("screenshot")}
icon={"bi-file-earmark-image"}
format={
link?.image?.endsWith("png")
? ArchivedFormat.png
: ArchivedFormat.jpeg
}
link={link}
downloadable={true}
/>
) : undefined}
{pdfAvailable(link) ? (
<PreservedFormatRow
name={t("pdf")}
icon={"bi-file-earmark-pdf"}
format={ArchivedFormat.pdf}
link={link}
downloadable={true}
/>
) : undefined}
{readabilityAvailable(link) ? (
<PreservedFormatRow
name={t("readable")}
icon={"bi-file-earmark-text"}
format={ArchivedFormat.readability}
link={link}
/>
) : undefined}
{!isReady() && !atLeastOneFormatAvailable() ? (
<div className={`w-full h-full flex flex-col justify-center p-10`}>
<BeatLoader
color="oklch(var(--p))"
className="mx-auto mb-3"
size={30}
/>
<p className="text-center text-2xl">{t("preservation_in_queue")}</p>
<p className="text-center text-lg">{t("check_back_later")}</p>
</div>
) : link.url && !isReady() && atLeastOneFormatAvailable() ? (
<div className={`w-full h-full flex flex-col justify-center p-5`}>
<BeatLoader
color="oklch(var(--p))"
className="mx-auto mb-3"
size={20}
/>
<p className="text-center">{t("there_are_more_formats")}</p>
<p className="text-center text-sm">{t("check_back_later")}</p>
</div>
) : undefined}
{link.url && (
<Link
href={`https://web.archive.org/web/${link?.url?.replace(
/(^\w+:|^)\/\//,
""
)}`}
target="_blank"
className="text-neutral mx-auto duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm"
>
<p className="whitespace-nowrap">{t("view_latest_snapshot")}</p>
<i className="bi-box-arrow-up-right" />
</Link>
)}
</div>
</div>
);
}
components/LinkViews/LinkComponents/LinkActions.tsx
-3
View File
@@ -202,9 +202,6 @@ export default function LinkActions({
link={link}
/>
)}
{/* {expandedLink ? (
<ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
) : undefined} */}
</>
);
}
components/LinkViews/LinkComponents/LinkCard.tsx
+6 -56
View File
@@ -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: NodeJS.Timeout | null = null;
@@ -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>
components/LinkViews/LinkComponents/LinkList.tsx
+1 -19
View File
@@ -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
components/LinkViews/LinkComponents/LinkMasonry.tsx
+1 -56
View File
@@ -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>
components/Modal.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export default function Modal({
return (
<Drawer.Root
open={drawerIsOpen}
onClose={() => dismissible && setTimeout(() => toggleModal(), 100)}
onClose={() => dismissible && setTimeout(() => toggleModal(), 350)}
dismissible={dismissible}
>
<Drawer.Portal>
components/ModalContent/EditCollectionSharingModal.tsx
+3 -12
View File
@@ -15,6 +15,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
import { useTranslation } from "next-i18next";
import { useUpdateCollection } from "@/hooks/store/collections";
import { useUser } from "@/hooks/store/user";
import CopyButton from "../CopyButton";
type Props = {
onClose: Function;
@@ -133,19 +134,9 @@ export default function EditCollectionSharingModal({
{collection.isPublic && (
<div className={permissions === true ? "pl-5" : ""}>
<p className="mb-2">{t("sharable_link_guide")}</p>
<div
onClick={() => {
try {
navigator.clipboard
.writeText(publicCollectionURL)
.then(() => toast.success(t("copied")));
} catch (err) {
console.log(err);
}
}}
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border outline-none hover:border-primary dark:hover:border-primary duration-100 cursor-text"
>
<div className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border flex items-center gap-2 justify-between">
{publicCollectionURL}
<CopyButton text={publicCollectionURL} />
</div>
</div>
)}
components/ModalContent/LinkDetailModal.tsx
+145
View File
@@ -0,0 +1,145 @@
import React, { useEffect, useState } from "react";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import getPublicUserData from "@/lib/client/getPublicUserData";
import { useTranslation } from "next-i18next";
import { useUser } from "@/hooks/store/user";
import { useGetLink } from "@/hooks/store/links";
import Drawer from "../Drawer";
import LinkDetails from "../LinkDetails";
import Link from "next/link";
import usePermissions from "@/hooks/usePermissions";
import { useRouter } from "next/router";
type Props = {
onClose: Function;
onEdit: Function;
link: LinkIncludingShortenedCollectionAndTags;
};
export default function LinkDetailModal({ onClose, onEdit, link }: Props) {
const { t } = useTranslation();
const getLink = useGetLink();
const { data: user = {} } = useUser();
const [collectionOwner, setCollectionOwner] = useState({
id: null as unknown as number,
name: "",
username: "",
image: "",
archiveAsScreenshot: undefined as unknown as boolean,
archiveAsMonolith: undefined as unknown as boolean,
archiveAsPDF: undefined as unknown as boolean,
});
useEffect(() => {
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);
const router = useRouter();
const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
return (
<Drawer toggleDrawer={onClose} className="sm:h-screen sm:flex relative">
<div
className="bi-x text-xl text-neutral btn btn-sm btn-square btn-ghost hidden sm:block absolute top-3 left-3"
onClick={() => onClose()}
></div>
<Link
href={isPublicRoute ? `/public/links/${link.id}` : `/links/${link.id}`}
target="_blank"
className="bi-box-arrow-up-right text-xl text-neutral btn btn-sm btn-square btn-ghost absolute top-3 right-3 select-none"
></Link>
<div className="sm:m-auto sm:w-5/6">
<LinkDetails link={link} />
{permissions === true ||
(permissions?.canUpdate && (
<>
<br />
<br />
<div className="mx-auto text-center">
<div
className="btn btn-sm btn-ghost"
onClick={() => {
onEdit();
onClose();
}}
>
{t("edit_link")}
</div>
</div>
</>
))}
</div>
</Drawer>
);
}
components/ModalContent/NewLinkModal.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export default function NewLinkModal({ onClose }: Props) {
};
useEffect(() => {
if (router.query.id) {
if (router.pathname.startsWith("/collections/") && router.query.id) {
const currentCollection = collections.find(
(e) => e.id == Number(router.query.id)
);
components/ModalContent/NewTokenModal.tsx
+9 -15
View File
@@ -7,6 +7,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
import Button from "../ui/Button";
import { useTranslation } from "next-i18next";
import { useAddToken } from "@/hooks/store/tokens";
import CopyButton from "../CopyButton";
type Props = {
onClose: Function;
@@ -68,21 +69,14 @@ export default function NewTokenModal({ onClose }: Props) {
<div className="flex flex-col justify-center space-y-4">
<p className="text-xl font-thin">{t("access_token_created")}</p>
<p>{t("token_creation_notice")}</p>
<TextInput
spellCheck={false}
value={newToken}
onChange={() => {}}
className="w-full"
/>
<button
onClick={() => {
navigator.clipboard.writeText(newToken);
toast.success(t("copied_to_clipboard"));
}}
className="btn btn-primary w-fit mx-auto"
>
{t("copy_to_clipboard")}
</button>
<div className="relative">
<div className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border flex items-center gap-2 justify-between pr-14">
{newToken}
<div className="absolute right-0 px-2 border-neutral-content border-solid border-r bg-base-200">
<CopyButton text={newToken} />
</div>
</div>
</div>
</div>
) : (
<>
components/ModalContent/PreservedFormatsModal.tsx
+3 -3
View File
@@ -91,14 +91,14 @@ export default function PreservedFormatsModal({ onClose, link }: Props) {
useEffect(() => {
(async () => {
await getLink.mutateAsync(link.id as number);
await getLink.mutateAsync({ id: link.id as number });
})();
let interval: NodeJS.Timeout | null = null;
if (!isReady()) {
interval = setInterval(async () => {
await getLink.mutateAsync(link.id as number);
await getLink.mutateAsync({ id: link.id as number });
}, 5000);
} else {
if (interval) {
@@ -124,7 +124,7 @@ export default function PreservedFormatsModal({ onClose, link }: Props) {
toast.dismiss(load);
if (response.ok) {
await getLink.mutateAsync(link?.id as number);
await getLink.mutateAsync({ id: link.id as number });
toast.success(t("link_being_archived"));
} else toast.error(data.response);
components/ModalContent/UploadFileModal.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export default function UploadFileModal({ onClose }: Props) {
useEffect(() => {
setOptionsExpanded(false);
if (router.query.id) {
if (router.pathname.startsWith("/collections/") && router.query.id) {
const currentCollection = collections.find(
(e) => e.id == Number(router.query.id)
);
components/PreserverdFormatRow.tsx
+5 -7
View File
@@ -49,11 +49,9 @@ export default function PreservedFormatRow({
};
return (
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
<div className="flex justify-between items-center rounded-lg p-2 bg-base-200">
<div className="flex gap-2 items-center">
<div className="bg-primary text-primary-content p-2 rounded-l-md">
<i className={`${icon} text-2xl`} />
</div>
<i className={`${icon} text-2xl text-primary`} />
<p>{name}</p>
</div>
@@ -61,7 +59,7 @@ export default function PreservedFormatRow({
{downloadable || false ? (
<div
onClick={() => handleDownload()}
className="btn btn-sm btn-square"
className="btn btn-sm btn-square btn-ghost"
>
<i className="bi-cloud-arrow-down text-xl text-neutral" />
</div>
@@ -72,9 +70,9 @@ export default function PreservedFormatRow({
isPublic ? "/public" : ""
}/preserved/${link?.id}?format=${format}`}
target="_blank"
className="btn btn-sm btn-square"
className="btn btn-sm btn-square btn-ghost"
>
<i className="bi-box-arrow-up-right text-xl text-neutral" />
<i className="bi-box-arrow-up-right text-lg text-neutral" />
</Link>
</div>
</div>
components/ReadableView.tsx
+5 -16
View File
@@ -46,13 +46,6 @@ export default function ReadableView({ link }: Props) {
const router = useRouter();
const getLink = useGetLink();
const { data: collections = [] } = useCollections();
const collection = useMemo(() => {
return collections.find(
(e) => e.id === link.collection.id
) as CollectionIncludingMembersAndLinkCount;
}, [collections, link]);
useEffect(() => {
const fetchLinkContent = async () => {
@@ -73,7 +66,7 @@ export default function ReadableView({ link }: Props) {
}, [link]);
useEffect(() => {
if (link) getLink.mutateAsync(link?.id as number);
if (link) getLink.mutateAsync({ id: link.id as number });
let interval: NodeJS.Timeout | null = null;
if (
@@ -88,7 +81,10 @@ export default function ReadableView({ link }: Props) {
!link?.monolith)
) {
interval = setInterval(
() => getLink.mutateAsync(link.id as number),
() =>
getLink.mutateAsync({
id: link.id as number,
}),
5000
);
} else {
@@ -242,13 +238,6 @@ export default function ReadableView({ link }: Props) {
{link?.name ? <p>{unescapeString(link?.description)}</p> : undefined}
</div>
<LinkActions
link={link}
collection={collection}
position="top-3 right-3"
alignToTop
/>
</div>
<div className="flex flex-col gap-5 h-full">
components/SortDropdown.tsx
+27 -6
View File
@@ -3,6 +3,8 @@ import { Sort } from "@/types/global";
import { dropdownTriggerer } from "@/lib/client/utils";
import { TFunction } from "i18next";
import useLocalSettingsStore from "@/store/localSettings";
import { resetInfiniteQueryPagination } from "@/hooks/store/links";
import { useQueryClient } from "@tanstack/react-query";
type Props = {
sortBy: Sort;
@@ -12,6 +14,7 @@ type Props = {
export default function SortDropdown({ sortBy, setSort, t }: Props) {
const { updateSettings } = useLocalSettingsStore();
const queryClient = useQueryClient();
useEffect(() => {
updateSettings({ sortBy });
@@ -39,7 +42,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio"
className="radio checked:bg-primary"
checked={sortBy === Sort.DateNewestFirst}
onChange={() => setSort(Sort.DateNewestFirst)}
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSort(Sort.DateNewestFirst);
}}
/>
<span className="label-text whitespace-nowrap">
{t("date_newest_first")}
@@ -57,7 +63,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio"
className="radio checked:bg-primary"
checked={sortBy === Sort.DateOldestFirst}
onChange={() => setSort(Sort.DateOldestFirst)}
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSort(Sort.DateOldestFirst);
}}
/>
<span className="label-text whitespace-nowrap">
{t("date_oldest_first")}
@@ -75,7 +84,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio"
className="radio checked:bg-primary"
checked={sortBy === Sort.NameAZ}
onChange={() => setSort(Sort.NameAZ)}
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSort(Sort.NameAZ);
}}
/>
<span className="label-text whitespace-nowrap">{t("name_az")}</span>
</label>
@@ -91,7 +103,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio"
className="radio checked:bg-primary"
checked={sortBy === Sort.NameZA}
onChange={() => setSort(Sort.NameZA)}
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSort(Sort.NameZA);
}}
/>
<span className="label-text whitespace-nowrap">{t("name_za")}</span>
</label>
@@ -107,7 +122,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio"
className="radio checked:bg-primary"
checked={sortBy === Sort.DescriptionAZ}
onChange={() => setSort(Sort.DescriptionAZ)}
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSort(Sort.DescriptionAZ);
}}
/>
<span className="label-text whitespace-nowrap">
{t("description_az")}
@@ -125,7 +143,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio"
className="radio checked:bg-primary"
checked={sortBy === Sort.DescriptionZA}
onChange={() => setSort(Sort.DescriptionZA)}
onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSort(Sort.DescriptionZA);
}}
/>
<span className="label-text whitespace-nowrap">
{t("description_za")}