Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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