Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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