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 DateTimeInput from "../../../../../shared/datetime-input/DateTimeInput";
8 
import FormErrorFeedback from "../../../../../shared/form-error-feedback/FormErrorFeedback";
9 
import Spinner from "../../../../../shared/loading-spinner/Spinner";
10 
 
11 
const StyledSpinnerContainer = styled.div`
12 
  position: absolute;
13 
  left: 0;
14 
  top: 0;
15 
  width: 100%;
16 
  height: 100%;
17 
  background: rgba(255, 255, 255, 0.4);
18 
  display: flex;
19 
  justify-content: center;
20 
  align-items: center;
21 
  z-index: 300;
22 
`;
23 
 
24 
const FoundationYear = (props) => {
25 
  // props destructuring
26 
  const { companyId, foundationYear, addNotification } = props;
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 [settedYear, setSettedYear] = useState(foundationYear);
42 
 
43 
  useEffect(() => {
44 
    register("foundation_year", {
45 
      required: "Por favor seleccione el año de fundación",
46 
    });
47 
  }, []);
48 
 
49 
  const handleModalOpen = (event) => {
50 
    event && event.preventDefault();
51 
    setIsModalOpen(!isModalOpen);
52 
  };
53 
 
54 
  const onSubmitHandler = async (data) => {
55 
    setLoading(true);
56 
    const formData = new FormData();
57 
    Object.entries(data).map(([key, value]) => {
58 
      formData.append(key, value);
59 
    });
60 
    await axios
61 
      .post(`/my-company/${companyId}/profile/foundation_year`, formData)
62 
      .then((response) => {
63 
        const resData = response.data;
64 
         (resData);
65 
        if (resData.success) {
66 
          setSettedYear(`${resData.data}`);
67 
          handleModalOpen();
68 
        } else {
69 
          const resError = resData.data;
70 
          if (resError.constructor.name === "Object") {
71 
            Object.entries(resError).map(([key, value]) => {
72 
              if (key in getValues()) {
73 
                setError(key, {
74 
                  type: "manual",
75 
                  message: Array.isArray(value) ? value[0] : value,
76 
                });
77 
              }
78 
            });
79 
          } else {
80 
            addNotification({
81 
              style: "danger",
82 
              msg: resError,
83 
            });
84 
          }
85 
        }
86 
      });
87 
    setLoading(false);
88 
  };
89 
 
90 
  const handleDateChange = (date) => {
91 
    clearErrors("foundation_year");
92 
    setValue("foundation_year", date);
93 
  };
94 
 
95 
  return (
96 
    <React.Fragment>
97 
      <div className="user-profile-ov">
98 
        <h3>
99 
          Año de fundación
100 
          <a
101 
            href="#"
102 
            title=""
103 
            className="btn-foundation-year-edit"
104 
            onClick={(e) => {
105 
              e.preventDefault();
106 
              handleModalOpen();
107 
            }}
108 
          >
109 
            <i className="fa fa-pencil"></i>
110 
          </a>
111 
        </h3>
112 
        <span id="overview-foundation-year">{settedYear}</span>
113 
      </div>
114 
 
115 
      {/* modal */}
116 
      <Modal
117 
        show={isModalOpen}
118 
        onHide={handleModalOpen}
119 
        style={{ overflowY: "scroll" }}
120 
      >
121 
        <Modal.Header closeButton>
122 
          <Modal.Title>Industria</Modal.Title>
123 
        </Modal.Header>
124 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
125 
          <Modal.Body>
126 
            <DateTimeInput
127 
              dateFormat="YYYY"
128 
              viewMode="years"
129 
              onChange={handleDateChange}
130 
              isValidDate={(currentDate) => {
131 
                return currentDate.isBefore(new Date());
132 
              }}
133 
              settedDate={settedYear}
134 
            />
135 
            {errors.foundation_year && (
136 
              <FormErrorFeedback>
137 
                {errors.foundation_year.message}
138 
              </FormErrorFeedback>
139 
            )}
140 
          </Modal.Body>
141 
          <Modal.Footer>
142 
            <Button type="submit">Enviar</Button>
143 
            <Button variant="danger" onClick={handleModalOpen}>
144 
              Cancel
145 
            </Button>
146 
          </Modal.Footer>
147 
        </form>
148 
        {loading && (
149 
          <StyledSpinnerContainer>
150 
            <Spinner />
151 
          </StyledSpinnerContainer>
152 
        )}
153 
      </Modal>
154 
    </React.Fragment>
155 
  );
156 
};
157 
 
158 
export default FoundationYear;