Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 5 | Rev 1929 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1456 stevensc 1 
import React, { useState } from 'react'
5 stevensc 2 
import { useDispatch } from 'react-redux'
1456 stevensc 3 
import {
4 
  Avatar,
5 
  List,
6 
  ListItem,
7 
  ListItemAvatar,
8 
  ListItemButton,
9 
  ListItemText
10 
} from '@mui/material'
11 
 
12 
import { axios, debounce } from 'utils/index'
5 stevensc 13 
import { addNotification } from '../../redux/notification/notification.actions'
14 
 
1456 stevensc 15 
import Modal from 'components/UI/modal/Modal'
16 
import Spinner from 'components/UI/Spinner'
17 
import TextInput from 'components/UI/inputs/TextInput'
5 stevensc 18 
 
19 
const ContactsModal = ({ show, onClose, onComplete }) => {
20 
  const [contacts, setContacts] = useState([])
21 
  const [loading, setLoading] = useState(false)
22 
  const dispatch = useDispatch()
23 
 
24 
  const closeModal = () => {
25 
    setContacts([])
26 
    onClose()
27 
  }
28 
 
29 
  const handleSearch = debounce((value) => getContacts(value), 500)
30 
 
31 
  const getContacts = (searchValue = '') => {
32 
    setLoading(true)
33 
    axios
34 
      .get(`/chat/users?search=${searchValue.toLowerCase()}`)
35 
      .then(({ data: response }) => {
36 
        if (!response.success) {
37 
          return dispatch(
38 
            addNotification({ style: 'danger', msg: 'Ha ocurrido un error' })
39 
          )
40 
        }
41 
        setContacts(response.data)
42 
      })
43 
      .finally(() => setLoading(false))
44 
  }
45 
 
46 
  const startConversation = ({ link_open_or_create, link_send }) => {
47 
    setLoading(true)
48 
    axios
49 
      .post(link_open_or_create)
50 
      .then(({ data: response }) => {
51 
        if (response.success) {
52 
          closeModal()
53 
          onComplete(link_send)
54 
        }
55 
      })
56 
      .finally(() => setLoading(false))
57 
  }
58 
 
59 
  return (
1456 stevensc 60 
    <Modal
61 
      show={show}
62 
      title='Iniciar conversación'
63 
      onClose={closeModal}
64 
      showFooter={false}
65 
    >
66 
      <TextInput
67 
        label='Escribe el nombre'
68 
        name='search-contact'
69 
        type='text'
70 
        placeholder='Escribe el nombre de la persona'
71 
        onChange={(e) => handleSearch(e.target.value)}
72 
      />
5 stevensc 73 
 
1456 stevensc 74 
      {loading ? (
75 
        <Spinner />
76 
      ) : (
77 
        <List sx={{ width: '100%' }}>
78 
          {contacts.map((user) => {
79 
            const { image, name } = user
80 
 
81 
            return (
82 
              <ListItem key={name} disablePadding disableRipple>
83 
                <ListItemButton
84 
                  disableRipple
85 
                  onClick={() => startConversation(user)}
86 
                >
87 
                  <ListItemAvatar>
88 
                    <Avatar alt={`${name} image`} src={image} />
89 
                  </ListItemAvatar>
90 
 
91 
                  <ListItemText primary={name} />
92 
                </ListItemButton>
93 
              </ListItem>
94 
            )
95 
          })}
96 
        </List>
97 
      )}
5 stevensc 98 
    </Modal>
99 
  )
100 
}
101 
 
102 
export default ContactsModal