Merge pull request #1504 from rockingrohit9639/fix/invalid-tag-assign…

…ment fix(bulk-tag-update): fix issue in bulk remove tags
Shelf-nu · Dec 11, 2024 · bd407fd · bd407fd
2 parents d5be3a2 + 9fc7d92
commit bd407fd
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 36 deletions.
diff --git a/app/components/assets/bulk-assign-tags-dialog.tsx b/app/components/assets/bulk-assign-tags-dialog.tsx
@@ -2,16 +2,15 @@ import { useEffect, useMemo } from "react";
 import { useFetcher } from "@remix-run/react";
 import { useZorm } from "react-zorm";
 import { z } from "zod";
-import type { ModelFiltersLoader } from "~/routes/api+/model-filters";
 import { BulkUpdateDialogContent } from "../bulk-update-dialog/bulk-update-dialog";
 import { Button } from "../shared/button";
-import { TagsAutocomplete, type TagSuggestion } from "../tag/tags-autocomplete";
+import { TagsAutocomplete } from "../tag/tags-autocomplete";
 
 /**
- * Schema for bulk tag assignment validation
+ * Schema for bulk tag update validation
  * Ensures at least one asset and one tag are selected
  */
-export const BulkAssignTagsSchema = z.object({
+export const BulkUpdateTagsSchema = z.object({
   // Validate array of asset IDs
   assetIds: z.array(z.string()).min(1, "At least one asset must be selected"),
   // Transform comma-separated string to array and validate
@@ -25,21 +24,24 @@ export const BulkAssignTagsSchema = z.object({
     ),
 });
 
+export type TagsFetcherData = { filters: Array<{ name: string; id: string }> };
+
 export default function BulkAssignTagsDialog() {
-  const zo = useZorm("BulkAssignTags", BulkAssignTagsSchema);
+  const zo = useZorm("BulkAssignTags", BulkUpdateTagsSchema);
 
-  const fetcher = useFetcher<ModelFiltersLoader>();
+  const fetcher = useFetcher<TagsFetcherData>();
 
   // Transform API response to TagSuggestion format
-  const suggestions = useMemo(
-    () =>
-      // @ts-expect-error - fetcher.data type is unknown
-      (fetcher.data?.filters?.map((tagResponse) => ({
-        label: tagResponse.name,
-        value: tagResponse.id,
-      })) as TagSuggestion[]) ?? [],
-    [fetcher.data]
-  );
+  const suggestions = useMemo(() => {
+    if (!fetcher.data?.filters) {
+      return [];
+    }
+
+    return fetcher.data.filters.map((tagResponse) => ({
+      label: tagResponse.name,
+      value: tagResponse.id,
+    }));
+  }, [fetcher.data]);
 
   useEffect(() => {
     fetcher.submit(

diff --git a/app/components/assets/bulk-remove-tags-dialog.tsx b/app/components/assets/bulk-remove-tags-dialog.tsx
@@ -1,25 +1,29 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useFetcher } from "@remix-run/react";
 import { useZorm } from "react-zorm";
-import { z } from "zod";
+import {
+  type TagsFetcherData,
+  BulkUpdateTagsSchema,
+} from "./bulk-assign-tags-dialog";
 import { BulkUpdateDialogContent } from "../bulk-update-dialog/bulk-update-dialog";
 import { Button } from "../shared/button";
-import { TagsAutocomplete, type TagSuggestion } from "../tag/tags-autocomplete";
-
-export const BulkRemoveTagsSchema = z.object({
-  assetIds: z.array(z.string()).min(1),
-  tags: z.string(),
-});
+import { TagsAutocomplete } from "../tag/tags-autocomplete";
 
 export default function BulkRemoveTagsDialog() {
-  const zo = useZorm("BulkRemoveTags", BulkRemoveTagsSchema);
+  const zo = useZorm("BulkRemoveTags", BulkUpdateTagsSchema);
+
+  const fetcher = useFetcher<TagsFetcherData>();
+
+  const suggestions = useMemo(() => {
+    if (!fetcher.data?.filters) {
+      return [];
+    }
 
-  const fetcher = useFetcher();
-  // @ts-ignore
-  const suggestions = fetcher.data?.filters.map((tagResponse) => ({
-    label: tagResponse.name,
-    value: tagResponse.id,
-  })) as TagSuggestion[];
+    return fetcher.data.filters.map((tagResponse) => ({
+      label: tagResponse.name,
+      value: tagResponse.id,
+    }));
+  }, [fetcher.data]);
 
   useEffect(() => {
     fetcher.submit(
@@ -36,6 +40,16 @@ export default function BulkRemoveTagsDialog() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Handle validation errors
+  const validationErrors = useMemo(() => {
+    const tagsError = zo.errors.tags()?.message;
+    const assetIdsError = zo.errors.assetIds()?.message;
+    return {
+      tags: tagsError,
+      assetIds: assetIdsError,
+    };
+  }, [zo.errors]);
+
   return (
     <BulkUpdateDialogContent
       ref={zo.ref}
@@ -50,11 +64,14 @@ export default function BulkRemoveTagsDialog() {
           <div className="relative z-50 mb-8">
             <TagsAutocomplete existingTags={[]} suggestions={suggestions} />
 
-            {zo.errors.tags()?.message ? (
+            {validationErrors.tags && (
+              <p className="text-sm text-error-500">{validationErrors.tags}</p>
+            )}
+            {validationErrors.assetIds && (
               <p className="text-sm text-error-500">
-                {zo.errors.tags()?.message}
+                {validationErrors.assetIds}
               </p>
-            ) : null}
+            )}
             {fetcherError ? (
               <p className="text-sm text-error-500">{fetcherError}</p>
             ) : null}

diff --git a/app/routes/api+/assets.bulk-assign-tags.ts b/app/routes/api+/assets.bulk-assign-tags.ts
@@ -1,5 +1,5 @@
 import { json, type ActionFunctionArgs } from "@remix-run/node";
-import { BulkAssignTagsSchema } from "~/components/assets/bulk-assign-tags-dialog";
+import { BulkUpdateTagsSchema } from "~/components/assets/bulk-assign-tags-dialog";
 import { bulkAssignAssetTags } from "~/modules/asset/service.server";
 import { CurrentSearchParamsSchema } from "~/modules/asset/utils.server";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
@@ -38,7 +38,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
     // Validate form data using combined schema
     const { assetIds, tags, currentSearchParams } = parseData(
       formData,
-      BulkAssignTagsSchema.and(CurrentSearchParamsSchema),
+      BulkUpdateTagsSchema.and(CurrentSearchParamsSchema),
       {
         message: "Invalid tag assignment data provided",
         additionalData: { userId, organizationId },
@@ -56,7 +56,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
 
     sendNotification({
       title: "Assets updated",
-      message: "Your asset's categories have been successfully updated",
+      message: "Your asset's tags have been successfully updated",
       icon: { name: "success", variant: "success" },
       senderId: authSession.userId,
     });