Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { Button, Modal } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { connect } from 'react-redux'
import { axios } from '../../../../../utils'
import styled from 'styled-components'
import { addNotification } from '../../../../../redux/notification/notification.actions'
import FormErrorFeedback from '../../../../../shared/form-error-feedback/FormErrorFeedback'
import Spinner from '../../../../../shared/loading-spinner/Spinner'

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`

const AddGroupModal = ({
  show,
  onHide,
  groupTypes,
  industries,
  fetchGroups,
  addNotification, // Redux
}) => {
  const [loading, setLoading] = useState(false)

  // React hook form
  const { register, handleSubmit, errors, getValues, setError } = useForm()

  const onSubmitHandler = (data) => {
    setLoading(true)
    const formData = new FormData()
    Object.entries(data).map(([key, value]) => formData.append(key, value))

    axios
      .post(`/group/my-groups/add`, formData)
      .then(({ data: response }) => {
        const { data, success } = response

        if (!success) {
          const errorMessage = data
          errorMessage === 'object'
            ? Object.entries(errorMessage).map(
                ([key, value]) =>
                  key in getValues() &&
                  setError(key, {
                    type: 'manual',
                    message: Array.isArray(value) ? value[0] : value,
                  })
              )
            : addNotification({ style: 'danger', msg: errorMessage })
        }

        fetchGroups()
        onHide()
      })
      .catch((err) => addNotification({ style: 'danger', msg: err }))
      .finally(() => setLoading(false))
  }

  return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Nuevo Grupo
        </Modal.Title>
      </Modal.Header>
      <form onSubmit={handleSubmit(onSubmitHandler)}>
        <Modal.Body>
          <div style={{ position: 'relative' }}>
            <div className="form-group">
              <input
                type="text"
                name="name"
                id="name"
                placeholder="Nombre del grupo"
                ref={register({
                  required: 'Por favor ingrese el nombre del grupo',
                })}
              />
              {errors.name && (
                <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
              )}
            </div>
            <div className="form-group">
              <select
                name="type_id"
                id="type_id"
                defaultValue=""
                ref={register({
                  required: 'Por favor eliga un tipo',
                })}
              >
                <option value="" hidden>
                  Tipo
                </option>
                {Object.entries(groupTypes).map(([key, value]) => (
                  <option value={key} key={key}>
                    {value}
                  </option>
                ))}
              </select>
              {errors.type_id && (
                <FormErrorFeedback>{errors.type_id.message}</FormErrorFeedback>
              )}
            </div>
            <div className="form-group">
              <select
                name="industry_id"
                id="industry_id"
                defaultValue=""
                ref={register({
                  required: 'Por favor eliga una industria',
                })}
              >
                <option value="" hidden>
                  Industria
                </option>
                {Object.entries(industries).map(([key, value]) => (
                  <option value={key} key={key}>
                    {value}
                  </option>
                ))}
              </select>
              {errors.industry_id && (
                <FormErrorFeedback>
                  {errors.industry_id.message}
                </FormErrorFeedback>
              )}
            </div>

            {loading && (
              <StyledSpinnerContainer>
                <Spinner />
              </StyledSpinnerContainer>
            )}
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button type="submit">Crear</Button>
          <Button onClick={onHide} variant="danger">
            Cancelar
          </Button>
        </Modal.Footer>
      </form>
    </Modal>
  )
}

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification),
}

export default connect(null, mapDispatchToProps)(AddGroupModal)