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 
const Category = (props) => {
23 
  // props destructuring
24 
  const {
25 
    companyId,
26 
    jobId,
27 
    addNotification,
28 
    jobCategory,
29 
    jobCategories,
30 
  } = props;
31 
 
32 
  // react hook form
33 
  const {
34 
    register,
35 
    errors,
36 
    handleSubmit,
37 
    setValue,
38 
    clearErrors,
39 
    getValues,
40 
    setError,
41 
  } = useForm();
42 
 
43 
  // states
44 
  const [isModalOpen, setIsModalOpen] = useState(false);
45 
  const [loading, setLoading] = useState(false);
46 
  const [settedCategory, setSettedCategory] = useState(jobCategory);
47 
  const [settedCategoryKey, setSettedCategoryKey] = useState("");
48 
 
49 
  useEffect(() => {
50 
    axios
51 
      .get(`/my-company/${companyId}/job/edit/${jobId}/job-category`)
52 
      .then((response) => {
53 
        const resData = response.data;
54 
        if (resData.success) {
55 
          setSettedCategoryKey(resData.data);
56 
        }
57 
      });
58 
  }, [settedCategory]);
59 
 
60 
  const handleModalOpen = (event) => {
61 
    event && event.preventDefault();
62 
    setIsModalOpen(!isModalOpen);
63 
  };
64 
 
65 
  const onSubmitHandler = async (data) => {
66 
    setLoading(true);
67 
    const formData = new FormData();
68 
    Object.entries(data).map(([key, value]) => {
69 
      formData.append(key, value);
70 
    });
71 
    await axios
72 
      .post(`/my-company/${companyId}/job/edit/${jobId}/job-category`, formData)
73 
      .then((response) => {
74 
        const resData = response.data;
75 
        if (resData.success) {
76 
          setSettedCategory(resData.data);
77 
          handleModalOpen();
78 
        } else {
79 
          const resError = resData.data;
80 
          if (resError.constructor.name === "Object") {
81 
            Object.entries(resError).map(([key, value]) => {
82 
              if (key in getValues()) {
83 
                setError(key, {
84 
                  type: "manual",
85 
                  message: Array.isArray(value) ? value[0] : value,
86 
                });
87 
              }
88 
            });
89 
          } else {
90 
            addNotification({
91 
              style: "danger",
92 
              msg: resError,
93 
            });
94 
          }
95 
        }
96 
      });
97 
    setLoading(false);
98 
  };
99 
  return (
100 
    <React.Fragment>
101 
      <div className="user-profile-ov">
102 
        <h3>
103 
          Categoría
104 
          <a
105 
            href="#"
106 
            title=""
107 
            className="btn-job-category-edit"
108 
            onClick={(e) => {
109 
              e.preventDefault();
110 
              handleModalOpen();
111 
            }}
112 
          >
113 
            <i className="fa fa-pencil"></i>
114 
          </a>
115 
        </h3>
116 
        <span id="overview-job-category">{settedCategory}</span>
117 
      </div>
118 
 
119 
      {/* modal */}
120 
      <Modal
121 
        show={isModalOpen}
122 
        onHide={handleModalOpen}
123 
        style={{ overflowY: "scroll" }}
124 
      >
125 
        <Modal.Header closeButton>
126 
          <Modal.Title>Categoría</Modal.Title>
127 
        </Modal.Header>
128 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
129 
          <Modal.Body>
130 
            <select
131 
              name="job_category_id"
132 
              id="job_category_id"
133 
              defaultValue={settedCategoryKey ? settedCategoryKey : ""}
134 
              ref={register({
135 
                required: "Por favor eliga una categoría",
136 
              })}
137 
            >
138 
              <option value="" hidden>
139 
                Categoría
140 
              </option>
141 
              {Object.entries(jobCategories).map(([key, value]) => (
142 
                <option value={key} key={key}>
143 
                  {value}
144 
                </option>
145 
              ))}
146 
            </select>
147 
            {errors.job_category_id && (
148 
              <FormErrorFeedback>
149 
                {errors.job_category_id.message}
150 
              </FormErrorFeedback>
151 
            )}
152 
          </Modal.Body>
153 
          <Modal.Footer>
154 
            <Button type="submit">Enviar</Button>
155 
            <Button variant="danger" onClick={handleModalOpen}>
156 
              Cancel
157 
            </Button>
158 
          </Modal.Footer>
159 
        </form>
160 
        {loading && (
161 
          <StyledSpinnerContainer>
162 
            <Spinner />
163 
          </StyledSpinnerContainer>
164 
        )}
165 
      </Modal>
166 
    </React.Fragment>
167 
  );
168 
};
169 
 
170 
export default Category;