Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
2076 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { connect } from 'react-redux'
1456 stevensc 3 
import {
4 
  Avatar,
5 
  List,
6 
  ListItem,
7 
  ListItemAvatar,
8 
  ListItemButton,
9 
  ListItemText
10 
} from '@mui/material'
11 
 
2076 stevensc 12 
import { getCurrentContacts, startConversation } from '@app/services/chats'
13 
import { addNotification } from '@app/redux/notification/notification.actions'
14 
import useDebounce from '@app/hooks/useDebounce'
5 stevensc 15 
 
2076 stevensc 16 
import Modal from '../UI/modal/Modal'
17 
import Input from '../UI/inputs/input'
5 stevensc 18 
 
2076 stevensc 19 
const ContactsModal = ({ show, onClose, onComplete, addNotification }) => {
20 
  const [search, setSearch] = useState('')
21 
  const debounceSearch = useDebounce(search, 500)
5 stevensc 22 
  const [contacts, setContacts] = useState([])
23 
 
24 
  const closeModal = () => {
25 
    setContacts([])
26 
    onClose()
27 
  }
28 
 
2083 stevensc 29 
  const handleStartConversation = async (startConversationUrl) => {
2076 stevensc 30 
    try {
2083 stevensc 31 
      const conversation = await startConversation(startConversationUrl)
32 
      onComplete(conversation.link_send)
2076 stevensc 33 
      closeModal()
34 
    } catch (error) {
2083 stevensc 35 
      console.log(error)
2076 stevensc 36 
      addNotification({ style: 'danger', msg: error.message })
37 
    }
5 stevensc 38 
  }
39 
 
2076 stevensc 40 
  useEffect(() => {
41 
    getCurrentContacts(debounceSearch)
42 
      .then((currentContacts) => setContacts(currentContacts))
43 
      .catch((error) => {
44 
        addNotification({ style: 'danger', msg: error.message })
5 stevensc 45 
      })
2076 stevensc 46 
  }, [debounceSearch])
5 stevensc 47 
 
48 
  return (
1456 stevensc 49 
    <Modal
50 
      show={show}
51 
      title='Iniciar conversación'
52 
      onClose={closeModal}
53 
      showFooter={false}
54 
    >
2076 stevensc 55 
      <Input
1456 stevensc 56 
        label='Escribe el nombre'
57 
        placeholder='Escribe el nombre de la persona'
2076 stevensc 58 
        onChange={(e) => setSearch(e.target.value)}
1456 stevensc 59 
      />
5 stevensc 60 
 
1929 stevensc 61 
      <List sx={{ width: '100%' }}>
2076 stevensc 62 
        {contacts.map((user) => {
2083 stevensc 63 
          const { image, name, link_open_or_create } = user
1456 stevensc 64 
 
2076 stevensc 65 
          return (
66 
            <ListItem key={name} disablePadding disableRipple>
67 
              <ListItemButton
68 
                disableRipple
2083 stevensc 69 
                onClick={() => handleStartConversation(link_open_or_create)}
2076 stevensc 70 
              >
71 
                <ListItemAvatar>
72 
                  <Avatar alt={`${name} image`} src={image} />
73 
                </ListItemAvatar>
1456 stevensc 74 
 
2076 stevensc 75 
                <ListItemText primary={name} />
76 
              </ListItemButton>
77 
            </ListItem>
78 
          )
79 
        })}
80 
      </List>
5 stevensc 81 
    </Modal>
82 
  )
83 
}
84 
 
2076 stevensc 85 
const mapDispatchToProps = {
86 
  addNotification: (notification) => addNotification(notification)
87 
}
88 
 
89 
export default connect(null, mapDispatchToProps)(ContactsModal)