fix /media route

2025-03-16 22:18:32 +03:00 · 2025-03-16 22:18:32 +03:00 · 34620d5a64
commit 34620d5a64
parent 8cb64dd5ba
4 changed files with 112 additions and 100 deletions
--- a/src/components/media/MediaFormUtils.tsx
+++ b/src/components/media/MediaFormUtils.tsx
@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { UseFormSetError, UseFormClearErrors, UseFormSetValue } from 'react-hook-form'
+import {useState} from 'react'
+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 = ({
-  selectedMediaType,
-  setError,
-  clearErrors,
-  setValue,
-}: UseMediaFileUploadProps) => {
+export const useMediaFileUpload = ({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 newMediaType = event.target.value
-    setValue('media_type', newMediaType)
+  const handleMediaTypeChange = (newMediaType: number | null) => {
+    setValue('media_type', newMediaType || null)

-    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,
  }
-}
+}
--- a/src/pages/media/create.tsx
+++ b/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>
  )
--- a/src/pages/media/edit.tsx
+++ b/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>
  )
--- a/src/pages/media/show.tsx
+++ b/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>