business/EventForm/EventForm.tsx - master - vinderman/presentation

business/EventForm/EventForm.tsx
1 строка4 KB
kalev
initial commit
06 май 2024, 12:05
06 май 2024, 12:054258fa9
import { ReactElement } from 'react'
import { Button, Space, Text } from '@my-org/ui-components'
import { useNavigate, useParams } from 'react-router-dom'
import { IconChevronLeft } from '@my-org/ui-icons'
import { EventCreateSteps } from '../../utils/constants'
import styles from './MeetingForm.module.scss'
import useEventStore from '../../store/useEventStore'
import StepOne from './components/StepOne'
import StepTwo from './components/StepTwo'
import StepThree from './components/StepThree'
import StepFour from './components/StepFour'
import useRouteGuard from '@/hooks/useRouteGuard'
import CreateTemplateButton from './components/CreateTemplateButton'
import useCreateEvent from '../../hooks/useCreateEvent'
import {
  CreateEventRequest,
  UpdateEventRequest
} from '../../../../../mock-server/api/data-contracts'
import useUpdateEvent from '../../hooks/useUpdateEvent'

interface EventFormProps {
  type: 'create' | 'edit'
}

const EventForm = ({ type }: EventFormProps): ReactElement => {
  const { step, setStep, reset, participantIds, form } = useEventStore(
    (state) => ({
      step: state.step,
      setStep: state.setStep,
      reset: state.reset,
      participantIds: state.form.participantIds,
      form: state.form
    })
  )

  const { id: eventId } = useParams()

  const { mutate: createEvent, isLoading: isCreatingEvent } = useCreateEvent()
  const { mutate: updateEvent, isLoading: isUpdatingEvent } = useUpdateEvent(
    eventId as string
  )

  const navigate = useNavigate()

  useRouteGuard({
    // очищаем стейт при уходе со страницы
    onRouteLeave: () => {
      reset()
    }
  })

  // ===== handlers =====
  const handlePrevClick = (): void => {
    if (step === EventCreateSteps.One) {
      navigate('/meetings')
    } else {
      setStep(step - 1)
    }
  }

  const handleSubmit = (): void => {
    const isEdit = type === 'edit'
    const onSuccess = (): void => {
      navigate(`/meetings/`)
    }

    if (isEdit) {
      updateEvent(form as UpdateEventRequest, {
        // TODO: поменять тип
        onSuccess
      })
    } else {
      createEvent(form as CreateEventRequest, {
        onSuccess
      })
    }
  }

  // ===== render =====
  let Component
  switch (step) {
    case EventCreateSteps.One:
      Component = StepOne
      break
    case EventCreateSteps.Two:
      Component = StepTwo
      break
    case EventCreateSteps.Three:
      Component = StepThree
      break
    case EventCreateSteps.Four:
      Component = StepFour
      break
  }

  const isSubmitButtonDisabled =
    step === EventCreateSteps.Four && !participantIds?.length

  return (
    <div>
      <Space direction="horizontal" align="center">
        <Space
          className={styles.backButton}
          direction="horizontal"
          align="center"
          gap="xsmall"
          onClick={handlePrevClick}
        >
          <IconChevronLeft />
          <Text variant="subtitle-2" color="secondary">
            Назад
          </Text>
        </Space>
        <Text color="tertiary">Шаг {step} из 4</Text>
      </Space>

      <Space gap="large" justify="space-between" className={styles.wrapper}>
        {Component && <Component onSubmit={handleSubmit} />}

        <Space direction="horizontal">
          <Button
            type="submit"
            form={`meeting-create-step-${step}`}
            loading={isCreatingEvent || isUpdatingEvent}
            disabled={isSubmitButtonDisabled}
          >
            {step === EventCreateSteps.Four
              ? 'Опубликовать собрание'
              : 'Следующий шаг'}
          </Button>
          {step !== EventCreateSteps.One && <CreateTemplateButton />}
        </Space>
      </Space>
    </div>
  )
}

export default EventForm