Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2083 | Rev 2780 | 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)
2122 stevensc 32 
      onComplete(conversation)
2076 stevensc 33 
      closeModal()
34 
    } catch (error) {
35 
      addNotification({ style: 'danger', msg: error.message })
36 
    }
5 stevensc 37 
  }
38 
 
2076 stevensc 39 
  useEffect(() => {
40 
    getCurrentContacts(debounceSearch)
41 
      .then((currentContacts) => setContacts(currentContacts))
42 
      .catch((error) => {
43 
        addNotification({ style: 'danger', msg: error.message })
5 stevensc 44 
      })
2076 stevensc 45 
  }, [debounceSearch])
5 stevensc 46 
 
47 
  return (
1456 stevensc 48 
    <Modal
49 
      show={show}
50 
      title='Iniciar conversación'
51 
      onClose={closeModal}
52 
      showFooter={false}
53 
    >
2076 stevensc 54 
      <Input
1456 stevensc 55 
        label='Escribe el nombre'
56 
        placeholder='Escribe el nombre de la persona'
2076 stevensc 57 
        onChange={(e) => setSearch(e.target.value)}
1456 stevensc 58 
      />
5 stevensc 59 
 
1929 stevensc 60 
      <List sx={{ width: '100%' }}>
2076 stevensc 61 
        {contacts.map((user) => {
2083 stevensc 62 
          const { image, name, link_open_or_create } = user
1456 stevensc 63 
 
2076 stevensc 64 
          return (
65 
            <ListItem key={name} disablePadding disableRipple>
66 
              <ListItemButton
67 
                disableRipple
2083 stevensc 68 
                onClick={() => handleStartConversation(link_open_or_create)}
2076 stevensc 69 
              >
70 
                <ListItemAvatar>
71 
                  <Avatar alt={`${name} image`} src={image} />
72 
                </ListItemAvatar>
1456 stevensc 73 
 
2076 stevensc 74 
                <ListItemText primary={name} />
75 
              </ListItemButton>
76 
            </ListItem>
77 
          )
78 
        })}
79 
      </List>
5 stevensc 80 
    </Modal>
81 
  )
82 
}
83 
 
2076 stevensc 84 
const mapDispatchToProps = {
85 
  addNotification: (notification) => addNotification(notification)
86 
}
87 
 
88 
export default connect(null, mapDispatchToProps)(ContactsModal)