Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 5165
Línea 1... Línea 1...
1 
import React from "react";
 1 
/* eslint-disable react/prop-types */
2 
import { useState } from "react";
 2 
import React, { useState } from 'react'
3 
import { Button, Modal } from "react-bootstrap";
 3 
import { Modal } from 'react-bootstrap'
4 
import { useForm } from "react-hook-form";
 4 
import { useForm } from 'react-hook-form'
5 
import { connect } from "react-redux";
 5 
import { connect } from 'react-redux'
6 
import {axios} from "../../../../utils";
 6 
import { axios } from '../../../../utils'
- 
 
 7 
import { addNotification } from '../../../../redux/notification/notification.actions'
7 
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
 8 
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
8 
import Spinner from "../../../../shared/loading-spinner/Spinner";
 9 
import Spinner from '../../../../shared/loading-spinner/Spinner'
9 
import { addNotification } from "../../../../redux/notification/notification.actions";
 - 
 
10 
import styled from "styled-components";
 - 
 
11 
 
 10 
 
12 
const StyledSpinnerContainer = styled.div`
 11 
const AddCompanyModal = ({
13 
  position: absolute;
 12 
  show = false,
14 
  left: 0;
 - 
 
15 
  top: 0;
 - 
 
16 
  width: 100%;
 13 
  onHide = () => null,
17 
  height: 100%;
 - 
 
18 
  background: rgba(255, 255, 255, 0.4);
 - 
 
19 
  display: flex;
 - 
 
20 
  justify-content: center;
 14 
  fetchCompanies = () => [],
21 
  align-items: center;
 15 
  companySizes = {},
22 
  z-index: 300;
 16 
  industries = {},
23 
`;
 - 
 
24 
 
 - 
 
25 
const AddCompanyModal = (props) => {
 17 
  addNotification // redux action
26 
  // props destructuring
 - 
 
27 
  const { show, onHide, fetchCompanies, companySizes, industries } = props;
 - 
 
28 
 
 - 
 
29 
  // React hook form
 - 
 
30 
  const { register, handleSubmit, errors, getValues, setError } = useForm();
 - 
 
31 
 
 - 
 
32 
  // Redux
 18 
}) => {
33 
  const { addNotification } = props;
 19 
  const [loading, setLoading] = useState(false)
34 
 
 20 
 
35 
  // states
 - 
 
36 
  const [loading, setLoading] = useState(false);
 21 
  const { register, handleSubmit, errors } = useForm()
37 
 
 22 
 
38 
  const onSubmitHandler = async (data) => {
 23 
  const onSubmitHandler = (data) => {
39 
    setLoading(true);
 24 
    setLoading(true)
40 
    const formData = new FormData();
 25 
    const formData = new FormData()
- 
 
 26 
 
41 
    Object.entries(data).map(([key, value]) => {
 27 
    Object.entries(data)
42 
      formData.append(key, value);
 28 
      .map(([key, value]) => formData.append(key, value))
43 
    });
 29 
 
44 
    await axios.post(`/company/my-companies/add`, formData).then((response) => {
 30 
    axios.post('/company/my-companies/add', formData)
45 
      const resData = response.data;
 31 
      .then(({ data: response }) => {
46 
      if (resData.success) {
 32 
        if (!response.success) {
47 
        fetchCompanies();
 - 
 
48 
        onHide();
 - 
 
49 
      } else {
 - 
 
50 
        const resError = resData.data;
 33 
          const errorMessage = typeof response.data === 'string'
51 
        if (resError.constructor.name === "Object") {
 - 
 
52 
          Object.entries(resError).map(([key, value]) => {
 - 
 
53 
            if (key in getValues()) {
 - 
 
54 
              setError(key, {
 34 
            ? response.data
55 
                type: "manual",
 35 
            : Object.entries(response.data)
56 
                message: Array.isArray(value) ? value[0] : value,
 36 
              .map(([key, value]) => `${key}: ${value[0]}`)
57 
              });
 - 
 
58 
            }
 - 
 
59 
          });
 37 
 
60 
        } else {
 - 
 
61 
          addNotification({
 38 
          addNotification({ style: 'danger', msg: errorMessage })
62 
            style: "danger",
 - 
 
63 
            msg: resError,
 - 
 
64 
          });
 39 
          return
65 
        }
 40 
        }
- 
 
 41 
 
- 
 
 42 
        fetchCompanies()
- 
 
 43 
        onHide()
66 
      }
 44 
      })
- 
 
 45 
      .catch((error) => {
- 
 
 46 
        const errorMessage = new Error(error)
- 
 
 47 
        addNotification({ style: 'danger', msg: errorMessage })
67 
    });
 48 
      })
68 
    setLoading(false);
 49 
      .finally(() => setLoading(false))
69 
  };
 50 
  }
Línea 70... Línea 51...
70 
 
 51 
 
71 
  return (
 52 
  return (
72 
    <Modal show={show} onHide={onHide}>
 53 
    <Modal show={show} onHide={onHide}>
73 
      <Modal.Header closeButton>
 54 
      <Modal.Header closeButton>
74 
        <Modal.Title id="contained-modal-title-vcenter">
 55 
        <Modal.Title>
75 
          Nueva Empresa
 56 
          Nueva Empresa
76 
        </Modal.Title>
 57 
        </Modal.Title>
77 
      </Modal.Header>
 58 
      </Modal.Header>
78 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
 - 
 
- 
 
 59 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
79 
        <Modal.Body>
 60 
 
- 
 
 61 
        <Modal.Body className='position-relative'>
80 
          <div style={{ position: "relative" }}>
 62 
 
81 
            <div className="form-group">
 63 
          <div className="form-group">
82 
              <input
 64 
            <input
83 
                type="text"
 65 
              type="text"
84 
                name="name"
 - 
 
85 
                id="name"
 66 
              name="name"
86 
                placeholder="Nombre de la empresa"
 67 
              placeholder="Nombre de la empresa"
87 
                ref={register({
 68 
              ref={register({
88 
                  required: "Por favor ingrese el nombre de la Empresa",
 69 
                required: 'Por favor ingrese el nombre de la Empresa'
89 
                })}
 70 
              })}
90 
              />
 - 
 
91 
              {errors.name && (
 71 
            />
92 
                <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
 - 
 
93 
              )}
 72 
            {errors.name && <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>}
- 
 
 73 
          </div>
94 
            </div>
 74 
 
95 
            <div className="form-group">
 75 
          <div className="form-group">
96 
              <select
 76 
            <select
97 
                name="industry_id"
 - 
 
98 
                id="industry_id"
 - 
 
99 
                defaultValue=""
 77 
              name="industry_id"
100 
                ref={register({
 78 
              ref={register({
101 
                  required: "Por favor eliga una industria",
 79 
                required: 'Por favor eliga una industria'
102 
                })}
 80 
              })}
- 
 
 81 
            >
- 
 
 82 
              <option value="" hidden>Industria</option>
103 
              >
 83 
              {Object.entries(industries).map(([key, value]) =>
104 
                <option value="" hidden>
 84 
                <option value={key} key={key}>
105 
                  Industria
 85 
                  {value}
106 
                </option>
 - 
 
107 
                {Object.entries(industries).map(([key, value]) => (
 - 
 
108 
                  <option value={key} key={key}>
 - 
 
109 
                    {value}
 - 
 
110 
                  </option>
 - 
 
111 
                ))}
 - 
 
112 
              </select>
 - 
 
113 
              {errors.industry_id && (
 - 
 
114 
                <FormErrorFeedback>
 - 
 
115 
                  {errors.industry_id.message}
 - 
 
116 
                </FormErrorFeedback>
 86 
                </option>
- 
 
 87 
              )}
- 
 
 88 
            </select>
117 
              )}
 89 
            {errors.industry_id && <FormErrorFeedback>{errors.industry_id.message}</FormErrorFeedback>}
- 
 
 90 
          </div>
118 
            </div>
 91 
 
119 
            <div className="form-group">
 92 
          <div className="form-group">
120 
              <select
 93 
            <select
121 
                name="company_size_id"
 - 
 
122 
                id="company_size_id"
 - 
 
123 
                defaultValue=""
 94 
              name="company_size_id"
124 
                ref={register({
 95 
              ref={register({
125 
                  required: "Por favor eliga el tamaño de la empresa",
 96 
                required: 'Por favor eliga el tamaño de la empresa'
126 
                })}
 97 
              })}
- 
 
 98 
            >
- 
 
 99 
              <option value="" hidden>Tamaño de la empresa</option>
127 
              >
 100 
              {Object.entries(companySizes).map(([key, value]) =>
128 
                <option value="" hidden>
 101 
                <option value={key} key={key}>
129 
                  Tamaño de la empresa
 102 
                  {value}
130 
                </option>
 - 
 
131 
                {Object.entries(companySizes).map(([key, value]) => (
 - 
 
132 
                  <option value={key} key={key}>
 - 
 
133 
                    {value}
 - 
 
134 
                  </option>
 - 
 
135 
                ))}
 - 
 
136 
              </select>
 - 
 
137 
              {errors.company_size_id && (
 - 
 
138 
                <FormErrorFeedback>
 - 
 
139 
                  {errors.company_size_id.message}
 - 
 
140 
                </FormErrorFeedback>
 103 
                </option>
141 
              )}
 104 
              )}
142 
            </div>
 - 
 
143 
 
 - 
 
144 
            {loading && (
 - 
 
145 
              <StyledSpinnerContainer>
 - 
 
146 
                <Spinner />
 105 
            </select>
147 
              </StyledSpinnerContainer>
 - 
 
148 
            )}
 106 
            {errors.company_size_id && <FormErrorFeedback>{errors.company_size_id.message}</FormErrorFeedback>}
- 
 
 107 
          </div>
- 
 
 108 
 
- 
 
 109 
          {loading && <Spinner />}
149 
          </div>
 110 
 
150 
        </Modal.Body>
 111 
        </Modal.Body>
151 
        <Modal.Footer>
 - 
 
152 
          <button
 112 
        <Modal.Footer>
153 
            type="submit"
 - 
 
154 
            className="message-us text-white"
 - 
 
155 
          >
 - 
 
156 
            Crear
 - 
 
157 
          </button>
 - 
 
158 
          <button
 - 
 
159 
            type="button"
 113 
          <button type="submit">Crear</button>
160 
            onClick={onHide}
 - 
 
161 
            className="message-us text-white"
 - 
 
162 
          >
 - 
 
163 
            Cancelar
 - 
 
164 
          </button>
 114 
          <button type="button" onClick={onHide}>Cancelar</button>
165 
        </Modal.Footer>
 115 
        </Modal.Footer>
166 
      </form>
 116 
      </form>
167 
    </Modal>
 117 
    </Modal>
168 
  );
 118 
  )
169 
};
 - 
 
170 
 
 - 
 
Línea 171... Línea 119...
171 
// const mapStateToProps = (state) => ({});
 119 
}
172 
 
 120 
 
173 
const mapDispatchToProps = {
 121 
const mapDispatchToProps = {
Línea 174... Línea 122...
174 
  addNotification: (notification) => addNotification(notification),
 122 
  addNotification: (notification) => addNotification(notification)