Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
6899 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 
import { useDispatch, useSelector } from 'react-redux'
7 
import EditIcon from '@mui/icons-material/EditOutlined'
8 
import IconButton from '@mui/material/IconButton'
9 
 
10 
import Spinner from '../../UI/Spinner'
11 
import FormErrorFeedback from '../../UI/FormErrorFeedback'
12 
 
13 
const Privacy = ({
14 
  groupId = '',
15 
  privacies = [],
16 
  privacy: defaultValue = '',
17 
  onChange = () => null,
18 
}) => {
19 
  const [privacy, setPrivacy] = useState('')
20 
  const [privacyKey, setPrivacyKey] = useState('')
21 
  const [isModalOpen, setIsModalOpen] = useState(false)
22 
  const [loading, setLoading] = useState(false)
23 
  const labels = useSelector(({ intl }) => intl.labels)
24 
  const dispatch = useDispatch()
25 
 
26 
  const { register, errors, handleSubmit, getValues, setError } = useForm()
27 
 
28 
  const handleModalOpen = () => {
29 
    setIsModalOpen(!isModalOpen)
30 
  }
31 
 
32 
  const onSubmitHandler = async (data) => {
33 
    setLoading(true)
34 
    const formData = new FormData()
35 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
36 
 
37 
    await axios
38 
      .post(`/group/my-groups/privacy/${groupId}`, formData)
39 
      .then((response) => {
40 
        const { data, success } = response.data
41 
 
6902 stevensc 42 
        if (!success) {
6899 stevensc 43 
          const resError = data
44 
 
45 
          if (resError.constructor.name !== 'Object') {
46 
            dispatch(addNotification({ style: 'danger', msg: resError }))
47 
            return
48 
          }
49 
 
50 
          Object.entries(resError).map(([key, value]) => {
51 
            if (key in getValues()) {
52 
              setError(key, {
53 
                type: 'manual',
54 
                message: Array.isArray(value) ? value[0] : value,
55 
              })
56 
            }
57 
          })
58 
 
59 
          return
60 
        }
61 
 
62 
        onChange(data)
63 
        handleModalOpen()
64 
      })
65 
    setLoading(false)
66 
  }
67 
 
68 
  useEffect(() => {
69 
    axios.get(`/group/my-groups/privacy/${groupId}`).then((response) => {
70 
      const { data, success } = response.data
71 
      if (!success) {
72 
        return
73 
      }
74 
 
75 
      setPrivacyKey(data)
76 
    })
77 
  }, [privacy])
78 
 
79 
  useEffect(() => {
80 
    setPrivacy(defaultValue)
81 
  }, [defaultValue])
82 
 
83 
  return (
84 
    <>
85 
      <div className="experience__user-card">
86 
        <div className="card__options-container">
87 
          <h4>Privacidad</h4>
88 
          <IconButton onClick={handleModalOpen}>
89 
            <EditIcon />
90 
          </IconButton>
91 
        </div>
92 
        <p>{privacy}</p>
93 
      </div>
94 
 
95 
      <Modal show={isModalOpen} onHide={handleModalOpen}>
96 
        <Modal.Header closeButton>
97 
          <Modal.Title>Privacidad</Modal.Title>
98 
        </Modal.Header>
99 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
100 
          <Modal.Body>
101 
            <select
102 
              name="privacy"
103 
              id="privacy"
104 
              defaultValue={privacyKey}
105 
              ref={register({
106 
                required: 'Por favor eliga una privacidad',
107 
              })}
108 
            >
109 
              <option value="" hidden>
110 
                Privacidad
111 
              </option>
6900 stevensc 112 
              {privacies &&
113 
                Object.entries(privacies).map(([key, value]) => (
114 
                  <option value={key} key={key}>
115 
                    {value}
116 
                  </option>
117 
                ))}
6899 stevensc 118 
            </select>
119 
            {errors.privacy && (
120 
              <FormErrorFeedback>{errors.privacy.message}</FormErrorFeedback>
121 
            )}
6902 stevensc 122 
            {loading && <Spinner />}
6899 stevensc 123 
          </Modal.Body>
124 
          <Modal.Footer>
125 
            <Button variant="primary" type="submit">
126 
              {labels.accept}
127 
            </Button>
128 
            <Button variant="danger" onClick={handleModalOpen}>
129 
              {labels.cancel}
130 
            </Button>
131 
          </Modal.Footer>
132 
        </form>
133 
      </Modal>
134 
    </>
135 
  )
136 
}
137 
 
138 
export default Privacy