Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4638 stevensc 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 
import EditIcon from '@mui/icons-material/EditOutlined'
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 Accessibility = (props) => {
25 
  // props destructuring
26 
  const { groupId, privacy, accessibility, accessibilities, addNotification, setSettedAccesibility } = props;
27 
  // react hook form
28 
  const {
29 
    register,
30 
    errors,
31 
    handleSubmit,
32 
    setValue,
33 
    getValues,
34 
    setError,
35 
  } = useForm();
36 
 
37 
  // states
38 
  const [isModalOpen, setIsModalOpen] = useState(false);
39 
  const [loading, setLoading] = useState(false);
40 
 
41 
 
42 
  const handleModalOpen = (event) => {
43 
    event && event.preventDefault();
44 
    setIsModalOpen(!isModalOpen);
45 
  };
46 
 
47 
  useEffect(() => {
48 
    axios.get(`/group/my-groups/accessibility/${groupId}`)
49 
      .then((response) => {
50 
        const resData = response.data;
51 
        if (resData.success) {
52 
          if (resData.data) setValue('accessibility', resData.data)
53 
        }
54 
      });
55 
  }, []);
56 
 
57 
  const onSubmitHandler = async (data) => {
58 
    setLoading(true);
59 
    const formData = new FormData();
60 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
61 
    await axios
62 
      .post(`/group/my-groups/accessibility/${groupId}`, formData)
63 
      .then((response) => {
64 
        const resData = response.data;
65 
        (resData);
66 
        if (resData.success) {
67 
          setSettedAccesibility(resData.data);
68 
          handleModalOpen();
69 
        } else {
70 
          const resError = resData.data;
71 
          if (resError.constructor.name === "Object") {
72 
            Object.entries(resError).map(([key, value]) => {
73 
              if (key in getValues()) {
74 
                setError(key, {
75 
                  type: "manual",
76 
                  message: Array.isArray(value) ? value[0] : value,
77 
                });
78 
              }
79 
            });
80 
          } else {
81 
            addNotification({
82 
              style: "danger",
83 
              msg: resError,
84 
            });
85 
          }
86 
        }
87 
      });
88 
    setLoading(false);
89 
  };
90 
  return (
91 
    <>
92 
      <div className="experience__user-card">
93 
        <div className="card__options-container">
94 
          <h4>Accesibilidad</h4>
95 
          <button className='button-icon' onClick={handleModalOpen}>
96 
            <EditIcon />
97 
          </button>
98 
        </div>
99 
        <p>{accessibility}</p>
100 
      </div>
101 
 
102 
      {/* modal */}
103 
      <Modal
104 
        show={isModalOpen}
105 
        onHide={handleModalOpen}
106 
        style={{ overflowY: "scroll" }}
107 
      >
108 
        <Modal.Header closeButton>
109 
          <Modal.Title>Accesibilidad</Modal.Title>
110 
        </Modal.Header>
111 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
112 
          <Modal.Body>
113 
            <select
114 
              name="accessibility"
115 
              ref={register({ required: "Por favor eliga una accesibilidad", })}
116 
            >
117 
              <option value="" hidden>
118 
                Accesibilidad
119 
              </option>
120 
              {Object.entries(accessibilities).map(([key, value]) => {
121 
                if (privacy === 'Privado' && key === 'aj') {
122 
                  return
123 
                }
124 
                if (privacy === 'Privado' && key === 'rj') {
125 
                  return
126 
                }
127 
 
128 
                return (
129 
                  <option value={key} key={key}>
130 
                    {value}
131 
                  </option>
132 
                )
133 
              }
134 
              )}
135 
            </select>
136 
            {errors.accessibility && (
137 
              <FormErrorFeedback>
138 
                {errors.accessibility.message}
139 
              </FormErrorFeedback>
140 
            )}
141 
          </Modal.Body>
142 
          <Modal.Footer>
143 
            <Button type="submit">Enviar</Button>
144 
            <Button variant="danger" onClick={handleModalOpen}>
145 
              Cancelar
146 
            </Button>
147 
          </Modal.Footer>
148 
        </form>
149 
        {loading && (
150 
          <StyledSpinnerContainer>
151 
            <Spinner />
152 
          </StyledSpinnerContainer>
153 
        )}
154 
      </Modal>
155 
    </>
156 
  );
157 
};
158 
 
159 
export default Accessibility;