xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

format

This commit is contained in:
Isaac Wise 2024-02-10 18:34:25 -06:00
parent 58e2fb22c9
commit 059fcecc5f
20 changed files with 360 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/InputSelect/CollectionSelection.tsx
View File

@ -8,11 +8,11 @@ import CreatableSelect from "react-select/creatable";
type Props = { type Props = {
onChange: any; onChange: any;
defaultValue?: defaultValue?:
| { | {
label: string; label: string;
value?: number; value?: number;
} }
| undefined; | undefined;
}; };
export default function CollectionSelection({ onChange, defaultValue }: Props) { export default function CollectionSelection({ onChange, defaultValue }: Props) {
@ -51,7 +51,7 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
options={options} options={options}
styles={styles} styles={styles}
defaultValue={defaultValue} defaultValue={defaultValue}
// menuPosition="fixed" // menuPosition="fixed"
/> />
); );
} }

2
components/LinkViews/Layouts/ListView.tsx
View File

@ -3,7 +3,7 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function ListView({ export default function ListView({
links, links,
showCheckbox = true showCheckbox = true,
}: { }: {
links: LinkIncludingShortenedCollectionAndTags[]; links: LinkIncludingShortenedCollectionAndTags[];
showCheckbox?: boolean; showCheckbox?: boolean;

23
components/LinkViews/LinkCard.tsx
View File

@ -37,7 +37,9 @@ export default function LinkCard({
const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore(); const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
const handleCheckboxClick = (link: LinkIncludingShortenedCollectionAndTags) => { const handleCheckboxClick = (
link: LinkIncludingShortenedCollectionAndTags
) => {
if (selectedLinks.includes(link)) { if (selectedLinks.includes(link)) {
setSelectedLinks(selectedLinks.filter((e) => e !== link)); setSelectedLinks(selectedLinks.filter((e) => e !== link));
} else { } else {
@ -99,14 +101,17 @@ export default function LinkCard({
ref={ref} ref={ref}
className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative" className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
> >
{showCheckbox && (permissions === true || permissions?.canCreate || permissions?.canDelete) && {showCheckbox &&
<input (permissions === true ||
type="checkbox" permissions?.canCreate ||
className="checkbox checkbox-primary my-auto ml-3 mt-3 absolute z-20 bg-white dark:bg-base-200" permissions?.canDelete) && (
checked={selectedLinks.includes(link)} <input
onChange={() => handleCheckboxClick(link)} type="checkbox"
/> className="checkbox checkbox-primary my-auto ml-3 mt-3 absolute z-20 bg-white dark:bg-base-200"
} checked={selectedLinks.includes(link)}
onChange={() => handleCheckboxClick(link)}
/>
)}
<Link <Link
href={generateLinkHref(link, account)} href={generateLinkHref(link, account)}
target="_blank" target="_blank"

2
components/LinkViews/LinkGrid.tsx
View File

@ -101,7 +101,7 @@ export default function LinkGrid({ link }: Props) {
</div> </div>
<LinkActions <LinkActions
toggleShowInfo={() => { }} toggleShowInfo={() => {}}
linkInfo={false} linkInfo={false}
link={link} link={link}
collection={collection} collection={collection}

32
components/LinkViews/LinkList.tsx
View File

@ -33,7 +33,9 @@ export default function LinkCardCompact({
const { account } = useAccountStore(); const { account } = useAccountStore();
const { links, setSelectedLinks, selectedLinks } = useLinkStore(); const { links, setSelectedLinks, selectedLinks } = useLinkStore();
const handleCheckboxClick = (link: LinkIncludingShortenedCollectionAndTags) => { const handleCheckboxClick = (
link: LinkIncludingShortenedCollectionAndTags
) => {
if (selectedLinks.includes(link)) { if (selectedLinks.includes(link)) {
setSelectedLinks(selectedLinks.filter((e) => e !== link)); setSelectedLinks(selectedLinks.filter((e) => e !== link));
} else { } else {
@ -71,17 +73,21 @@ export default function LinkCardCompact({
return ( return (
<> <>
<div <div
className={`border-neutral-content relative items-center flex ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3" className={`border-neutral-content relative items-center flex ${
} duration-200 rounded-lg`} !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
} duration-200 rounded-lg`}
> >
{showCheckbox && (permissions === true || permissions?.canCreate || permissions?.canDelete) && {showCheckbox &&
<input (permissions === true ||
type="checkbox" permissions?.canCreate ||
className="checkbox checkbox-primary my-auto mr-2" permissions?.canDelete) && (
checked={selectedLinks.includes(link)} <input
onChange={() => handleCheckboxClick(link)} type="checkbox"
/> className="checkbox checkbox-primary my-auto mr-2"
} checked={selectedLinks.includes(link)}
onChange={() => handleCheckboxClick(link)}
/>
)}
<Link <Link
href={generateLinkHref(link, account)} href={generateLinkHref(link, account)}
target="_blank" target="_blank"
@ -122,8 +128,8 @@ export default function LinkCardCompact({
collection={collection} collection={collection}
position="top-3 right-3" position="top-3 right-3"
flipDropdown={flipDropdown} flipDropdown={flipDropdown}
// toggleShowInfo={() => setShowInfo(!showInfo)} // toggleShowInfo={() => setShowInfo(!showInfo)}
// linkInfo={showInfo} // linkInfo={showInfo}
/> />
{showInfo ? ( {showInfo ? (
<div> <div>

97
components/ModalContent/BulkDeleteLinksModal.tsx
View File

@ -4,62 +4,71 @@ import toast from "react-hot-toast";
import Modal from "../Modal"; import Modal from "../Modal";
type Props = { type Props = {
onClose: Function; onClose: Function;
}; };
export default function BulkDeleteLinksModal({ onClose }: Props) { export default function BulkDeleteLinksModal({ onClose }: Props) {
const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore(); const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
const deleteLink = async () => { const deleteLink = async () => {
const load = toast.loading(`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""}...`); const load = toast.loading(
`Deleting ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
}...`
);
const response = await deleteLinksById(selectedLinks.map(link => link.id as number)); const response = await deleteLinksById(
selectedLinks.map((link) => link.id as number)
);
toast.dismiss(load); toast.dismiss(load);
response.ok && toast.success(`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""}`); response.ok &&
toast.success(
`Deleted ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
}`
);
setSelectedLinks([]); setSelectedLinks([]);
onClose(); onClose();
}; };
return ( return (
<Modal toggleModal={onClose}> <Modal toggleModal={onClose}>
<p className="text-xl font-thin text-red-500">Delete {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}</p> <p className="text-xl font-thin text-red-500">
Delete {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
</p>
<div className="divider mb-3 mt-1"></div> <div className="divider mb-3 mt-1"></div>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
{selectedLinks.length > 1 ? ( {selectedLinks.length > 1 ? (
<p> <p>Are you sure you want to delete {selectedLinks.length} links?</p>
Are you sure you want to delete {selectedLinks.length} links? ) : (
</p> <p>Are you sure you want to delete this link?</p>
) : ( )}
<p>
Are you sure you want to delete this link?
</p>
)}
<div role="alert" className="alert alert-warning"> <div role="alert" className="alert alert-warning">
<i className="bi-exclamation-triangle text-xl" /> <i className="bi-exclamation-triangle text-xl" />
<span> <span>
<b>Warning:</b> This action is irreversible! <b>Warning:</b> This action is irreversible!
</span> </span>
</div> </div>
<p> <p>
Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking
&apos;Delete&apos; to bypass this confirmation in the future. &apos;Delete&apos; to bypass this confirmation in the future.
</p> </p>
<button <button
className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`} className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
onClick={deleteLink} onClick={deleteLink}
> >
<i className="bi-trash text-xl" /> <i className="bi-trash text-xl" />
Delete Delete
</button> </button>
</div> </div>
</Modal> </Modal>
); );
} }

110
components/ModalContent/BulkEditLinksModal.tsx
View File

@ -7,72 +7,74 @@ import toast from "react-hot-toast";
import Modal from "../Modal"; import Modal from "../Modal";
type Props = { type Props = {
onClose: Function; onClose: Function;
}; };
export default function BulkEditLinksModal({ onClose }: Props) { export default function BulkEditLinksModal({ onClose }: Props) {
const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore(); const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
const [submitLoader, setSubmitLoader] = useState(false); const [submitLoader, setSubmitLoader] = useState(false);
const [updatedValues, setUpdatedValues] = useState<Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">>({ tags: [] }); const [updatedValues, setUpdatedValues] = useState<
Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">
>({ tags: [] });
const setCollection = (e: any) => { const setCollection = (e: any) => {
const collectionId = e?.value || null; const collectionId = e?.value || null;
setUpdatedValues((prevValues) => ({ ...prevValues, collectionId })); setUpdatedValues((prevValues) => ({ ...prevValues, collectionId }));
}; };
const setTags = (e: any) => { const setTags = (e: any) => {
const tags = e.map((tag: any) => ({ name: tag.label })); const tags = e.map((tag: any) => ({ name: tag.label }));
setUpdatedValues((prevValues) => ({ ...prevValues, tags })); setUpdatedValues((prevValues) => ({ ...prevValues, tags }));
}; };
const submit = async () => { const submit = async () => {
if (!submitLoader) { if (!submitLoader) {
setSubmitLoader(true); setSubmitLoader(true);
const load = toast.loading("Updating..."); const load = toast.loading("Updating...");
const response = await updateLinks(selectedLinks, updatedValues); const response = await updateLinks(selectedLinks, updatedValues);
toast.dismiss(load); toast.dismiss(load);
if (response.ok) { if (response.ok) {
toast.success(`Updated!`); toast.success(`Updated!`);
onClose(); onClose();
} else toast.error(response.data as string); } else toast.error(response.data as string);
setSelectedLinks([]); setSelectedLinks([]);
setSubmitLoader(false); setSubmitLoader(false);
onClose(); onClose();
return response; return response;
} }
}; };
return ( return (
<Modal toggleModal={onClose}> <Modal toggleModal={onClose}>
<p className="text-xl font-thin">Edit Link</p> <p className="text-xl font-thin">Edit Link</p>
<div className="divider mb-3 mt-1"></div> <div className="divider mb-3 mt-1"></div>
<div className="mt-5"> <div className="mt-5">
<div className="grid sm:grid-cols-2 gap-3"> <div className="grid sm:grid-cols-2 gap-3">
<div> <div>
<p className="mb-2">Collection</p> <p className="mb-2">Collection</p>
<CollectionSelection onChange={setCollection} /> <CollectionSelection onChange={setCollection} />
</div> </div>
<div> <div>
<p className="mb-2">Tags</p> <p className="mb-2">Tags</p>
<TagSelection onChange={setTags} /> <TagSelection onChange={setTags} />
</div> </div>
</div> </div>
</div> </div>
<div className="flex justify-end items-center mt-5"> <div className="flex justify-end items-center mt-5">
<button <button
className="btn btn-accent dark:border-violet-400 text-white" className="btn btn-accent dark:border-violet-400 text-white"
onClick={submit} onClick={submit}
> >
Save Changes Save Changes
</button> </button>
</div> </div>
</Modal> </Modal>
); );
} }

5
components/ModalContent/NewLinkModal.tsx
View File

@ -197,8 +197,9 @@ export default function NewLinkModal({ onClose }: Props) {
{optionsExpanded ? "Hide" : "More"} Options {optionsExpanded ? "Hide" : "More"} Options
</p> </p>
<i <i
className={`${optionsExpanded ? "bi-chevron-up" : "bi-chevron-down" className={`${
}`} optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
}`}
></i> ></i>
</div> </div>

3
lib/api/archiveHandler.ts
View File

@ -23,8 +23,7 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
const browser = await chromium.launch(); const browser = await chromium.launch();
const context = await browser.newContext({ const context = await browser.newContext({
...devices["Desktop Chrome"], ...devices["Desktop Chrome"],
ignoreHTTPSErrors: ignoreHTTPSErrors: process.env.IGNORE_HTTPS_ERRORS === "true",
process.env.IGNORE_HTTPS_ERRORS === "true",
}); });
const page = await context.newPage(); const page = await context.newPage();

83
lib/api/controllers/links/bulk/deleteLinksById.ts
View File

@ -3,53 +3,56 @@ import { UsersAndCollections } from "@prisma/client";
import getPermission from "@/lib/api/getPermission"; import getPermission from "@/lib/api/getPermission";
import removeFile from "@/lib/api/storage/removeFile"; import removeFile from "@/lib/api/storage/removeFile";
export default async function deleteLinksById(userId: number, linkIds: number[]) { export default async function deleteLinksById(
if (!linkIds || linkIds.length === 0) { userId: number,
return { response: "Please choose valid links.", status: 401 }; linkIds: number[]
} ) {
if (!linkIds || linkIds.length === 0) {
return { response: "Please choose valid links.", status: 401 };
}
const collectionIsAccessibleArray = []; const collectionIsAccessibleArray = [];
// Check if the user has access to the collection of each link // Check if the user has access to the collection of each link
// if any of the links are not accessible, return an error // if any of the links are not accessible, return an error
// if all links are accessible, continue with the deletion // if all links are accessible, continue with the deletion
// and add the collection to the collectionIsAccessibleArray // and add the collection to the collectionIsAccessibleArray
for (const linkId of linkIds) { for (const linkId of linkIds) {
const collectionIsAccessible = await getPermission({ userId, linkId }); const collectionIsAccessible = await getPermission({ userId, linkId });
const memberHasAccess = collectionIsAccessible?.members.some( const memberHasAccess = collectionIsAccessible?.members.some(
(e: UsersAndCollections) => e.userId === userId && e.canDelete (e: UsersAndCollections) => e.userId === userId && e.canDelete
); );
if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess)) { if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess)) {
return { response: "Collection is not accessible.", status: 401 }; return { response: "Collection is not accessible.", status: 401 };
} }
collectionIsAccessibleArray.push(collectionIsAccessible); collectionIsAccessibleArray.push(collectionIsAccessible);
} }
const deletedLinks = await prisma.link.deleteMany({ const deletedLinks = await prisma.link.deleteMany({
where: { where: {
id: { in: linkIds }, id: { in: linkIds },
}, },
}); });
// Loop through each link and delete the associated files // Loop through each link and delete the associated files
// if the user has access to the collection // if the user has access to the collection
for (let i = 0; i < linkIds.length; i++) { for (let i = 0; i < linkIds.length; i++) {
const linkId = linkIds[i]; const linkId = linkIds[i];
const collectionIsAccessible = collectionIsAccessibleArray[i]; const collectionIsAccessible = collectionIsAccessibleArray[i];
removeFile({ removeFile({
filePath: `archives/${collectionIsAccessible?.id}/${linkId}.pdf`, filePath: `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
}); });
removeFile({ removeFile({
filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`, filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`,
}); });
removeFile({ removeFile({
filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`, filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
}); });
} }
return { response: deletedLinks, status: 200 }; return { response: deletedLinks, status: 200 };
} }

57
lib/api/controllers/links/bulk/updateLinks.ts
View File

@ -1,31 +1,42 @@
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import updateLinkById from "../linkId/updateLinkById"; import updateLinkById from "../linkId/updateLinkById";
export default async function updateLinks(userId: number, links: LinkIncludingShortenedCollectionAndTags[], newData: Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">) { export default async function updateLinks(
let allUpdatesSuccessful = true; userId: number,
links: LinkIncludingShortenedCollectionAndTags[],
newData: Pick<
LinkIncludingShortenedCollectionAndTags,
"tags" | "collectionId"
>
) {
let allUpdatesSuccessful = true;
// Have to use a loop here rather than updateMany, see the following: // Have to use a loop here rather than updateMany, see the following:
// https://github.com/prisma/prisma/issues/3143 // https://github.com/prisma/prisma/issues/3143
for (const link of links) { for (const link of links) {
const updatedData: LinkIncludingShortenedCollectionAndTags = { const updatedData: LinkIncludingShortenedCollectionAndTags = {
...link, ...link,
tags: [...link.tags, ...(newData.tags ?? [])], tags: [...link.tags, ...(newData.tags ?? [])],
collection: { collection: {
...link.collection, ...link.collection,
id: newData.collectionId ?? link.collection.id, id: newData.collectionId ?? link.collection.id,
} },
}; };
const updatedLink = await updateLinkById(userId, link.id as number, updatedData); const updatedLink = await updateLinkById(
userId,
link.id as number,
updatedData
);
if (updatedLink.status !== 200) { if (updatedLink.status !== 200) {
allUpdatesSuccessful = false; allUpdatesSuccessful = false;
} }
} }
if (allUpdatesSuccessful) { if (allUpdatesSuccessful) {
return { response: "All links updated successfully", status: 200 }; return { response: "All links updated successfully", status: 200 };
} else { } else {
return { response: "Some links failed to update", status: 400 }; return { response: "Some links failed to update", status: 400 };
} }
} }

12
lib/api/controllers/links/linkId/updateLinkById.ts
View File

@ -48,9 +48,9 @@ export default async function updateLinkById(
collection: true, collection: true,
pinnedBy: isCollectionOwner pinnedBy: isCollectionOwner
? { ? {
where: { id: userId }, where: { id: userId },
select: { id: true }, select: { id: true },
} }
: undefined, : undefined,
}, },
}); });
@ -111,9 +111,9 @@ export default async function updateLinkById(
collection: true, collection: true,
pinnedBy: isCollectionOwner pinnedBy: isCollectionOwner
? { ? {
where: { id: userId }, where: { id: userId },
select: { id: true }, select: { id: true },
} }
: undefined, : undefined,
}, },
}); });

22
lib/api/controllers/users/userId/updateUserById.ts
View File

@ -97,18 +97,18 @@ export default async function updateUserById(
id: { not: userId }, id: { not: userId },
OR: emailEnabled OR: emailEnabled
? [ ? [
{ {
username: data.username.toLowerCase(), username: data.username.toLowerCase(),
}, },
{ {
email: data.email?.toLowerCase(), email: data.email?.toLowerCase(),
}, },
] ]
: [ : [
{ {
username: data.username.toLowerCase(), username: data.username.toLowerCase(),
}, },
], ],
}, },
}); });

54
lib/client/generateLinkHref.ts
View File

@ -1,27 +1,39 @@
import { AccountSettings, ArchivedFormat, LinkIncludingShortenedCollectionAndTags } from "@/types/global"; import {
AccountSettings,
ArchivedFormat,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import { LinksRouteTo } from "@prisma/client"; import { LinksRouteTo } from "@prisma/client";
import { pdfAvailable, readabilityAvailable, screenshotAvailable } from "../shared/getArchiveValidity"; import {
pdfAvailable,
readabilityAvailable,
screenshotAvailable,
} from "../shared/getArchiveValidity";
export const generateLinkHref = (link: LinkIncludingShortenedCollectionAndTags, account: AccountSettings): string => { export const generateLinkHref = (
link: LinkIncludingShortenedCollectionAndTags,
account: AccountSettings
): string => {
// Return the links href based on the account's preference
// If the user's preference is not available, return the original link
switch (account.linksRouteTo) {
case LinksRouteTo.ORIGINAL:
return link.url || "";
case LinksRouteTo.PDF:
if (!pdfAvailable(link)) return link.url || "";
// Return the links href based on the account's preference return `/preserved/${link?.id}?format=${ArchivedFormat.pdf}`;
// If the user's preference is not available, return the original link case LinksRouteTo.READABLE:
switch (account.linksRouteTo) { if (!readabilityAvailable(link)) return link.url || "";
case LinksRouteTo.ORIGINAL:
return link.url || '';
case LinksRouteTo.PDF:
if (!pdfAvailable(link)) return link.url || '';
return `/preserved/${link?.id}?format=${ArchivedFormat.pdf}`; return `/preserved/${link?.id}?format=${ArchivedFormat.readability}`;
case LinksRouteTo.READABLE: case LinksRouteTo.SCREENSHOT:
if (!readabilityAvailable(link)) return link.url || ''; if (!screenshotAvailable(link)) return link.url || "";
return `/preserved/${link?.id}?format=${ArchivedFormat.readability}`; return `/preserved/${link?.id}?format=${
case LinksRouteTo.SCREENSHOT: link?.image?.endsWith("png") ? ArchivedFormat.png : ArchivedFormat.jpeg
if (!screenshotAvailable(link)) return link.url || ''; }`;
default:
return `/preserved/${link?.id}?format=${link?.image?.endsWith("png") ? ArchivedFormat.png : ArchivedFormat.jpeg}`; return link.url || "";
default: }
return link.url || '';
}
}; };

8
lib/shared/getArchiveValidity.ts
View File

@ -1,6 +1,8 @@
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export function screenshotAvailable(link: LinkIncludingShortenedCollectionAndTags) { export function screenshotAvailable(
link: LinkIncludingShortenedCollectionAndTags
) {
return ( return (
link && link &&
link.image && link.image &&
@ -15,7 +17,9 @@ export function pdfAvailable(link: LinkIncludingShortenedCollectionAndTags) {
); );
} }
export function readabilityAvailable(link: LinkIncludingShortenedCollectionAndTags) { export function readabilityAvailable(
link: LinkIncludingShortenedCollectionAndTags
) {
return ( return (
link && link &&
link.readable && link.readable &&

6
pages/api/v1/links/index.ts
View File

@ -43,7 +43,11 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
response: newlink.response, response: newlink.response,
}); });
} else if (req.method === "PUT") { } else if (req.method === "PUT") {
const updated = await updateLinks(user.id, req.body.links, req.body.newData); const updated = await updateLinks(
user.id,
req.body.links,
req.body.newData
);
return res.status(updated.status).json({ return res.status(updated.status).json({
response: updated.response, response: updated.response,
}); });

73
pages/collections/[id].tsx
View File

@ -34,7 +34,8 @@ export default function Index() {
const router = useRouter(); const router = useRouter();
const { links, selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore(); const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
useLinkStore();
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst); const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@ -96,7 +97,6 @@ export default function Index() {
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false); const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false); const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Card localStorage.getItem("viewMode") || ViewMode.Card
); );
@ -119,13 +119,24 @@ export default function Index() {
}; };
const bulkDeleteLinks = async () => { const bulkDeleteLinks = async () => {
const load = toast.loading(`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""}...`); const load = toast.loading(
`Deleting ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
}...`
);
const response = await deleteLinksById(selectedLinks.map((link) => link.id as number)); const response = await deleteLinksById(
selectedLinks.map((link) => link.id as number)
);
toast.dismiss(load); toast.dismiss(load);
response.ok && toast.success(`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""}!`); response.ok &&
toast.success(
`Deleted ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
}!`
);
}; };
return ( return (
@ -133,8 +144,9 @@ export default function Index() {
<div <div
className="h-[60rem] p-5 flex gap-3 flex-col" className="h-[60rem] p-5 flex gap-3 flex-col"
style={{ style={{
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6" backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`, settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
}} }}
> >
{activeCollection && ( {activeCollection && (
@ -312,29 +324,42 @@ export default function Index() {
type="checkbox" type="checkbox"
className="checkbox checkbox-primary" className="checkbox checkbox-primary"
onChange={() => handleSelectAll()} onChange={() => handleSelectAll()}
checked={selectedLinks.length === links.length && links.length > 0} checked={
selectedLinks.length === links.length && links.length > 0
}
/> />
{selectedLinks.length > 0 && ( {selectedLinks.length > 0 && (
<span> <span>
{selectedLinks.length} {selectedLinks.length === 1 ? 'link' : 'links'} selected {selectedLinks.length}{" "}
{selectedLinks.length === 1 ? "link" : "links"} selected
</span> </span>
)} )}
</div> </div>
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{selectedLinks.length > 0 && (permissions === true || permissions?.canUpdate) && {selectedLinks.length > 0 &&
<button onClick={() => setBulkEditLinksModal(true)} className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"> (permissions === true || permissions?.canUpdate) && (
Edit <button
</button> onClick={() => setBulkEditLinksModal(true)}
} className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
{selectedLinks.length > 0 && (permissions === true || permissions?.canDelete) && >
<button onClick={(e) => { Edit
(document?.activeElement as HTMLElement)?.blur(); </button>
e.shiftKey ? bulkDeleteLinks() : setBulkDeleteLinksModal(true); )}
}} className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"> {selectedLinks.length > 0 &&
Delete (permissions === true || permissions?.canDelete) && (
</button> <button
} onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
e.shiftKey
? bulkDeleteLinks()
: setBulkDeleteLinksModal(true);
}}
className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
>
Delete
</button>
)}
</div> </div>
</div> </div>
@ -375,7 +400,9 @@ export default function Index() {
/> />
)} )}
{bulkDeleteLinksModal && ( {bulkDeleteLinksModal && (
<BulkDeleteLinksModal onClose={() => setBulkDeleteLinksModal(false)} /> <BulkDeleteLinksModal
onClose={() => setBulkDeleteLinksModal(false)}
/>
)} )}
{bulkEditLinksModal && ( {bulkEditLinksModal && (
<BulkEditLinksModal onClose={() => setBulkEditLinksModal(false)} /> <BulkEditLinksModal onClose={() => setBulkEditLinksModal(false)} />

5
pages/dashboard.tsx
View File

@ -168,7 +168,10 @@ export default function Dashboard() {
> >
{links[0] ? ( {links[0] ? (
<div className="w-full"> <div className="w-full">
<LinkComponent links={links.slice(0, showLinks)} showCheckbox={false} /> <LinkComponent
links={links.slice(0, showLinks)}
showCheckbox={false}
/>
</div> </div>
) : ( ) : (
<div <div

5
pages/tags/[id].tsx
View File

@ -145,10 +145,11 @@ export default function Index() {
</p> </p>
<div className="relative"> <div className="relative">
<div <div
className={`dropdown dropdown-bottom font-normal ${activeTag?.name.length && activeTag?.name.length > 8 className={`dropdown dropdown-bottom font-normal ${
activeTag?.name.length && activeTag?.name.length > 8
? "dropdown-end" ? "dropdown-end"
: "" : ""
}`} }`}
> >
<div <div
tabIndex={0} tabIndex={0}

12
store/links.ts
View File

@ -23,7 +23,13 @@ type LinkStore = {
updateLink: ( updateLink: (
link: LinkIncludingShortenedCollectionAndTags link: LinkIncludingShortenedCollectionAndTags
) => Promise<ResponseObject>; ) => Promise<ResponseObject>;
updateLinks: (links: LinkIncludingShortenedCollectionAndTags[], newData: Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">) => Promise<ResponseObject>; updateLinks: (
links: LinkIncludingShortenedCollectionAndTags[],
newData: Pick<
LinkIncludingShortenedCollectionAndTags,
"tags" | "collectionId"
>
) => Promise<ResponseObject>;
removeLink: (linkId: number) => Promise<ResponseObject>; removeLink: (linkId: number) => Promise<ResponseObject>;
deleteLinksById: (linkIds: number[]) => Promise<ResponseObject>; deleteLinksById: (linkIds: number[]) => Promise<ResponseObject>;
resetLinks: () => void; resetLinks: () => void;
@ -142,9 +148,7 @@ const useLinkStore = create<LinkStore>()((set) => ({
if (response.ok) { if (response.ok) {
set((state) => ({ set((state) => ({
links: state.links.map((e) => links: state.links.map((e) =>
links.some((link) => link.id === e.id) links.some((link) => link.id === e.id) ? { ...e, ...newData } : e
? { ...e, ...newData }
: e
), ),
})); }));
useTagStore.getState().setTags(); useTagStore.getState().setTags();