src/components/modals/create-event/CreateEventModal.tsx - main - voting/frontend

src/components/modals/create-event/CreateEventModal.tsx
111 строк3 KB
TimPulin
035-wire-event-list-page
19 июл 2026, 00:21
19 июл 2026, 00:21f51e051
import { zodResolver } from '@hookform/resolvers/zod'
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  TextField,
  Typography
} from '@mui/material'
import { useEffect, useState } from 'react'
import { Controller, useForm } from 'react-hook-form'
import { type CreateEventFormValues, createEventFormSchema } from './createEventFormSchema'

export interface CreateEventModalProps {
  open: boolean
  onClose: () => void
  onSubmit: (values: CreateEventFormValues) => void | Promise<void>
}

const DEFAULT_VALUES: CreateEventFormValues = {
  name: '',
  date: ''
}

export function CreateEventModal({ open, onClose, onSubmit }: CreateEventModalProps) {
  const [submitError, setSubmitError] = useState<string | null>(null)
  const {
    control,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting }
  } = useForm<CreateEventFormValues>({
    resolver: zodResolver(createEventFormSchema),
    defaultValues: DEFAULT_VALUES
  })

  useEffect(() => {
    if (!open) {
      reset(DEFAULT_VALUES)
      setSubmitError(null)
    }
  }, [open, reset])

  const handleFormSubmit = handleSubmit(async (values) => {
    setSubmitError(null)
    try {
      await onSubmit(values)
      onClose()
    } catch {
      setSubmitError('Не удалось создать событие')
    }
  })

  const handleClose = () => {
    if (isSubmitting) return
    onClose()
  }

  return (
    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
      <DialogTitle>Новое событие</DialogTitle>
      <form onSubmit={handleFormSubmit} noValidate>
        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
          <Controller
            name="name"
            control={control}
            render={({ field }) => (
              <TextField
                {...field}
                label="Название события"
                autoFocus
                fullWidth
                error={Boolean(errors.name)}
                helperText={errors.name?.message}
              />
            )}
          />
          <Controller
            name="date"
            control={control}
            render={({ field }) => (
              <TextField
                {...field}
                label="Дата события"
                type="date"
                fullWidth
                slotProps={{ inputLabel: { shrink: true } }}
                error={Boolean(errors.date)}
                helperText={errors.date?.message}
              />
            )}
          />
          {submitError && (
            <Typography color="error" role="alert">
              {submitError}
            </Typography>
          )}
        </DialogContent>
        <DialogActions sx={{ px: 3, pb: 2 }}>
          <Button onClick={handleClose} disabled={isSubmitting}>
            Отмена
          </Button>
          <Button type="submit" variant="contained" disabled={isSubmitting}>
            Создать
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  )
}