fix cannot update pet info

src/components/Admin/Pets/Add/AddSmallPicture.tsx

@@ -1,47 +1,33 @@
 import { Icon } from "@iconify/react";
 
 interface AddSmallPictureProps {
-  value: File[];
-  setValue: React.Dispatch<React.SetStateAction<File[]>>;
+  images: string[];
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onDelete: (index: number) => void;
 }
 
-const AddSmallPicture = (props: AddSmallPictureProps) => {
-  const { value, setValue } = props;
-  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFiles = event.target.files;
-    if (selectedFiles && selectedFiles.length !== 0) {
-      const newFiles: File[] = Array.from(selectedFiles);
-      setValue((prev) => {
-        return [...prev, ...Array.from(newFiles)];
-      });
-    }
-  };
-
-  const handleDeleteImage = (index: number) => {
-    setValue((prev) => {
-      const newFiles = [...prev];
-      newFiles.splice(index, 1);
-      return newFiles;
-    });
-  };
-
+const AddSmallPicture = ({
+  images,
+  onChange,
+  onDelete,
+}: AddSmallPictureProps) => {
   return (
     <div className="flex w-full snap-x flex-row gap-4 overflow-x-auto scroll-smooth pb-2">
-      {Array.from(value).map((picture, index) => {
-        if (!picture) return;
+      {images.map((image, index) => {
+        if (!image) return;
         return (
           <div
             className="relative flex aspect-square w-[60%] max-w-48 flex-shrink-0 snap-start items-center justify-center bg-white"
             key={index}
           >
             <img
-              src={URL.createObjectURL(picture)}
-              alt={picture.name}
+              src={image}
+              alt={image}
               className="h-full w-full rounded-3xl border-2  border-accent-gray-variant border-opacity-50 object-cover object-center"
             />
             <div className="absolute right-0 top-0 p-2">
               <button
-                onClick={() => handleDeleteImage(index)}
+                onClick={() => onDelete(index)}
                 className="flex h-8 w-8 cursor-pointer flex-col items-center justify-center rounded-full bg-white p-1 shadow-md hover:brightness-90"
               >
                 <Icon icon="ph:trash" className="h-5 w-5 text-accent-red" />
@@ -56,8 +42,8 @@ const AddSmallPicture = (props: AddSmallPictureProps) => {
         className="hidden w-full"
         type="file"
         accept=".jpeg, .jpg, .png"
-        multiple={true}
-        onChange={handleOnChange}
+        multiple={false}
+        onChange={onChange}
       />
       <label
         htmlFor="smallPicture"

src/components/Admin/Pets/Add/AddThumbnail.tsx

@@ -2,31 +2,29 @@ import { Icon } from "@iconify/react";
 import PetBadge from "./PetBadge";
 
 interface AddThumbnailProps {
-  valueThumbnail: File | null;
-  setThumbnail: React.Dispatch<React.SetStateAction<File | null>>;
-  valueOrigin: string;
+  thumbnail: string | null;
+  onChangeThumbnail: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  origin: string;
   setOrigin: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const AddThumbnail = (props: AddThumbnailProps) => {
-  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedImg = event.target.files;
-    if (selectedImg && selectedImg.length !== 0) {
-      props.setThumbnail(selectedImg[0]);
-    }
-  };
-
+const AddThumbnail = ({
+  thumbnail,
+  onChangeThumbnail,
+  origin,
+  setOrigin,
+}: AddThumbnailProps) => {
   return (
     <div className="relative flex aspect-square h-fit w-full flex-col">
-      {props.valueThumbnail === null ? (
+      {thumbnail === null ? (
         <div className="flex h-full w-full items-center justify-center rounded-3xl border-2 border-accent-gray-variant bg-white drop-shadow-sm">
           <input
             type="file"
             id="thumbnailPicturePlus"
             accept=".jpeg, .jpg, .png"
             multiple={false}
             className="hidden"
-            onChange={handleOnChange}
+            onChange={onChangeThumbnail}
           />
           <label
             htmlFor="thumbnailPicturePlus"
@@ -41,7 +39,7 @@ const AddThumbnail = (props: AddThumbnailProps) => {
       ) : (
         <div className="flex h-full w-full">
           <img
-            src={URL.createObjectURL(props.valueThumbnail)}
+            src={thumbnail}
             alt="Thumbnail"
             className="h-full w-full rounded-3xl border-2 border-accent-gray-variant object-cover object-center drop-shadow-sm"
           ></img>
@@ -51,7 +49,7 @@ const AddThumbnail = (props: AddThumbnailProps) => {
       <div
         className={
           "absolute bottom-5 right-5 " +
-          (props.valueThumbnail === null ? "hidden" : "visible")
+          (thumbnail === null ? "hidden" : "visible")
         }
       >
         <input
@@ -60,7 +58,7 @@ const AddThumbnail = (props: AddThumbnailProps) => {
           accept=".jpeg, .jpg, .png"
           multiple={false}
           className="hidden"
-          onChange={handleOnChange}
+          onChange={onChangeThumbnail}
         />
         <label htmlFor="thumbnailPicturePencil">
           <Icon
@@ -71,11 +69,7 @@ const AddThumbnail = (props: AddThumbnailProps) => {
       </div>
 
       <div className="absolute -top-[2px] right-4">
-        <PetBadge
-          value={props.valueOrigin}
-          setValue={props.setOrigin}
-          isEditabled
-        />
+        <PetBadge value={origin} setValue={setOrigin} isEditabled />
       </div>
     </div>
   );