Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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