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);