fix /media route

src/components/media/MediaFormUtils.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
+import {useState} from 'react'
-import { UseFormSetError, UseFormClearErrors, UseFormSetValue } from 'react-hook-form'
+import {UseFormSetError, UseFormClearErrors, UseFormSetValue} from 'react-hook-form'
 
 export const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
 export const ALLOWED_VIDEO_TYPES = ['video/mp4', 'video/webm', 'video/ogg']
@@ -23,12 +23,7 @@ type UseMediaFileUploadProps = {
   setValue: UseFormSetValue<any>
 }
 
-export const useMediaFileUpload = ({
+export const useMediaFileUpload = ({selectedMediaType, setError, clearErrors, setValue}: UseMediaFileUploadProps) => {
-  selectedMediaType,
-  setError,
-  clearErrors,
-  setValue,
-}: UseMediaFileUploadProps) => {
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
   const [previewUrl, setPreviewUrl] = useState<string | null>(null)
 
@@ -39,7 +34,7 @@ export const useMediaFileUpload = ({
     if (selectedMediaType) {
       const error = validateFileType(file, selectedMediaType)
       if (error) {
-        setError('file', { type: 'manual', message: error })
+        setError('file', {type: 'manual', message: error})
         event.target.value = ''
         return
       }
@@ -57,14 +52,13 @@ export const useMediaFileUpload = ({
     }
   }
 
-  const handleMediaTypeChange = (event: any) => {
+  const handleMediaTypeChange = (newMediaType: number | null) => {
-    const newMediaType = event.target.value
+    setValue('media_type', newMediaType || null)
-    setValue('media_type', newMediaType)
 
-    if (selectedFile) {
+    if (selectedFile && newMediaType) {
       const error = validateFileType(selectedFile, newMediaType)
       if (error) {
-        setError('file', { type: 'manual', message: error })
+        setError('file', {type: 'manual', message: error})
         setValue('file', null)
         setSelectedFile(null)
         setPreviewUrl(null)
@@ -82,4 +76,4 @@ export const useMediaFileUpload = ({
     handleFileChange,
     handleMediaTypeChange,
   }
-}
+}

src/pages/media/create.tsx

@@ -1,22 +1,30 @@
-import {Box, TextField, Button, Typography, FormControl, InputLabel, Select, MenuItem} from '@mui/material'
+import {Box, TextField, Button, Typography, Autocomplete} from '@mui/material'
 import {Create} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
+import {Controller} from 'react-hook-form'
 
 import {MEDIA_TYPES} from '../../lib/constants'
 import {ALLOWED_IMAGE_TYPES, ALLOWED_VIDEO_TYPES, useMediaFileUpload} from '../../components/media/MediaFormUtils'
 
+type MediaFormValues = {
+  filename: string
+  media_type: number
+  file?: File
+}
+
 export const MediaCreate = () => {
   const {
     saveButtonProps,
     refineCore: {formLoading, onFinish},
     register,
+    control,
     formState: {errors},
     setValue,
     handleSubmit,
     watch,
     setError,
     clearErrors,
-  } = useForm({})
+  } = useForm<MediaFormValues>({})
 
   const selectedMediaType = watch('media_type')
 
@@ -44,6 +52,45 @@ export const MediaCreate = () => {
         }),
       }}
     >
+      <Controller
+        control={control}
+        name="media_type"
+        rules={{
+          required: 'Это поле является обязательным',
+        }}
+        render={({field}) => (
+          <Autocomplete
+            options={MEDIA_TYPES}
+            value={MEDIA_TYPES.find((option) => option.value === field.value) || null}
+            onChange={(_, value) => {
+              field.onChange(value?.value || null)
+              handleMediaTypeChange(value?.value || null)
+            }}
+            getOptionLabel={(item) => {
+              return item ? item.label : ''
+            }}
+            isOptionEqualToValue={(option, value) => {
+              return option.value === value?.value
+            }}
+            renderInput={(params) => <TextField {...params} label="Тип" margin="normal" variant="outlined" error={!!errors.media_type} helperText={(errors as any)?.media_type?.message} required />}
+          />
+        )}
+      />
+
+      <TextField
+        {...register('filename', {
+          required: 'Это поле является обязательным',
+        })}
+        error={!!(errors as any)?.filename}
+        helperText={(errors as any)?.filename?.message}
+        margin="normal"
+        fullWidth
+        InputLabelProps={{shrink: true}}
+        type="text"
+        label="Название"
+        name="filename"
+      />
+
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
         <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={6}>
           <Box display="flex" flexDirection="column" alignItems="center" gap={2}>
@@ -71,44 +118,6 @@ export const MediaCreate = () => {
             </Box>
           )}
         </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: 'Это поле является обязательным',
-          })}
-          error={!!(errors as any)?.filename}
-          helperText={(errors as any)?.filename?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label="Название"
-          name="filename"
-        />
       </Box>
     </Create>
   )

src/pages/media/edit.tsx

@@ -1,8 +1,9 @@
-import {Box, TextField, Button, Typography, FormControl, InputLabel, Select, MenuItem} from '@mui/material'
+import {Box, TextField, Button, Typography, Autocomplete} from '@mui/material'
 import {Edit} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
 import {useEffect} from 'react'
 import {useShow} from '@refinedev/core'
+import {Controller} from 'react-hook-form'
 
 import {MEDIA_TYPES} from '../../lib/constants'
 import {ALLOWED_IMAGE_TYPES, ALLOWED_VIDEO_TYPES, useMediaFileUpload} from '../../components/media/MediaFormUtils'
@@ -24,6 +25,7 @@ export const MediaEdit = () => {
     watch,
     setError,
     clearErrors,
+    control,
   } = useForm<MediaFormValues>({
     defaultValues: {
       filename: '',
@@ -68,7 +70,47 @@ export const MediaEdit = () => {
       }}
     >
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
-        <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={6}>
+        <Controller
+          control={control}
+          name="media_type"
+          rules={{
+            required: 'Это поле является обязательным',
+          }}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              options={MEDIA_TYPES}
+              value={MEDIA_TYPES.find((option) => option.value === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.value || null)
+                handleMediaTypeChange(value?.value || null)
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.label : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.value === value?.value
+              }}
+              renderInput={(params) => <TextField {...params} label="Тип" margin="normal" variant="outlined" error={!!errors.media_type} helperText={(errors as any)?.media_type?.message} required />}
+            />
+          )}
+        />
+
+        <TextField
+          {...register('filename', {
+            required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.filename}
+          helperText={(errors as any)?.filename?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="text"
+          label="Название"
+          name="filename"
+        />
+
+        <Box display="flex" flexDirection="column-reverse" alignItems="center" gap={4}>
           <Box display="flex" flexDirection="column" alignItems="center" gap={2}>
             <Button variant="contained" component="label" disabled={!selectedMediaType}>
               {selectedFile ? 'Изменить файл' : 'Загрузить файл'}
@@ -90,48 +132,10 @@ export const MediaEdit = () => {
 
           {previewUrl && (
             <Box mt={2} display="flex" justifyContent="center">
-              <img src={previewUrl} alt="Preview" style={{maxWidth: '200px', borderRadius: 8}} />
+              <img src={previewUrl} alt="Preview" style={{maxWidth: '300px', objectFit: 'contain'}} />
             </Box>
           )}
         </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: 'Это поле является обязательным',
-          })}
-          error={!!(errors as any)?.filename}
-          helperText={(errors as any)?.filename?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label="Название"
-          name="filename"
-        />
       </Box>
     </Edit>
   )

src/pages/media/show.tsx

@@ -1,6 +1,7 @@
 import {Stack, Typography} from '@mui/material'
 import {useShow} from '@refinedev/core'
 import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+import {MEDIA_TYPES} from '../../lib/constants'
 
 export const MediaShow = () => {
   const {query} = useShow({})
@@ -10,8 +11,12 @@ export const MediaShow = () => {
 
   const fields = [
     {label: 'Название', data: 'filename'},
-    {label: 'Тип', data: 'media_type'},
+    {
-    {label: 'ID', data: 'id'},
+      label: 'Тип',
+      data: 'media_type',
+      render: (value: number) => MEDIA_TYPES.find((type) => type.value === value)?.label || value,
+    },
+    // {label: 'ID', data: 'id'},
   ]
 
   return (
@@ -19,12 +24,12 @@ export const MediaShow = () => {
       <Stack gap={4}>
         {record && <img src={`https://wn.krbl.ru/media/${record?.id}/download`} alt={record?.filename} style={{maxWidth: '100%', height: '40vh', objectFit: 'contain', borderRadius: 8}} />}
 
-        {fields.map(({label, data}) => (
+        {fields.map(({label, data, render}) => (
           <Stack key={data} gap={1}>
             <Typography variant="body1" fontWeight="bold">
               {label}
             </Typography>
-            <TextField value={record?.[data]} />
+            <TextField value={render ? render(record?.[data]) : record?.[data]} />
           </Stack>
         ))}
       </Stack>