legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ardeman 2025-03-10 14:32:32 +08:00
parent e93c0a8464
commit 169f0166b8
4 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/text-editor/editor-menubar.tsx
View File

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

5
app/components/ui/input-file.tsx
View File

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

2
app/contexts/admin.tsx
View File

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

3
app/layouts/admin/form-upload.tsx
View File

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