Proyectos de Subversion LeadersLinked - SPA

Rev

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

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