Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3432 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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