Checkbox to remove previous tags

components/ModalContent/BulkEditLinksModal.tsx

@@ -13,6 +13,7 @@ type Props = {
 export default function BulkEditLinksModal({ onClose }: Props) {
   const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
+  const [removePreviousTags, setRemovePreviousTags] = useState(false);
   const [updatedValues, setUpdatedValues] = useState<
     Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">
   >({ tags: [] });
@@ -33,7 +34,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
 
       const load = toast.loading("Updating...");
 
-      const response = await updateLinks(selectedLinks, updatedValues);
+      const response = await updateLinks(selectedLinks, removePreviousTags, updatedValues);
 
       toast.dismiss(load);
 
@@ -65,6 +66,18 @@ export default function BulkEditLinksModal({ onClose }: Props) {
             <TagSelection onChange={setTags} />
           </div>
         </div>
+        <div className="mt-3">
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              className="checkbox checkbox-primary"
+
+              checked={removePreviousTags}
+              onChange={(e) => setRemovePreviousTags(e.target.checked)}
+            />
+            Remove previous tags
+          </label>
+        </div>
       </div>
 
       <div className="flex justify-end items-center mt-5">

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

@@ -4,6 +4,7 @@ import updateLinkById from "../linkId/updateLinkById";
 export default async function updateLinks(
   userId: number,
   links: LinkIncludingShortenedCollectionAndTags[],
+  removePreviousTags: boolean,
   newData: Pick<
     LinkIncludingShortenedCollectionAndTags,
     "tags" | "collectionId"
@@ -14,9 +15,16 @@ export default async function updateLinks(
   // Have to use a loop here rather than updateMany, see the following:
   // https://github.com/prisma/prisma/issues/3143
   for (const link of links) {
+    let updatedTags = [...link.tags, ...(newData.tags ?? [])];
+
+    if (removePreviousTags) {
+      // If removePreviousTags is true, replace the existing tags with new tags
+      updatedTags = [...(newData.tags ?? [])];
+    }
+
     const updatedData: LinkIncludingShortenedCollectionAndTags = {
       ...link,
-      tags: [...link.tags, ...(newData.tags ?? [])],
+      tags: updatedTags,
       collection: {
         ...link.collection,
         id: newData.collectionId ?? link.collection.id,

pages/api/v1/links/index.ts

@@ -45,6 +45,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
     const updated = await updateLinks(
       user.id,
       req.body.links,
+      req.body.removePreviousTags,
       req.body.newData
     );
     return res.status(updated.status).json({

store/links.ts

@@ -25,6 +25,7 @@ type LinkStore = {
   ) => Promise<ResponseObject>;
   updateLinks: (
     links: LinkIncludingShortenedCollectionAndTags[],
+    removePreviousTags: boolean,
     newData: Pick<
       LinkIncludingShortenedCollectionAndTags,
       "tags" | "collectionId"
@@ -134,9 +135,9 @@ const useLinkStore = create<LinkStore>()((set) => ({
 
     return { ok: response.ok, data: data.response };
   },
-  updateLinks: async (links, newData) => {
+  updateLinks: async (links, removePreviousTags, newData) => {
     const response = await fetch("/api/v1/links", {
-      body: JSON.stringify({ links, newData }),
+      body: JSON.stringify({ links, removePreviousTags, newData }),
       headers: {
         "Content-Type": "application/json",
       },
@@ -148,7 +149,14 @@ const useLinkStore = create<LinkStore>()((set) => ({
     if (response.ok) {
       set((state) => ({
         links: state.links.map((e) =>
-          links.some((link) => link.id === e.id) ? { ...e, tags: [...e.tags, ...(newData.tags ?? [])] } : e
+          links.some((link) => link.id === e.id)
+            ? {
+              ...e,
+              tags: removePreviousTags
+                ? [...(newData.tags ?? [])]
+                : [...e.tags, ...(newData.tags ?? [])],
+            }
+            : e
         ),
       }));
       useTagStore.getState().setTags();