Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3182 | | Comparar con el anterior | Ultima modificación | Ver Log |

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