Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2612 | 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";
2612 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 Accessibility = (props) => {
24 
  // props destructuring
2612 stevensc 25 
  const { groupId, privacy, accessibility, accessibilities, addNotification } = props;
1 www 26 
  // react hook form
27 
  const {
28 
    register,
29 
    errors,
30 
    handleSubmit,
31 
    setValue,
32 
    getValues,
33 
    setError,
34 
  } = useForm();
35 
 
36 
  // states
37 
  const [isModalOpen, setIsModalOpen] = useState(false);
38 
  const [loading, setLoading] = useState(false);
39 
  const [settedAccesibility, setSettedAccesibility] = useState(accessibility);
40 
 
41 
  const handleModalOpen = (event) => {
42 
    event && event.preventDefault();
43 
    setIsModalOpen(!isModalOpen);
44 
  };
45 
 
46 
  useEffect(() => {
3181 stevensc 47 
    axios.get(`/group/my-groups/accessibility/${groupId}`)
48 
      .then((response) => {
49 
        const resData = response.data;
50 
        if (resData.success) {
51 
          if (resData.data) setValue('accessibility', resData.data)
52 
        }
53 
      });
54 
  }, [accessibility]);
1 www 55 
 
3181 stevensc 56 
  useEffect(() => {
57 
    if (privacy === 'Privado') setValue('accessibility', 'aa')
58 
  }, [privacy]);
59 
 
1 www 60 
  const onSubmitHandler = async (data) => {
61 
    setLoading(true);
62 
    const formData = new FormData();
3181 stevensc 63 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
1 www 64 
    await axios
65 
      .post(`/group/my-groups/accessibility/${groupId}`, formData)
66 
      .then((response) => {
67 
        const resData = response.data;
2612 stevensc 68 
        (resData);
1 www 69 
        if (resData.success) {
70 
          setSettedAccesibility(resData.data);
71 
          handleModalOpen();
72 
        } else {
73 
          const resError = resData.data;
74 
          if (resError.constructor.name === "Object") {
75 
            Object.entries(resError).map(([key, value]) => {
76 
              if (key in getValues()) {
77 
                setError(key, {
78 
                  type: "manual",
79 
                  message: Array.isArray(value) ? value[0] : value,
80 
                });
81 
              }
82 
            });
83 
          } else {
84 
            addNotification({
85 
              style: "danger",
86 
              msg: resError,
87 
            });
88 
          }
89 
        }
90 
      });
91 
    setLoading(false);
92 
  };
93 
  return (
94 
    <React.Fragment>
95 
      <div className="user-profile-extended-ov">
96 
        <h3>
97 
          Accesibilidad
98 
          <a
99 
            href="#"
100 
            title=""
101 
            className="btn-accessibility-edit"
102 
            onClick={handleModalOpen}
103 
          >
104 
            <i className="fa fa-pencil"></i>
105 
          </a>
106 
        </h3>
107 
        <span id="overview-accessibility">{settedAccesibility}</span>
108 
      </div>
109 
 
110 
      {/* modal */}
111 
      <Modal
112 
        show={isModalOpen}
113 
        onHide={handleModalOpen}
114 
        style={{ overflowY: "scroll" }}
115 
      >
116 
        <Modal.Header closeButton>
1180 stevensc 117 
          <Modal.Title>Accesibilidad</Modal.Title>
1 www 118 
        </Modal.Header>
119 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
120 
          <Modal.Body>
121 
            <select
122 
              name="accessibility"
3181 stevensc 123 
              ref={register({ required: "Por favor eliga una accesibilidad", })}
1 www 124 
            >
125 
              <option value="" hidden>
126 
                Accesibilidad
127 
              </option>
2612 stevensc 128 
              {Object.entries(accessibilities).map(([key, value]) => {
129 
                if (privacy === 'Privado' && key === 'aj') {
3181 stevensc 130 
                  return
2612 stevensc 131 
                }
3181 stevensc 132 
                if (privacy === 'Privado' && key === 'rj') {
133 
                  return
134 
                }
2612 stevensc 135 
 
136 
                return (
137 
                  <option value={key} key={key}>
138 
                    {value}
139 
                  </option>
140 
                )
141 
              }
142 
              )}
1 www 143 
            </select>
144 
            {errors.accessibility && (
145 
              <FormErrorFeedback>
146 
                {errors.accessibility.message}
147 
              </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 Accessibility;