Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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