Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7262 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
7260 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from '../../utils'
3 
import { useDispatch } from 'react-redux'
4 
import { addNotification } from '../../redux/notification/notification.actions'
5 
import IconButton from '@mui/material/IconButton'
6 
import AddRounded from '@mui/icons-material/AddRounded'
7 
 
8 
import Spinner from '../UI/Spinner'
9 
import LoaderContainer from '../UI/LoaderContainer'
10 
 
11 
const AddMember = ({ group }) => {
12 
  const { url_add_user_to_group, url_get_contacts_availables_for_group } = group
13 
  const [contacts, setContacts] = useState([])
14 
  const [loading, setLoading] = useState(false)
15 
  const dispatch = useDispatch()
16 
 
17 
  const getContacts = async () => {
18 
    setLoading(true)
19 
    axios
20 
      .get(url_get_contacts_availables_for_group)
21 
      .then(({ data: response }) => {
22 
        const { data, success } = response
23 
        if (!success) {
24 
          typeof data === 'string'
25 
            ? dispatch(addNotification({ style: 'danger', msg: data }))
26 
            : dispatch(
27 
                addNotification({
28 
                  style: 'danger',
29 
                  msg: 'Ha ocurrioo un error',
30 
                })
31 
              )
32 
          return
33 
        }
34 
 
35 
        setContacts(data)
36 
        setLoading(false)
37 
      })
38 
      .catch((err) => {
39 
        console.log(err)
40 
        throw new Error(err)
41 
      })
42 
      .finally(() => setLoading(false))
43 
  }
44 
 
45 
  const handleAddMember = async (id) => {
46 
    setLoading(true)
47 
    const formData = new FormData()
48 
    formData.append('uid', id)
49 
 
50 
    axios
51 
      .post(url_add_user_to_group, formData)
52 
      .then(async ({ data: response }) => {
53 
        const { data, success } = response
54 
        if (!success) {
55 
          typeof data === 'string'
56 
            ? dispatch(addNotification({ style: 'danger', msg: data }))
57 
            : dispatch(
58 
                addNotification({
59 
                  style: 'danger',
60 
                  msg: 'Ha ocurrioo un error',
61 
                })
62 
              )
63 
          return
64 
        }
65 
 
66 
        await getContacts()
67 
        setLoading(false)
68 
      })
69 
      .catch((err) => {
70 
        console.log(err)
71 
        throw new Error(err)
72 
      })
73 
      .finally(() => setLoading(false))
74 
  }
75 
 
76 
  useEffect(() => {
77 
    getContacts()
78 
  }, [])
79 
 
80 
  return (
81 
    <div className="add-member">
82 
      <ul>
83 
        {contacts.map((member) => (
84 
          <li key={member.id}>
85 
            <AddMember.Item
86 
              {...member}
87 
              onClick={() => handleAddMember(member.id)}
88 
            />
89 
          </li>
90 
        ))}
91 
      </ul>
92 
      {loading && (
93 
        <LoaderContainer>
94 
          <Spinner />
95 
        </LoaderContainer>
96 
      )}
97 
    </div>
98 
  )
99 
}
100 
 
101 
const Item = ({ image, name, onClick }) => {
102 
  return (
103 
    <div className="entity">
104 
      <img src={image} alt={`user_${name}-image`} />
105 
      <span>{name}</span>
106 
      <IconButton onClick={onClick}>
107 
        <AddRounded />
108 
      </IconButton>
109 
    </div>
110 
  )
111 
}
112 
 
113 
AddMember.Item = Item
114 
 
115 
export default AddMember