Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from "react";
2 
import { useState, useEffect } from "react";
3 
import { Button, Modal } from "react-bootstrap";
4 
import { useForm } from "react-hook-form";
5 
import styled from "styled-components";
6 
import {axios} from "../../../../../utils";
7 
import FormErrorFeedback from "../../../../../shared/form-error-feedback/FormErrorFeedback";
8 
import Spinner from "../../../../../shared/loading-spinner/Spinner";
9 
 
10 
const StyledSpinnerContainer = styled.div`
11 
  position: absolute;
12 
  left: 0;
13 
  top: 0;
14 
  width: 100%;
15 
  height: 100%;
16 
  background: rgba(255, 255, 255, 0.4);
17 
  display: flex;
18 
  justify-content: center;
19 
  align-items: center;
20 
  z-index: 300;
21 
`;
22 
 
23 
const CompanySize = (props) => {
24 
  // props destructuring
25 
  const { companyId, companySize, companySizes, addNotification } = props;
26 
 
27 
  // React hook form
28 
  const {
29 
    register,
30 
    errors,
31 
    handleSubmit,
32 
    setValue,
33 
    clearErrors,
34 
    getValues,
35 
    setError,
36 
  } = useForm();
37 
 
38 
  // states
39 
  const [isModalOpen, setIsModalOpen] = useState(false);
40 
  const [loading, setLoading] = useState(false);
41 
  const [settedCompanySize, setSettedCompanySize] = useState(companySize);
42 
 
43 
  useEffect(async () => {
44 
    if (isModalOpen === true) {
45 
      setLoading(true);
46 
      await axios
47 
        .get(`/my-company/${companyId}/profile/company-size`)
48 
        .then((response) => {
49 
          const resData = response.data;
50 
           (resData);
51 
          if (resData.success) {
52 
            if (resData.data.company_size_id >= 0)
53 
              setValue("company_size_id", resData.data.company_size_id);
54 
          }
55 
        });
56 
      setLoading(false);
57 
    }
58 
  }, [isModalOpen]);
59 
 
60 
  const handleModalOpen = (event) => {
61 
    event && event.preventDefault();
62 
    setIsModalOpen(!isModalOpen);
63 
  };
64 
 
65 
  const onSubmitHandler = async (data) => {
66 
    // profile/my-profiles/extended', [ 'id' => $user_profile_id_encrypted]
67 
    // https://leaderslinked.com/profile/my-profiles/extended/MzU4NDg3ODcg
68 
    setLoading(true);
69 
    const formData = new FormData();
70 
    Object.entries(data).map(([key, value]) => {
71 
      formData.append(key, value);
72 
    });
73 
    await axios
74 
      .post(`/my-company/${companyId}/profile/company-size`, formData)
75 
      .then((response) => {
76 
        const resData = response.data;
77 
         (resData);
78 
        if (resData.success) {
79 
          setSettedCompanySize(resData.data);
80 
          handleModalOpen();
81 
        } else {
82 
          const resError = resData.data;
83 
          if (resError.constructor.name === "Object") {
84 
            Object.entries(resError).map(([key, value]) => {
85 
              if (key in getValues()) {
86 
                setError(key, {
87 
                  type: "manual",
88 
                  message: Array.isArray(value) ? value[0] : value,
89 
                });
90 
              }
91 
            });
92 
          } else {
93 
            addNotification({
94 
              style: "danger",
95 
              msg: resError,
96 
            });
97 
          }
98 
        }
99 
      });
100 
    setLoading(false);
101 
  };
102 
 
103 
  return (
104 
    <React.Fragment>
105 
      <div className="user-profile-ov">
106 
        <h3>
107 
          Tamaño de la empresa
108 
          <a
109 
            href="#"
110 
            title=""
111 
            className="btn-company-size-edit"
112 
            onClick={(e) => {
113 
              e.preventDefault();
114 
              handleModalOpen();
115 
            }}
116 
          >
117 
            <i className="fa fa-pencil"></i>
118 
          </a>
119 
        </h3>
120 
        <span id="overview-company-size">{settedCompanySize}</span>
121 
      </div>
122 
 
123 
      {/* modal */}
124 
      <Modal
125 
        show={isModalOpen}
126 
        onHide={handleModalOpen}
127 
        style={{ overflowY: "scroll" }}
128 
      >
129 
        <Modal.Header closeButton>
130 
          <Modal.Title>Tamaño de la empresa</Modal.Title>
131 
        </Modal.Header>
132 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
133 
          <Modal.Body>
134 
            <select
135 
              name="company_size_id"
136 
              id="company_size_id"
137 
              ref={register({
138 
                required: "Por favor eliga el tamaño de la empresa",
139 
              })}
140 
            >
141 
              <option value="" hidden>
142 
                Tamaño de la empresa
143 
              </option>
144 
              {Object.entries(companySizes).map(([key, value]) => (
145 
                <option value={key} key={key}>
146 
                  {value}
147 
                </option>
148 
              ))}
149 
            </select>
150 
            {errors.company_size_id && (
151 
              <FormErrorFeedback>
152 
                {errors.company_size_id.message}
153 
              </FormErrorFeedback>
154 
            )}
155 
          </Modal.Body>
156 
          <Modal.Footer>
157 
            <Button type="submit">Enviar</Button>
158 
            <Button variant="danger" onClick={handleModalOpen}>
159 
              Cancel
160 
            </Button>
161 
          </Modal.Footer>
162 
        </form>
163 
        {loading && (
164 
          <StyledSpinnerContainer>
165 
            <Spinner />
166 
          </StyledSpinnerContainer>
167 
        )}
168 
      </Modal>
169 
    </React.Fragment>
170 
  );
171 
};
172 
 
173 
export default CompanySize;