Finished editing links

components/InputSelect/CollectionSelection.tsx

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

components/ModalContent/BulkEditLinksModal.tsx

@@ -1,50 +1,38 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
-import TextInput from "@/components/TextInput";
-import unescapeString from "@/lib/client/unescapeString";
 import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
-import Link from "next/link";
 import Modal from "../Modal";
 
 type Props = {
 	onClose: Function;
 };
 
-// TODO: Make this work
-export default function EditLinkModal({ onClose }: Props) {
-	const { updateLink, updateLinksById } = useLinkStore();
+export default function BulkEditLinksModal({ onClose }: Props) {
+	const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
 	const [submitLoader, setSubmitLoader] = useState(false);
-	const [updatedValues, setUpdatedValues] = useState<Partial<LinkIncludingShortenedCollectionAndTags>>();
+	const [updatedValues, setUpdatedValues] = useState<Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">>({ tags: [] });
 
 	const setCollection = (e: any) => {
-		if (e?.__isNew__) e.value = null;
-
-		setUpdatedValues({
-			...updatedValues,
-			collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
-		});
+		const collectionId = e?.value || null;
+		setUpdatedValues((prevValues) => ({ ...prevValues, collectionId }));
 	};
 
 	const setTags = (e: any) => {
-		const tagNames = e.map((e: any) => {
-			return { name: e.label };
-		});
-
-		setUpdatedValues({ ...updatedValues, tags: tagNames });
+		const tags = e.map((tag: any) => ({ name: tag.label }));
+		setUpdatedValues((prevValues) => ({ ...prevValues, tags }));
 	};
 
 	const submit = async () => {
 		if (!submitLoader) {
 			setSubmitLoader(true);
 
-			let response;
 
 			const load = toast.loading("Updating...");
 
-			response = await updateLinksById(user);
+			const response = await updateLinks(selectedLinks, updatedValues);
 
 			toast.dismiss(load);
 
@@ -53,8 +41,9 @@ export default function EditLinkModal({ onClose }: Props) {
 				onClose();
 			} else toast.error(response.data as string);
 
+			setSelectedLinks([]);
 			setSubmitLoader(false);
-
+			onClose();
 			return response;
 		}
 	};
@@ -62,78 +51,17 @@ export default function EditLinkModal({ onClose }: Props) {
 	return (
 		<Modal toggleModal={onClose}>
 			<p className="text-xl font-thin">Edit Link</p>
-
 			<div className="divider mb-3 mt-1"></div>
-
-			{link.url ? (
-				<Link
-					href={link.url}
-					className="truncate text-neutral flex gap-2 mb-5 w-fit max-w-full"
-					title={link.url}
-					target="_blank"
-				>
-					<i className="bi-link-45deg text-xl" />
-					<p>{shortendURL}</p>
-				</Link>
-			) : undefined}
-
-			<div className="w-full">
-				<p className="mb-2">Name</p>
-				<TextInput
-					value={link.name}
-					onChange={(e) => setLink({ ...link, name: e.target.value })}
-					placeholder="e.g. Example Link"
-					className="bg-base-200"
-				/>
-			</div>
-
 			<div className="mt-5">
-				{/* <hr className="mb-3 border border-neutral-content" /> */}
 				<div className="grid sm:grid-cols-2 gap-3">
 					<div>
 						<p className="mb-2">Collection</p>
-						{link.collection.name ? (
-							<CollectionSelection
-								onChange={setCollection}
-								// defaultValue={{
-								//   label: link.collection.name,
-								//   value: link.collection.id,
-								// }}
-								defaultValue={
-									link.collection.id
-										? {
-											value: link.collection.id,
-											label: link.collection.name,
-										}
-										: {
-											value: null as unknown as number,
-											label: "Unorganized",
-										}
-								}
-							/>
-						) : null}
+						<CollectionSelection onChange={setCollection} />
 					</div>
 
 					<div>
 						<p className="mb-2">Tags</p>
-						<TagSelection
-							onChange={setTags}
-							defaultValue={link.tags.map((e) => {
-								return { label: e.name, value: e.id };
-							})}
-						/>
-					</div>
-
-					<div className="sm:col-span-2">
-						<p className="mb-2">Description</p>
-						<textarea
-							value={unescapeString(link.description) as string}
-							onChange={(e) =>
-								setLink({ ...link, description: e.target.value })
-							}
-							placeholder="Will be auto generated if nothing is provided."
-							className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
-						/>
+						<TagSelection onChange={setTags} />
 					</div>
 				</div>
 			</div>

lib/api/controllers/links/bulk/updateLinks.ts

@@ -4,13 +4,17 @@ import updateLinkById from "../linkId/updateLinkById";
 // Need to fix this
 export default async function updateLinks(userId: number, links: LinkIncludingShortenedCollectionAndTags[], newData: Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">) {
 	let allUpdatesSuccessful = true;
+	console.log(newData)
 
 	for (const link of links) {
 		const updatedData: LinkIncludingShortenedCollectionAndTags = {
 			...link,
 			tags: [...link.tags, ...(newData.tags ?? [])],
-			collectionId: newData.collectionId ?? link.collectionId,
-		}
+			collection: {
+				...link.collection,
+				id: newData.collectionId ?? link.collection.id,
+			}
+		};
 
 		const updatedLink = await updateLinkById(userId, link.id, updatedData);
 

lib/api/db.ts

@@ -5,7 +5,7 @@ const globalForPrisma = global as unknown as { prisma: PrismaClient };
 export const prisma =
   globalForPrisma.prisma ||
   new PrismaClient({
-    log: ["query"],
+    log: ["warn"],
   });
 
 if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

pages/api/v1/links/bulk/index.ts

@@ -1,22 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import verifyUser from "@/lib/api/verifyUser";
-import deleteLinksById from "@/lib/api/controllers/links/bulk/deleteLinksById";
-import updateLinksById from "@/lib/api/controllers/links/bulk/updateLinks";
-
-export default async function links(req: NextApiRequest, res: NextApiResponse) {
-	const user = await verifyUser({ req, res });
-	if (!user) return;
-
-	if (req.method === "PUT") {
-		const updated = await updateLinksById(user.id, req.body.linkIds, req.body.data);
-		return res.status(updated.status).json({
-			response: updated.response,
-		});
-	}
-	else if (req.method === "DELETE") {
-		const deleted = await deleteLinksById(user.id, req.body.linkIds);
-		return res.status(deleted.status).json({
-			response: deleted.response,
-		});
-	}
-}

pages/api/v1/links/index.ts

@@ -5,6 +5,7 @@ import { LinkRequestQuery } from "@/types/global";
 import verifyUser from "@/lib/api/verifyUser";
 import deleteLinksById from "@/lib/api/controllers/links/bulk/deleteLinksById";
 import updateLinksById from "@/lib/api/controllers/links/bulk/updateLinks";
+import updateLinks from "@/lib/api/controllers/links/bulk/updateLinks";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
   const user = await verifyUser({ req, res });
@@ -42,7 +43,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       response: newlink.response,
     });
   } else if (req.method === "PUT") {
-    const updated = await updateLinksById(user.id, req.body.linkIds, req.body.data);
+    const updated = await updateLinks(user.id, req.body.links, req.body.newData);
     return res.status(updated.status).json({
       response: updated.response,
     });

pages/collections/[id].tsx

@@ -27,6 +27,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
 import toast from "react-hot-toast";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 
 export default function Index() {
   const { settings } = useLocalSettingsStore();
@@ -94,6 +95,8 @@ export default function Index() {
     useState(false);
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
   const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+
 
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
@@ -319,7 +322,7 @@ export default function Index() {
           </div>
           <div className="flex gap-3">
             {selectedLinks.length > 0 && (permissions === true || permissions?.canUpdate) &&
-              <button className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto">
+              <button onClick={() => setBulkEditLinksModal(true)} className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto">
                 Edit
               </button>
             }
@@ -373,6 +376,9 @@ export default function Index() {
           {bulkDeleteLinksModal && (
             <BulkDeleteLinksModal onClose={() => setBulkDeleteLinksModal(false)} />
           )}
+          {bulkEditLinksModal && (
+            <BulkEditLinksModal onClose={() => setBulkEditLinksModal(false)} />
+          )}
         </>
       )}
     </MainLayout>

store/links.ts

@@ -23,6 +23,7 @@ type LinkStore = {
   updateLink: (
     link: LinkIncludingShortenedCollectionAndTags
   ) => Promise<ResponseObject>;
+  updateLinks: (links: LinkIncludingShortenedCollectionAndTags[], newData: Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">) => Promise<ResponseObject>;
   removeLink: (linkId: number) => Promise<ResponseObject>;
   deleteLinksById: (linkIds: number[]) => Promise<ResponseObject>;
   resetLinks: () => void;
@@ -127,7 +128,31 @@ const useLinkStore = create<LinkStore>()((set) => ({
 
     return { ok: response.ok, data: data.response };
   },
+  updateLinks: async (links, newData) => {
+    const response = await fetch("/api/v1/links", {
+      body: JSON.stringify({ links, newData }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "PUT",
+    });
 
+    const data = await response.json();
+
+    if (response.ok) {
+      set((state) => ({
+        links: state.links.map((e) =>
+          links.some((link) => link.id === e.id)
+            ? { ...e, ...newData }
+            : e
+        ),
+      }));
+      useTagStore.getState().setTags();
+      useCollectionStore.getState().setCollections();
+    }
+
+    return { ok: response.ok, data: data.response };
+  },
   removeLink: async (linkId) => {
     const response = await fetch(`/api/v1/links/${linkId}`, {
       headers: {