Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7260 | Rev 7263 | Ir a la última revisión | | Comparar con el anterior | 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'
7262 stevensc 7 
import { styled } from 'styled-components'
7260 stevensc 8 
 
9 
import Spinner from '../UI/Spinner'
10 
import LoaderContainer from '../UI/LoaderContainer'
7262 stevensc 11 
import WidgetLayout from '../widgets/WidgetLayout'
12 
import { Avatar } from '@mui/material'
7260 stevensc 13 
 
7262 stevensc 14 
const ContactTemplate = styled.div`
15 
  display: flex;
16 
  align-items: center;
17 
  gap: 0.5rem;
18 
  h3 {
19 
    font-size: 1rem;
20 
    color: var(--subtitle-color);
21 
  }
22 
`
23 
 
24 
const AddMember = ({ group, changeTab }) => {
7260 stevensc 25 
  const { url_add_user_to_group, url_get_contacts_availables_for_group } = group
26 
  const [contacts, setContacts] = useState([])
27 
  const [loading, setLoading] = useState(false)
28 
  const dispatch = useDispatch()
29 
 
30 
  const getContacts = async () => {
31 
    setLoading(true)
32 
    axios
33 
      .get(url_get_contacts_availables_for_group)
34 
      .then(({ data: response }) => {
35 
        const { data, success } = response
36 
        if (!success) {
37 
          typeof data === 'string'
38 
            ? dispatch(addNotification({ style: 'danger', msg: data }))
39 
            : dispatch(
40 
                addNotification({
41 
                  style: 'danger',
42 
                  msg: 'Ha ocurrioo un error',
43 
                })
44 
              )
45 
          return
46 
        }
47 
 
48 
        setContacts(data)
49 
        setLoading(false)
50 
      })
51 
      .catch((err) => {
52 
        console.log(err)
53 
        throw new Error(err)
54 
      })
55 
      .finally(() => setLoading(false))
56 
  }
57 
 
58 
  const handleAddMember = async (id) => {
59 
    setLoading(true)
60 
    const formData = new FormData()
61 
    formData.append('uid', id)
62 
 
63 
    axios
64 
      .post(url_add_user_to_group, formData)
65 
      .then(async ({ data: response }) => {
66 
        const { data, success } = response
67 
        if (!success) {
68 
          typeof data === 'string'
69 
            ? dispatch(addNotification({ style: 'danger', msg: data }))
70 
            : dispatch(
71 
                addNotification({
72 
                  style: 'danger',
73 
                  msg: 'Ha ocurrioo un error',
74 
                })
75 
              )
76 
          return
77 
        }
78 
 
79 
        await getContacts()
80 
        setLoading(false)
81 
      })
82 
      .catch((err) => {
83 
        console.log(err)
84 
        throw new Error(err)
85 
      })
86 
      .finally(() => setLoading(false))
87 
  }
88 
 
89 
  useEffect(() => {
90 
    getContacts()
91 
  }, [])
92 
 
93 
  return (
7262 stevensc 94 
    <WidgetLayout>
95 
      <IconButton onClick={() => changeTab('DEFAULT')}>
96 
        <AddRounded />
97 
      </IconButton>
98 
 
7260 stevensc 99 
      <ul>
100 
        {contacts.map((member) => (
101 
          <li key={member.id}>
102 
            <AddMember.Item
103 
              {...member}
104 
              onClick={() => handleAddMember(member.id)}
105 
            />
106 
          </li>
107 
        ))}
108 
      </ul>
109 
      {loading && (
110 
        <LoaderContainer>
111 
          <Spinner />
112 
        </LoaderContainer>
113 
      )}
7262 stevensc 114 
    </WidgetLayout>
7260 stevensc 115 
  )
116 
}
117 
 
118 
const Item = ({ image, name, onClick }) => {
119 
  return (
7262 stevensc 120 
    <ContactTemplate>
121 
      <Avatar src={image} alt={`user_${name}-image`} />
122 
      <h3>{name}</h3>
7260 stevensc 123 
      <IconButton onClick={onClick}>
124 
        <AddRounded />
125 
      </IconButton>
7262 stevensc 126 
    </ContactTemplate>
7260 stevensc 127 
  )
128 
}
129 
 
130 
AddMember.Item = Item
131 
 
132 
export default AddMember