Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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