Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3182 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3182 Rev 5099
Línea 1... Línea -...
1 
import React from "react";
 - 
 
2 
import { useState, useEffect } from "react";
 1 
import React, { useState, useEffect } from 'react'
- 
 
 2 
 
3 
import { Button, Modal } from "react-bootstrap";
 3 
import { Button, Modal } from 'react-bootstrap'
4 
import { useForm } from "react-hook-form";
 4 
import { useForm } from 'react-hook-form'
5 
import styled from "styled-components";
 5 
import styled from 'styled-components'
6 
import { axios } from "../../../../../utils";
 6 
import { axios } from '../../../../../utils'
7 
import FormErrorFeedback from "../../../../../shared/form-error-feedback/FormErrorFeedback";
 7 
import FormErrorFeedback from '../../../../../shared/form-error-feedback/FormErrorFeedback'
8 
import Spinner from "../../../../../shared/loading-spinner/Spinner";
 8 
import Spinner from '../../../../../shared/loading-spinner/Spinner'
Línea 9... Línea 9...
9 
 
 9 
 
10 
const StyledSpinnerContainer = styled.div`
 10 
const StyledSpinnerContainer = styled.div`
11 
  position: absolute;
 11 
  position: absolute;
12 
  left: 0;
 12 
  left: 0;
Línea 16... Línea 16...
16 
  background: rgba(255, 255, 255, 0.4);
 16 
  background: rgba(255, 255, 255, 0.4);
17 
  display: flex;
 17 
  display: flex;
18 
  justify-content: center;
 18 
  justify-content: center;
19 
  align-items: center;
 19 
  align-items: center;
20 
  z-index: 300;
 20 
  z-index: 300;
21 
`;
 21 
`
Línea 22... Línea 22...
22 
 
 22 
 
23 
const Accessibility = (props) => {
 23 
const Accessibility = (props) => {
24 
  // props destructuring
 24 
  // props destructuring
25 
  const { groupId, privacy, accessibility, accessibilities, addNotification, setSettedAccesibility } = props;
 25 
  const { groupId, privacy, accessibility, accessibilities, addNotification, setSettedAccesibility } = props
26 
  // react hook form
 26 
  // react hook form
27 
  const {
 27 
  const {
28 
    register,
 28 
    register,
29 
    errors,
 29 
    errors,
30 
    handleSubmit,
 30 
    handleSubmit,
31 
    setValue,
 31 
    setValue,
32 
    getValues,
 32 
    getValues,
33 
    setError,
 33 
    setError
Línea 34... Línea 34...
34 
  } = useForm();
 34 
  } = useForm()
35 
 
 35 
 
36 
  // states
 36 
  // states
37 
  const [isModalOpen, setIsModalOpen] = useState(false);
 - 
 
Línea 38... Línea 37...
38 
  const [loading, setLoading] = useState(false);
 37 
  const [isModalOpen, setIsModalOpen] = useState(false)
39 
 
 38 
  const [loading, setLoading] = useState(false)
40 
 
 39 
 
41 
  const handleModalOpen = (event) => {
 40 
  const handleModalOpen = (event) => {
Línea 42... Línea 41...
42 
    event && event.preventDefault();
 41 
    event && event.preventDefault()
43 
    setIsModalOpen(!isModalOpen);
 42 
    setIsModalOpen(!isModalOpen)
44 
  };
 43 
  }
45 
 
 44 
 
46 
  useEffect(() => {
 45 
  useEffect(() => {
47 
    axios.get(`/group/my-groups/accessibility/${groupId}`)
 46 
    axios.get(`/group/my-groups/accessibility/${groupId}`)
48 
      .then((response) => {
 47 
      .then((response) => {
49 
        const resData = response.data;
 48 
        const resData = response.data
50 
        if (resData.success) {
 49 
        if (resData.success) {
Línea 51... Línea 50...
51 
          if (resData.data) setValue('accessibility', resData.data)
 50 
          if (resData.data) setValue('accessibility', resData.data)
52 
        }
 51 
        }
53 
      });
 52 
      })
54 
  }, []);
 53 
  }, [])
55 
 
 54 
 
56 
  const onSubmitHandler = async (data) => {
 55 
  const onSubmitHandler = async (data) => {
57 
    setLoading(true);
 56 
    setLoading(true)
58 
    const formData = new FormData();
 57 
    const formData = new FormData()
59 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
 58 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
60 
    await axios
 59 
    await axios
61 
      .post(`/group/my-groups/accessibility/${groupId}`, formData)
 60 
      .post(`/group/my-groups/accessibility/${groupId}`, formData)
62 
      .then((response) => {
 61 
      .then((response) => {
63 
        const resData = response.data;
 62 
        const resData = response.data;
64 
        (resData);
 63 
        (resData)
65 
        if (resData.success) {
 64 
        if (resData.success) {
66 
          setSettedAccesibility(resData.data);
 65 
          setSettedAccesibility(resData.data)
67 
          handleModalOpen();
 66 
          handleModalOpen()
68 
        } else {
 67 
        } else {
69 
          const resError = resData.data;
 68 
          const resError = resData.data
70 
          if (resError.constructor.name === "Object") {
 69 
          if (resError.constructor.name === 'Object') {
71 
            Object.entries(resError).map(([key, value]) => {
 70 
            Object.entries(resError).map(([key, value]) => {
72 
              if (key in getValues()) {
 71 
              if (key in getValues()) {
73 
                setError(key, {
 72 
                setError(key, {
74 
                  type: "manual",
 73 
                  type: 'manual',
75 
                  message: Array.isArray(value) ? value[0] : value,
 74 
                  message: Array.isArray(value) ? value[0] : value
76 
                });
 75 
                })
77 
              }
 76 
              }
78 
            });
 77 
            })
79 
          } else {
 78 
          } else {
80 
            addNotification({
 79 
            addNotification({
81 
              style: "danger",
 80 
              style: 'danger',
82 
              msg: resError,
 81 
              msg: resError
83 
            });
 82 
            })
84 
          }
 83 
          }
85 
        }
 84 
        }
86 
      });
 85 
      })
87 
    setLoading(false);
 86 
    setLoading(false)
88 
  };
 87 
  }
Línea 105... Línea 104...
105 
 
 104 
 
106 
      {/* modal */}
 105 
      {/* modal */}
107 
      <Modal
 106 
      <Modal
108 
        show={isModalOpen}
 107 
        show={isModalOpen}
109 
        onHide={handleModalOpen}
 108 
        onHide={handleModalOpen}
110 
        style={{ overflowY: "scroll" }}
 109 
        style={{ overflowY: 'scroll' }}
111 
      >
 110 
      >
112 
        <Modal.Header closeButton>
 111 
        <Modal.Header closeButton>
113 
          <Modal.Title>Accesibilidad</Modal.Title>
 112 
          <Modal.Title>Accesibilidad</Modal.Title>
114 
        </Modal.Header>
 113 
        </Modal.Header>
115 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
 114 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
116 
          <Modal.Body>
 115 
          <Modal.Body>
117 
            <select
 116 
            <select
118 
              name="accessibility"
 117 
              name="accessibility"
119 
              ref={register({ required: "Por favor eliga una accesibilidad", })}
 118 
              ref={register({ required: 'Por favor eliga una accesibilidad' })}
120 
            >
 119 
            >
121 
              <option value="" hidden>
 120 
              <option value="" hidden>
122 
                Accesibilidad
 121 
                Accesibilidad
123 
              </option>
 122 
              </option>
124 
              {Object.entries(accessibilities).map(([key, value]) => {
 123 
              {Object.entries(accessibilities).map(([key, value]) => {
125 
                if (privacy === 'Privado' && key === 'aj') {
 124 
                if (privacy === 'Privado' && key === 'aj') {
126 
                  return
 - 
 
127 
                }
 - 
 
128 
                if (privacy === 'Privado' && key === 'rj') {
 - 
 
129 
                  return
 125 
                  return null
Línea 130... Línea 126...
130 
                }
 126 
                }
131 
 
 127 
 
132 
                return (
 128 
                return (
Línea 155... Línea 151...
155 
            <Spinner />
 151 
            <Spinner />
156 
          </StyledSpinnerContainer>
 152 
          </StyledSpinnerContainer>
157 
        )}
 153 
        )}
158 
      </Modal>
 154 
      </Modal>
159 
    </React.Fragment>
 155 
    </React.Fragment>
160 
  );
 156 
  )
161 
};
 157 
}
Línea 162... Línea 158...
162 
 
 158