From b97e8a1ab4a532f5294a2255f840e2e26fae7b5d Mon Sep 17 00:00:00 2001
From: NicoSerranoP <nnicosp@hotmail.com>
Date: Tue, 17 Dec 2024 12:09:15 -0500
Subject: [PATCH] fix(image): pr comments

---
 .../interface/src/components/ImageUpload.tsx  | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/packages/interface/src/components/ImageUpload.tsx b/packages/interface/src/components/ImageUpload.tsx
index 28e56e33..4d10eb39 100644
--- a/packages/interface/src/components/ImageUpload.tsx
+++ b/packages/interface/src/components/ImageUpload.tsx
@@ -1,14 +1,14 @@
+/* eslint-disable react/require-default-props */
+
 import { useMutation } from "@tanstack/react-query";
 import clsx from "clsx";
 import { ImageIcon } from "lucide-react";
-import { type ComponentProps, ElementType, forwardRef, useRef, useCallback } from "react";
+import { type ComponentProps, forwardRef, useRef, useCallback, ChangeEvent } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { toast } from "sonner";
 
 import { IconButton } from "~/components/ui/Button";
 
-import { PolymorphicRef } from "./ui";
-
 export interface IImageUploadProps extends ComponentProps<"img"> {
   name?: string;
   maxSize?: number;
@@ -22,7 +22,7 @@ export const ImageUpload = forwardRef(
       className,
     }: IImageUploadProps,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ref: PolymorphicRef<ElementType>,
+    _,
   ): JSX.Element => {
     const internalRef = useRef<HTMLInputElement>(null);
     const { control } = useFormContext();
@@ -44,18 +44,31 @@ export const ImageUpload = forwardRef(
       e.preventDefault();
     }, []);
 
+    const onClickContainer = useCallback(() => {
+      internalRef.current?.click();
+    }, [internalRef]);
+
+    const onChangeInputImage = useCallback(
+      (event: ChangeEvent<HTMLInputElement>, onChange: (event: string) => void) => {
+        const [file] = event.target.files ?? [];
+        if (file) {
+          select.mutate(file, {
+            onSuccess: (objectUrl) => {
+              onChange(objectUrl);
+            },
+          });
+        }
+      },
+      [select],
+    );
+
     return (
       <Controller
         control={control}
         name={name}
         render={({ field: { value, onChange, ...field } }) => (
           // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-          <div
-            className={clsx("relative cursor-pointer overflow-hidden", className)}
-            onClick={() => {
-              internalRef.current?.click();
-            }}
-          >
+          <div className={clsx("relative cursor-pointer overflow-hidden", className)} onClick={onClickContainer}>
             <IconButton className="absolute bottom-1 right-1" icon={ImageIcon} onClick={onClickIconButton} />
 
             <div
@@ -71,16 +84,8 @@ export const ImageUpload = forwardRef(
               accept="image/png, image/jpeg"
               className="hidden"
               type="file"
-              // value={value?.[name]}
               onChange={(event) => {
-                const [file] = event.target.files ?? [];
-                if (file) {
-                  select.mutate(file, {
-                    onSuccess: (objectUrl) => {
-                      onChange(objectUrl);
-                    },
-                  });
-                }
+                onChangeInputImage(event, onChange);
               }}
             />
           </div>