Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6830 stevensc 1 
import React, { useState, useEffect } from 'react'
2 
import { axios } from '../../utils'
3 
import { Modal } from 'react-bootstrap'
4 
import { addNotification } from '../../redux/notification/notification.actions'
5 
 
6 
const AddMemberModal = ({
7 
  isShow = false,
8 
  linkInvite = '',
9 
  handleClose = function () {},
10 
}) => {
11 
  const [users, setUsers] = useState([])
12 
  const [search, setSearch] = useState('')
13 
 
14 
  const handleChange = ({ target }) => setSearch(target.value)
15 
 
16 
  const searchMember = async (value) => {
17 
    try {
18 
      const { data } = await axios.get(linkInvite + '?search=' + value)
19 
      setUsers(data.data)
20 
    } catch (error) {
21 
      console.log('>>: error > ', error)
22 
    }
23 
  }
24 
 
25 
  const invite = (uuid) => {
26 
    const formData = new FormData()
27 
    formData.append('id', uuid)
28 
    axios
29 
      .post(linkInvite, formData)
30 
      .then(({ data }) => {
31 
        if (!data.success) {
32 
          return addNotification({ msg: data.data, style: 'danger' })
33 
        }
34 
        addNotification({ msg: data.data, style: 'success' })
35 
        handleClose()
36 
      })
37 
      .catch(() =>
38 
        addNotification({
39 
          msg: 'Disculpe, ha ocurrido un error',
40 
          style: 'danger',
41 
        })
42 
      )
43 
  }
44 
 
45 
  useEffect(() => {
46 
    searchMember(search)
47 
  }, [search])
48 
 
49 
  return (
50 
    <Modal show={isShow} onHide={handleClose}>
51 
      <Modal.Header closeButton>
52 
        <h3>Escribe el nombre</h3>
53 
      </Modal.Header>
54 
      <Modal.Body>
55 
        <div className="container">
56 
          <div className="mb-2">
57 
            <input
58 
              onChange={handleChange}
59 
              name="search"
60 
              placeholder="Escribe el nombre del usuario"
61 
            />
62 
          </div>
63 
          <ul className="d-flex flex-column w-100" style={{ gap: '1rem' }}>
64 
            {!!users.length &&
65 
              users.map((element, index) => (
66 
                <li key={index}>
67 
                  <div
68 
                    className="d-flex align-items-center justify-content-between flex-column flex-md-row"
69 
                    style={{ gap: '.5rem' }}
70 
                  >
71 
                    <span>{element.text}</span>
72 
                    <button
73 
                      className="btn btn-primary"
74 
                      onClick={() => invite(element.value)}
75 
                    >
76 
                      Invitar
77 
                    </button>
78 
                  </div>
79 
                </li>
80 
              ))}
81 
          </ul>
82 
        </div>
83 
      </Modal.Body>
84 
    </Modal>
85 
  )
86 
}
87 
 
88 
export default AddMemberModal