Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1929 | Rev 2083 | 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 
 
2076 stevensc 29 
  const handleStartConversation = async (startConversationUrl, sendUrl) => {
30 
    try {
31 
      await startConversation(startConversationUrl)
32 
      onComplete(sendUrl)
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) => {
62 
          const { image, name, link_open_or_create, link_send } = user
1456 stevensc 63 
 
2076 stevensc 64 
          return (
65 
            <ListItem key={name} disablePadding disableRipple>
66 
              <ListItemButton
67 
                disableRipple
68 
                onClick={() =>
69 
                  handleStartConversation(link_open_or_create, link_send)
70 
                }
71 
              >
72 
                <ListItemAvatar>
73 
                  <Avatar alt={`${name} image`} src={image} />
74 
                </ListItemAvatar>
1456 stevensc 75 
 
2076 stevensc 76 
                <ListItemText primary={name} />
77 
              </ListItemButton>
78 
            </ListItem>
79 
          )
80 
        })}
81 
      </List>
5 stevensc 82 
    </Modal>
83 
  )
84 
}
85 
 
2076 stevensc 86 
const mapDispatchToProps = {
87 
  addNotification: (notification) => addNotification(notification)
88 
}
89 
 
90 
export default connect(null, mapDispatchToProps)(ContactsModal)