Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 146 | Rev 654 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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