Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1456 | Rev 2076 | 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 TextInput from 'components/UI/inputs/TextInput'
5 stevensc 17 
 
18 
const ContactsModal = ({ show, onClose, onComplete }) => {
19 
  const [contacts, setContacts] = useState([])
20 
  const dispatch = useDispatch()
21 
 
22 
  const closeModal = () => {
23 
    setContacts([])
24 
    onClose()
25 
  }
26 
 
27 
  const handleSearch = debounce((value) => getContacts(value), 500)
28 
 
29 
  const getContacts = (searchValue = '') => {
1929 stevensc 30 
 
5 stevensc 31 
    axios
32 
      .get(`/chat/users?search=${searchValue.toLowerCase()}`)
33 
      .then(({ data: response }) => {
34 
        if (!response.success) {
35 
          return dispatch(
36 
            addNotification({ style: 'danger', msg: 'Ha ocurrido un error' })
37 
          )
38 
        }
39 
        setContacts(response.data)
40 
      })
41 
  }
42 
 
43 
  const startConversation = ({ link_open_or_create, link_send }) => {
1929 stevensc 44 
 
5 stevensc 45 
    axios
46 
      .post(link_open_or_create)
47 
      .then(({ data: response }) => {
48 
        if (response.success) {
49 
          closeModal()
50 
          onComplete(link_send)
51 
        }
52 
      })
53 
  }
54 
 
55 
  return (
1456 stevensc 56 
    <Modal
57 
      show={show}
58 
      title='Iniciar conversación'
59 
      onClose={closeModal}
60 
      showFooter={false}
61 
    >
62 
      <TextInput
63 
        label='Escribe el nombre'
64 
        name='search-contact'
65 
        type='text'
66 
        placeholder='Escribe el nombre de la persona'
67 
        onChange={(e) => handleSearch(e.target.value)}
68 
      />
5 stevensc 69 
 
1929 stevensc 70 
      <List sx={{ width: '100%' }}>
1456 stevensc 71 
          {contacts.map((user) => {
72 
            const { image, name } = user
73 
 
74 
            return (
75 
              <ListItem key={name} disablePadding disableRipple>
76 
                <ListItemButton
77 
                  disableRipple
78 
                  onClick={() => startConversation(user)}
79 
                >
80 
                  <ListItemAvatar>
81 
                    <Avatar alt={`${name} image`} src={image} />
82 
                  </ListItemAvatar>
83 
 
84 
                  <ListItemText primary={name} />
85 
                </ListItemButton>
86 
              </ListItem>
87 
            )
88 
          })}
89 
        </List>
5 stevensc 90 
    </Modal>
91 
  )
92 
}
93 
 
94 
export default ContactsModal