refactor create, edit for /media route

src/pages/media/edit.tsx

@@ -1,10 +1,11 @@
 import {Box, TextField, Button, Typography, FormControl, InputLabel, Select, MenuItem} from '@mui/material'
 import {Edit} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
-import {useState, useEffect} from 'react'
+import {useEffect} from 'react'
 import {useShow} from '@refinedev/core'
 
 import {MEDIA_TYPES} from '../../lib/constants'
+import {ALLOWED_IMAGE_TYPES, ALLOWED_VIDEO_TYPES, useMediaFileUpload} from '../../components/media/MediaFormUtils'
 
 type MediaFormValues = {
   filename: string
@@ -20,6 +21,9 @@ export const MediaEdit = () => {
     formState: {errors},
     setValue,
     handleSubmit,
+    watch,
+    setError,
+    clearErrors,
   } = useForm<MediaFormValues>({
     defaultValues: {
       filename: '',
@@ -32,8 +36,14 @@ export const MediaEdit = () => {
   const {data} = query
   const record = data?.data
 
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const selectedMediaType = watch('media_type')
+
+  const {selectedFile, previewUrl, setPreviewUrl, handleFileChange, handleMediaTypeChange} = useMediaFileUpload({
+    selectedMediaType,
+    setError,
+    clearErrors,
+    setValue,
+  })
 
   useEffect(() => {
     if (record?.id) {
@@ -41,41 +51,28 @@ export const MediaEdit = () => {
       setValue('filename', record?.filename || '')
       setValue('media_type', record?.media_type)
     }
-  }, [record, setValue])
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0]
-    if (file) {
-      setValue('file', file)
-      setSelectedFile(file)
-
-      if (file.type.startsWith('image/')) {
-        const url = URL.createObjectURL(file)
-        setPreviewUrl(url)
-      }
-    }
-  }
+  }, [record, setValue, setPreviewUrl])
 
   return (
     <Edit
       saveButtonProps={{
         ...saveButtonProps,
+        disabled: !!errors.file,
         onClick: handleSubmit((data) => {
           const formData = {
             filename: data.filename,
             type: Number(data.media_type),
           }
-
           onFinish(formData)
         }),
       }}
     >
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
         <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={6}>
-          <Box display="flex" alignItems="center" gap={2}>
-            <Button variant="contained" component="label">
+          <Box display="flex" flexDirection="column" alignItems="center" gap={2}>
+            <Button variant="contained" component="label" disabled={!selectedMediaType}>
               {selectedFile ? 'Изменить файл' : 'Загрузить файл'}
-              <input type="file" hidden onChange={handleFileChange} />
+              <input type="file" hidden onChange={handleFileChange} accept={selectedMediaType === 1 ? ALLOWED_IMAGE_TYPES.join(',') : ALLOWED_VIDEO_TYPES.join(',')} />
             </Button>
 
             {selectedFile && (
@@ -83,6 +80,12 @@ export const MediaEdit = () => {
                 {selectedFile.name}
               </Typography>
             )}
+
+            {errors.file && (
+              <Typography variant="caption" color="error">
+                {(errors as any)?.file?.message}
+              </Typography>
+            )}
           </Box>
 
           {previewUrl && (
@@ -92,6 +95,30 @@ export const MediaEdit = () => {
           )}
         </Box>
 
+        <FormControl fullWidth margin="normal" error={!!errors.media_type}>
+          <InputLabel id="media-type-label">Тип</InputLabel>
+          <Select
+            labelId="media-type-label"
+            label="Тип"
+            {...register('media_type', {
+              required: 'Это поле является обязательным',
+              valueAsNumber: true,
+            })}
+            onChange={handleMediaTypeChange}
+          >
+            {MEDIA_TYPES.map((type) => (
+              <MenuItem key={type.value} value={type.value}>
+                {type.label}
+              </MenuItem>
+            ))}
+          </Select>
+          {errors.media_type && (
+            <Typography variant="caption" color="error">
+              {(errors as any)?.media_type?.message}
+            </Typography>
+          )}
+        </FormControl>
+
         <TextField
           {...register('filename', {
             required: 'Это поле является обязательным',
@@ -105,31 +132,6 @@ export const MediaEdit = () => {
           label="Название"
           name="filename"
         />
-
-        <FormControl fullWidth margin="normal" error={!!errors.media_type}>
-          <InputLabel id="media-type-label">Тип</InputLabel>
-          <Select
-            labelId="media-type-label"
-            label="Тип"
-            {...register('media_type', {
-              required: 'Это поле является обязательным',
-              valueAsNumber: true,
-            })}
-            defaultValue=""
-          >
-            {MEDIA_TYPES.map((option) => (
-              <MenuItem key={option.value} value={option.value}>
-                {option.label}
-              </MenuItem>
-            ))}
-          </Select>
-
-          {errors.media_type && (
-            <Typography variant="caption" color="error">
-              {(errors as any)?.message}
-            </Typography>
-          )}
-        </FormControl>
       </Box>
     </Edit>
   )