add-pattern-button.tsx

import React from 'react'

import {
  Button,
  Modal,
  ModalHeader,
  ButtonProps,
  useDisclosure,
  ModalCloseButton,
  ModalBody,
  ModalOverlay,
  ModalContent,
  Text,
  HStack,
  VStack,
  FormControl,
  FormLabel,
  Input,
  ModalFooter,
  FormErrorMessage,
  Textarea,
  Center,
  Icon,
  Stack,
} from '@chakra-ui/react'
import { useFormik } from 'formik'
import { FaPaperclip } from 'react-icons/fa'
import { useQueryClient } from 'react-query'

import { CreatePatternMutation, GetPatternsQuery } from '../query-builder'

import { CreatePatternSchema, createPatternSchema } from './schema'
import { useAddFormalizations } from './use-add-formalizations'
import { FormalizationsList } from './formalizations-list'

const FORM_ID = 'add-pattern-form'

export const AddPatternButton: React.FC<ButtonProps> = () => {
  const { isOpen, onClose, onOpen } = useDisclosure()
  const queryClient = useQueryClient()

  const { formalizations, dropzoneState, handleRemoveFormalization } =
    useAddFormalizations({})

  const createMutation = CreatePatternMutation.useMutation({
    onSuccess: () => {
      queryClient.invalidateQueries(GetPatternsQuery.getKey({}))
    },
  })

  const handleOnSubmit = async (values: CreatePatternSchema) => {
    await createMutation.mutateAsync({
      title: values.title,
      description: values.description,
    })
    onClose()
  }

  const {
    handleSubmit,
    handleReset,
    handleChange,
    setTouched,
    values,
    isSubmitting,
    errors,
    touched,
    isValid,
  } = useFormik({
    enableReinitialize: true,
    initialValues: {
      title: '',
      description: '',
    },
    validateOnBlur: true,
    validateOnChange: true,
    validateOnMount: true,
    validationSchema: createPatternSchema,
    onSubmit: handleOnSubmit,
  })
  return (
    <>
      <Button variant="solid" colorScheme="blue" onClick={onOpen}>
        Crear
      </Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>
            <Text fontSize="md">Crear un nuevo patron</Text>
          </ModalHeader>
          <ModalCloseButton />
          <form id={FORM_ID} onSubmit={handleSubmit} onReset={handleReset}>
            <ModalBody>
              <VStack>
                <FormControl isInvalid={Boolean(errors.title) && touched.title}>
                  <FormLabel>
                    <HStack>
                      <Text fontSize="sm">Titulo</Text>
                      <Text color="red">*</Text>
                    </HStack>
                  </FormLabel>
                  <Input
                    name="title"
                    autoFocus
                    value={values.title}
                    onChange={(e) => {
                      setTouched({ ...touched, title: true })
                      handleChange(e)
                    }}
                  />
                  <FormErrorMessage>{errors.title}</FormErrorMessage>
                </FormControl>
                <FormControl
                  isInvalid={Boolean(errors.description) && touched.description}
                >
                  <FormLabel>
                    <HStack>
                      <Text fontSize="sm">Descripcion</Text>
                      <Text color="red">*</Text>
                    </HStack>
                  </FormLabel>
                  <Textarea
                    name="description"
                    value={values.description}
                    onChange={(e) => {
                      setTouched({ ...touched, description: true })
                      handleChange(e)
                    }}
                  />
                  <FormErrorMessage>{errors.description}</FormErrorMessage>
                </FormControl>
                <Stack w="full">
                  <FormalizationsList
                    formalizations={formalizations}
                    onRemoveFormalization={handleRemoveFormalization}
                  />
                  <div {...dropzoneState.getRootProps()}>
                    <Center w="100%">
                      <input
                        aria-label="file-upload"
                        {...dropzoneState.getInputProps()}
                      />
                      <Button
                        aria-label="add formalization"
                        variant="unstyled"
                        justifyContent="flex-start"
                        iconSpacing="2"
                        display="flex"
                        color="gray.500"
                        fontWeight="500"
                        fontSize="md"
                        leftIcon={<Icon as={FaPaperclip} />}
                      >
                        Agregar formalizacion
                      </Button>
                    </Center>
                  </div>
                </Stack>
              </VStack>
            </ModalBody>
          </form>

          <ModalFooter>
            <HStack>
              <Button variant="outline" onClick={onClose}>
                Cancelar
              </Button>
              <Button
                form={FORM_ID}
                variant="solid"
                colorScheme="blue"
                type="submit"
                isLoading={isSubmitting}
                isDisabled={!isValid}
              >
                Guardar
              </Button>
            </HStack>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}