post bug fix

src/pages/news/ui/StepTwo.tsx

@@ -38,22 +38,18 @@ interface Data {
     name_ru: string;
     name_uz: string;
   };
-  tag: [
-    {
-      id: number;
-      name: string;
-      name_ru: string;
-      name_uz: string;
-    },
-  ];
-  post_images: [
-    {
-      image: string;
-      text: string;
-      text_ru: string;
-      text_uz: string;
-    },
-  ];
+  post_tags: Array<{
+    id: number;
+    name: string;
+    name_ru: string;
+    name_uz: string;
+  }>;
+  post_images: Array<{
+    image: string;
+    text: string;
+    text_ru: string;
+    text_uz: string;
+  }>;
 }
 
 const StepTwo = ({
@@ -77,13 +73,12 @@ const StepTwo = ({
       desc_ru: "",
       is_public: "yes",
       sections: [{ image: undefined as any, text: "", text_ru: "" }],
-      post_tags: [""],
+      post_tags: [{ name: "", name_ru: "" }],
     },
   });
 
   useEffect(() => {
     if (detail && !hasReset.current) {
-      // 🧠 xavfsiz map qilish
       const mappedSections =
         detail.post_images?.map((img) => ({
           image: img.image,
@@ -91,13 +86,18 @@ const StepTwo = ({
           text_ru: img.text_ru,
         })) ?? [];
 
-      const mappedTags = detail.tag?.map((t) => t.name_uz) ?? [];
+      const mappedTags =
+        detail.post_tags?.map((t) => ({
+          name: t.name_uz,
+          name_ru: t.name_ru,
+        })) ?? [];
 
       form.reset({
         desc: detail.text_uz || "",
         desc_ru: detail.text_ru || "",
         is_public: detail.is_public ? "yes" : "no",
-        post_tags: mappedTags.length > 0 ? mappedTags : [""],
+        post_tags:
+          mappedTags.length > 0 ? mappedTags : [{ name: "", name_ru: "" }],
         sections:
           mappedSections.length > 0
             ? mappedSections
@@ -108,18 +108,31 @@ const StepTwo = ({
     }
   }, [detail, form]);
 
-  const { fields, append, remove } = useFieldArray({
+  const {
+    fields: sectionFields,
+    append: appendSection,
+    remove: removeSection,
+  } = useFieldArray({
     control: form.control,
     name: "sections",
   });
-  const { watch, setValue } = form;
-  const postTags = watch("post_tags");
-  const addTag = () => setValue("post_tags", [...postTags, ""]);
-  const removeTag = (i: number) =>
-    setValue(
-      "post_tags",
-      postTags.filter((_, idx) => idx !== i),
-    );
+
+  const {
+    fields: tagFields,
+    append: appendTag,
+    remove: removeTag,
+  } = useFieldArray({
+    control: form.control,
+    name: "post_tags",
+  });
+
+  const handleImageChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number,
+  ) => {
+    const file = e.target.files?.[0];
+    if (file) form.setValue(`sections.${index}.image`, file);
+  };
 
   const { mutate: added } = useMutation({
     mutationFn: (body: FormData) => addNews(body),
@@ -139,7 +152,7 @@ const StepTwo = ({
 
   const { mutate: update } = useMutation({
     mutationFn: ({ body, id }: { id: number; body: FormData }) =>
-      updateNews({ id: id, body }),
+      updateNews({ id, body }),
     onSuccess: () => {
       queryClient.refetchQueries({ queryKey: ["news_detail"] });
       queryClient.refetchQueries({ queryKey: ["all_news"] });
@@ -154,14 +167,6 @@ const StepTwo = ({
     },
   });
 
-  const handleImageChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    index: number,
-  ) => {
-    const file = e.target.files?.[0];
-    if (file) form.setValue(`sections.${index}.image`, file);
-  };
-
   const onSubmit = (values: NewsPostFormType) => {
     const formData = new FormData();
 
@@ -176,28 +181,27 @@ const StepTwo = ({
       formData.append("image", stepOneData.banner);
     }
 
-    // 🔥 sections
-    values.sections.forEach((section, i) => {
-      if (section.image instanceof File) {
+    // Sections
+    values.sections?.forEach((section, i) => {
+      if (section.image instanceof File)
         formData.append(`post_images[${i}]`, section.image);
-      }
-      formData.append(`post_text[${i}]`, section.text);
-      formData.append(`post_text_ru[${i}]`, section.text_ru);
+      if (section.text) formData.append(`post_text[${i}]`, section.text);
+      if (section.text_ru)
+        formData.append(`post_text_ru[${i}]`, section.text_ru);
     });
 
+    // Post Tags
     values.post_tags.forEach((tag, i) => {
-      formData.append(`post_tags[${i}]`, tag);
+      formData.append(`post_tags[${i}]name`, tag.name);
+      formData.append(`post_tags[${i}]name_ru`, tag.name_ru);
     });
-    if (id) {
-      update({
-        body: formData,
-        id: Number(id),
-      });
-    } else {
-      added(formData);
-    }
+
+    if (id) update({ body: formData, id: Number(id) });
+    else added(formData);
   };
 
+  console.log(form.formState.errors);
+
   return (
     <Form {...form}>
       <form
@@ -239,45 +243,58 @@ const StepTwo = ({
           )}
         />
 
+        {/* Post Tags */}
         <div className="space-y-4">
           <Label>{t("Teglar")}</Label>
-          {postTags.map((__, i) => (
-            <FormField
-              key={i}
-              control={form.control}
-              name={`post_tags.${i}`}
-              render={({ field }) => (
-                <FormItem>
-                  <div className="relative">
-                    {postTags.length > 1 && (
-                      <button
-                        type="button"
-                        onClick={() => removeTag(i)}
-                        className="absolute top-1 right-1 text-red-400 hover:text-red-500"
-                      >
-                        <Trash2 className="size-4" />
-                      </button>
-                    )}
+          {tagFields.map((field, i) => (
+            <div key={field.id} className="flex gap-2 items-start">
+              <FormField
+                control={form.control}
+                name={`post_tags.${i}.name`}
+                render={({ field }) => (
+                  <FormItem>
                     <FormControl>
-                      <Input {...field} placeholder={t("Masalan: sport")} />
+                      <Input {...field} placeholder={t("Teg (UZ)")} />
                     </FormControl>
                     <FormMessage />
-                  </div>
-                </FormItem>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name={`post_tags.${i}.name_ru`}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input {...field} placeholder={t("Teg (RU)")} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {tagFields.length > 1 && (
+                <button
+                  type="button"
+                  onClick={() => removeTag(i)}
+                  className="text-red-400 hover:text-red-500 mt-1"
+                >
+                  <Trash2 className="size-4" />
+                </button>
               )}
-            />
+            </div>
           ))}
           <Button
             type="button"
-            onClick={addTag}
-            className="bg-gray-600 hover:bg-gray-700"
+            onClick={() => appendTag({ name: "", name_ru: "" })}
+            className="bg-gray-600 hover:bg-gray-700 mt-2"
           >
             <PlusCircle className="size-5 mr-2" />
             {t("Teg qo'shish")}
           </Button>
         </div>
 
-        {fields.map((field, index) => (
+        {/* Sections */}
+        {sectionFields.map((field, index) => (
           <div
             key={field.id}
             className="border border-gray-700 rounded-lg p-4 space-y-4"
@@ -288,7 +305,7 @@ const StepTwo = ({
               </p>
               <button
                 type="button"
-                onClick={() => remove(index)}
+                onClick={() => removeSection(index)}
                 className="text-red-400 hover:text-red-500"
               >
                 <Trash2 className="size-4" />
@@ -341,7 +358,7 @@ const StepTwo = ({
               )}
             </div>
 
-            {/* Text (UZ) */}
+            {/* Text UZ */}
             <FormField
               control={form.control}
               name={`sections.${index}.text`}
@@ -355,7 +372,7 @@ const StepTwo = ({
               )}
             />
 
-            {/* Text (RU) */}
+            {/* Text RU */}
             <FormField
               control={form.control}
               name={`sections.${index}.text_ru`}
@@ -374,7 +391,7 @@ const StepTwo = ({
         <Button
           type="button"
           onClick={() =>
-            append({ image: undefined as any, text: "", text_ru: "" })
+            appendSection({ image: undefined as any, text: "", text_ru: "" })
           }
           className="bg-gray-700 hover:bg-gray-600"
         >