Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import { 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 FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
import Spinner from "../../../../shared/loading-spinner/Spinner";
import { addNotification } from "../../../../redux/notification/notification.actions";
import styled from "styled-components";

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 AddCompanyModal = (props) => {
  // props destructuring
  const { show, onHide, fetchCompanies, companySizes, industries } = props;

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

  // Redux
  const { addNotification } = props;

  // states
  const [loading, setLoading] = useState(false);

  const onSubmitHandler = async (data) => {
    setLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      formData.append(key, value);
    });
    await axios.post(`/company/my-companies/add`, formData).then((response) => {
      const resData = response.data;
      if (resData.success) {
        fetchCompanies();
        onHide();
      } else {
        const resError = resData.data;
        if (resError.constructor.name === "Object") {
          Object.entries(resError).map(([key, value]) => {
            if (key in getValues()) {
              setError(key, {
                type: "manual",
                message: Array.isArray(value) ? value[0] : value,
              });
            }
          });
        } else {
          addNotification({
            style: "danger",
            msg: resError,
          });
        }
      }
    });
    setLoading(false);
  };

  return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Nueva Empresa
        </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 de la empresa"
                ref={register({
                  required: "Por favor ingrese el nombre de la Empresa",
                })}
              />
              {errors.name && (
                <FormErrorFeedback>{errors.name.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>
            <div className="form-group">
              <select
                name="company_size_id"
                id="company_size_id"
                defaultValue=""
                ref={register({
                  required: "Por favor eliga el tamaño de la empresa",
                })}
              >
                <option value="" hidden>
                  Tamaño de la empresa
                </option>
                {Object.entries(companySizes).map(([key, value]) => (
                  <option value={key} key={key}>
                    {value}
                  </option>
                ))}
              </select>
              {errors.company_size_id && (
                <FormErrorFeedback>
                  {errors.company_size_id.message}
                </FormErrorFeedback>
              )}
            </div>

            {loading && (
              <StyledSpinnerContainer>
                <Spinner />
              </StyledSpinnerContainer>
            )}
          </div>
        </Modal.Body>
        <Modal.Footer>
          <button
            type="submit"
            className="message-us text-white"
          >
            Crear
          </button>
          <button
            type="button"
            onClick={onHide}
            className="message-us text-white"
          >
            Cancelar
          </button>
        </Modal.Footer>
      </form>
    </Modal>
  );
};

// const mapStateToProps = (state) => ({});

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

export default connect(null, mapDispatchToProps)(AddCompanyModal);