edit-implementation-modal.tsx

import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  ModalProps,
  useDisclosure,
  Text,
  ModalCloseButton,
  ModalBody,
  VStack,
  FormControl,
  FormLabel,
  HStack,
  FormErrorMessage,
  Input,
  Tooltip,
  Icon,
  Textarea,
  ModalFooter,
  Button,
} from '@chakra-ui/react'
import { useFormik } from 'formik'
import React from 'react'
import { Implementation } from 'src/models'
import { EditImplementationSchema, editImplementationSchema } from './schema'
import { FaInfo } from 'react-icons/fa'
import { UpdateImplementationMutation } from '../query-builder/update-implementation-mutation'
import { useQueryClient } from 'react-query'
import { GetImplementationQuery } from '../query-builder/get-implementation-query'
import { GetImplementationsByPatternIdQuery } from '../query-builder/get-implementations-by-pattern-id-query'

const FORM_ID = 'edit-implementation-form'

export type EditImplementationModalProps = {
  disclosure: ReturnType<typeof useDisclosure>
  implementation: Implementation
  patternId: string
} & Partial<ModalProps>

export const EditImplementationModal: React.FC<
  EditImplementationModalProps
> = ({ disclosure, implementation, patternId, ...props }) => {
  const queryClient = useQueryClient()

  const updateImplementationMutation =
    UpdateImplementationMutation.useMutation()

  const handleOnSubmit = async (values: EditImplementationSchema) => {
    await updateImplementationMutation.mutateAsync({
      id: implementation.id,
      name: values.name,
      dockerhubImageName: values.dockerhubImageName,
      description: values.description,
    })

    queryClient.invalidateQueries(
      GetImplementationQuery.getKey({ id: implementation.id })
    )

    queryClient.invalidateQueries(
      GetImplementationsByPatternIdQuery.getKey({
        patternId: patternId,
      })
    )

    disclosure.onClose()
  }

  const {
    handleSubmit,
    handleReset,
    handleChange,
    setTouched,
    values,
    isSubmitting,
    errors,
    touched,
    isValid,
  } = useFormik({
    enableReinitialize: true,
    initialValues: {
      name: implementation.name,
      description: implementation.description,
      dockerhubImageName: implementation.dockerhubImageName,
    },
    validateOnBlur: true,
    validateOnChange: true,
    validateOnMount: true,
    validationSchema: editImplementationSchema,
    onSubmit: handleOnSubmit,
  })

  return (
    <>
      {disclosure.isOpen && (
        <Modal size="xl" {...disclosure} {...props}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>
              <Text fontSize="md">
                Editar implementacion {implementation.name}
              </Text>
            </ModalHeader>
            <ModalCloseButton mt="-2" mr="-2" />
            <form id={FORM_ID} onSubmit={handleSubmit} onReset={handleReset}>
              <ModalBody>
                <VStack>
                  <FormControl isInvalid={Boolean(errors.name) && touched.name}>
                    <FormLabel>
                      <HStack>
                        <Text fontSize="sm">Nombre</Text>
                        <Text color="red">*</Text>
                      </HStack>
                    </FormLabel>
                    <Input
                      name="name"
                      autoFocus
                      value={values.name}
                      onChange={(e) => {
                        setTouched({ ...touched, name: true })
                        handleChange(e)
                      }}
                    />
                    <FormErrorMessage>{errors.name}</FormErrorMessage>
                  </FormControl>
                  <FormControl
                    isInvalid={
                      Boolean(errors.dockerhubImageName) &&
                      touched.dockerhubImageName
                    }
                  >
                    <FormLabel>
                      <HStack>
                        <Text fontSize="sm">
                          Nombre de la imagen en Dockerhub
                        </Text>
                        <Text color="red">*</Text>
                        <Tooltip
                          label="Nombre de la imagen en Dockerhub con la implementacion"
                          shouldWrapChildren
                          hasArrow
                        >
                          <Icon as={FaInfo} color="blue.500" />
                        </Tooltip>
                      </HStack>
                    </FormLabel>
                    <Input
                      name="dockerhubImageName"
                      autoFocus
                      value={values.dockerhubImageName}
                      onChange={(e) => {
                        setTouched({ ...touched, dockerhubImageName: true })
                        handleChange(e)
                      }}
                    />
                    <FormErrorMessage>
                      {errors.dockerhubImageName}
                    </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>
                </VStack>
              </ModalBody>
            </form>
            <ModalFooter>
              <HStack>
                <Button variant="outline" onClick={disclosure.onClose}>
                  Cancelar
                </Button>
                <Button
                  form={FORM_ID}
                  variant="solid"
                  colorScheme="blue"
                  type="submit"
                  isLoading={isSubmitting}
                  isDisabled={!isValid}
                >
                  Guardar
                </Button>
              </HStack>
            </ModalFooter>
          </ModalContent>
        </Modal>
      )}
    </>
  )
}