Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7263 | | 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;
7264 stevensc 25 
    margin-top: 1rem;
7263 stevensc 26 
  }
27 
`
28 
 
7262 stevensc 29 
const ContactTemplate = styled.div`
30 
  display: flex;
31 
  align-items: center;
7264 stevensc 32 
  justify-content: space-between;
7262 stevensc 33 
  gap: 0.5rem;
7264 stevensc 34 
  .info {
35 
    display: flex;
36 
    align-items: center;
37 
    gap: 0.5rem;
38 
  }
7262 stevensc 39 
  h3 {
40 
    font-size: 1rem;
41 
    color: var(--subtitle-color);
7264 stevensc 42 
    font-weight: 600;
7262 stevensc 43 
  }
44 
`
45 
 
46 
const AddMember = ({ group, changeTab }) => {
7260 stevensc 47 
  const { url_add_user_to_group, url_get_contacts_availables_for_group } = group
48 
  const [contacts, setContacts] = useState([])
49 
  const [loading, setLoading] = useState(false)
50 
  const dispatch = useDispatch()
51 
 
52 
  const getContacts = async () => {
53 
    setLoading(true)
54 
    axios
55 
      .get(url_get_contacts_availables_for_group)
56 
      .then(({ data: response }) => {
57 
        const { data, success } = response
58 
        if (!success) {
59 
          typeof data === 'string'
60 
            ? dispatch(addNotification({ style: 'danger', msg: data }))
61 
            : dispatch(
62 
                addNotification({
63 
                  style: 'danger',
64 
                  msg: 'Ha ocurrioo un error',
65 
                })
66 
              )
67 
          return
68 
        }
69 
 
70 
        setContacts(data)
71 
        setLoading(false)
72 
      })
73 
      .catch((err) => {
74 
        console.log(err)
75 
        throw new Error(err)
76 
      })
77 
      .finally(() => setLoading(false))
78 
  }
79 
 
80 
  const handleAddMember = async (id) => {
81 
    setLoading(true)
82 
    const formData = new FormData()
83 
    formData.append('uid', id)
84 
 
85 
    axios
86 
      .post(url_add_user_to_group, formData)
87 
      .then(async ({ data: response }) => {
88 
        const { data, success } = response
89 
        if (!success) {
90 
          typeof data === 'string'
91 
            ? dispatch(addNotification({ style: 'danger', msg: data }))
92 
            : dispatch(
93 
                addNotification({
94 
                  style: 'danger',
95 
                  msg: 'Ha ocurrioo un error',
96 
                })
97 
              )
98 
          return
99 
        }
100 
 
101 
        await getContacts()
102 
        setLoading(false)
103 
      })
104 
      .catch((err) => {
105 
        console.log(err)
106 
        throw new Error(err)
107 
      })
108 
      .finally(() => setLoading(false))
109 
  }
110 
 
111 
  useEffect(() => {
112 
    getContacts()
113 
  }, [])
114 
 
115 
  return (
7263 stevensc 116 
    <ContactContainer>
7262 stevensc 117 
      <IconButton onClick={() => changeTab('DEFAULT')}>
7263 stevensc 118 
        <ArrowBackIosIcon />
7262 stevensc 119 
      </IconButton>
120 
 
7260 stevensc 121 
      <ul>
122 
        {contacts.map((member) => (
123 
          <li key={member.id}>
124 
            <AddMember.Item
125 
              {...member}
126 
              onClick={() => handleAddMember(member.id)}
127 
            />
128 
          </li>
129 
        ))}
130 
      </ul>
131 
      {loading && (
132 
        <LoaderContainer>
133 
          <Spinner />
134 
        </LoaderContainer>
135 
      )}
7263 stevensc 136 
    </ContactContainer>
7260 stevensc 137 
  )
138 
}
139 
 
140 
const Item = ({ image, name, onClick }) => {
141 
  return (
7262 stevensc 142 
    <ContactTemplate>
7264 stevensc 143 
      <div className="info">
144 
        <Avatar src={image} alt={`user_${name}-image`} />
145 
        <h3>{name}</h3>
146 
      </div>
7260 stevensc 147 
      <IconButton onClick={onClick}>
148 
        <AddRounded />
149 
      </IconButton>
7262 stevensc 150 
    </ContactTemplate>
7260 stevensc 151 
  )
152 
}
153 
 
154 
AddMember.Item = Item
155 
 
156 
export default AddMember