fix: update upload handling to conditionally reset upload state based on category

app/components/text-editor/editor-menubar.tsx

@@ -48,13 +48,9 @@ type TProperties = {
 }
 
 export const EditorMenuBar = (properties: TProperties) => {
-  const {
-    editor,
-    setIsPlainHTML,
-    // category,
-    disabled = false,
-  } = properties
-  const { setIsUploadOpen, uploadedFile, setUploadedFile } = useAdminContext()
+  const { editor, setIsPlainHTML, category, disabled = false } = properties
+  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
+    useAdminContext()
   const [isOpenImage, setIsOpenImage] = useState(false)
   const [imageUrl, setImageUrl] = useState('')
   const [isOpenColor, setIsOpenColor] = useState(false)
@@ -69,9 +65,10 @@ export const EditorMenuBar = (properties: TProperties) => {
   }, [])
 
   useEffect(() => {
-    if (uploadedFile) {
+    if (uploadedFile && isUploadOpen === category) {
       addImage(uploadedFile)
       setUploadedFile(undefined)
+      setIsUploadOpen(undefined)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uploadedFile])

app/components/ui/input-file.tsx

@@ -11,7 +11,7 @@ import {
 import { useRemixFormContext } from 'remix-hook-form'
 import { twMerge } from 'tailwind-merge'
 
-import { useAdminContext } from '~/contexts/admin'
+import { useAdminContext, type TUpload } from '~/contexts/admin'
 
 import { Button } from './button'
 
@@ -57,6 +57,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
     if (uploadedFile && isUploadOpen === name) {
       setValue(name as string, uploadedFile)
       setUploadedFile(undefined)
+      setIsUploadOpen(undefined)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uploadedFile])
@@ -85,7 +86,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
         size="fit"
         className="absolute right-3 h-[42px]"
         onClick={() => {
-          setIsUploadOpen('featured_image')
+          setIsUploadOpen(name as TUpload)
         }}
       >
         <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />

app/contexts/admin.tsx

@@ -12,7 +12,7 @@ export const uploadCategorySchema = z
   .enum(['featured_image', 'ads', 'content', 'profile_picture'])
   .optional()
 
-type TUpload = z.infer<typeof uploadCategorySchema>
+export type TUpload = z.infer<typeof uploadCategorySchema>
 
 type AdminContextProperties = {
   isUploadOpen: TUpload

app/layouts/admin/form-upload.tsx

@@ -15,7 +15,7 @@ export const uploadSchema = z.object({
 export type TUploadSchema = z.infer<typeof uploadSchema>
 
 export const FormUpload = () => {
-  const { isUploadOpen, setUploadedFile, setIsUploadOpen } = useAdminContext()
+  const { isUploadOpen, setUploadedFile } = useAdminContext()
   const fetcher = useFetcher()
   const [disabled, setDisabled] = useState(false)
   const [error, setError] = useState<string>()
@@ -37,7 +37,6 @@ export const FormUpload = () => {
     }
 
     setUploadedFile(fetcher.data.uploadData.data.file_url)
-    setIsUploadOpen(undefined)
 
     setDisabled(true)
     setError(undefined)