Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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