From 169f0166b83a0815ed443b4b45167455936831e3 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Mon, 10 Mar 2025 14:32:32 +0800
Subject: [PATCH] fix: update upload handling to conditionally reset upload
 state based on category

---
 app/components/text-editor/editor-menubar.tsx | 13 +++++--------
 app/components/ui/input-file.tsx              |  5 +++--
 app/contexts/admin.tsx                        |  2 +-
 app/layouts/admin/form-upload.tsx             |  3 +--
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/app/components/text-editor/editor-menubar.tsx b/app/components/text-editor/editor-menubar.tsx
index 8a5c612..e1ce6ae 100644
--- a/app/components/text-editor/editor-menubar.tsx
+++ b/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])
diff --git a/app/components/ui/input-file.tsx b/app/components/ui/input-file.tsx
index dc85361..29d6f00 100644
--- a/app/components/ui/input-file.tsx
+++ b/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" />
diff --git a/app/contexts/admin.tsx b/app/contexts/admin.tsx
index 6f87995..c64ccc9 100644
--- a/app/contexts/admin.tsx
+++ b/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
diff --git a/app/layouts/admin/form-upload.tsx b/app/layouts/admin/form-upload.tsx
index bd813b1..3ee6801 100644
--- a/app/layouts/admin/form-upload.tsx
+++ b/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)