Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import {
  Avatar,
  List,
  ListItem,
  ListItemAvatar,
  ListItemButton,
  ListItemText
} from '@mui/material'

import { useDebounce } from '@hooks'
import { getCurrentContacts, startConversation } from '@app/services/chats'
import { addNotification } from '@app/redux/notification/notification.actions'

import Modal from '../UI/modal/Modal'
import Input from '../UI/inputs/input'

const ContactsModal = ({ show, onClose, onComplete, addNotification }) => {
  const [search, setSearch] = useState('')
  const debounceSearch = useDebounce(search, 500)
  const [contacts, setContacts] = useState([])

  const closeModal = () => {
    setContacts([])
    onClose()
  }

  const handleStartConversation = async (startConversationUrl) => {
    try {
      const conversation = await startConversation(startConversationUrl)
      onComplete(conversation)
      closeModal()
    } catch (error) {
      addNotification({ style: 'danger', msg: error.message })
    }
  }

  useEffect(() => {
    getCurrentContacts(debounceSearch)
      .then((currentContacts) => setContacts(currentContacts))
      .catch((error) => {
        addNotification({ style: 'danger', msg: error.message })
      })
  }, [debounceSearch])

  return (
    <Modal
      show={show}
      title='Iniciar conversación'
      onClose={closeModal}
      showFooter={false}
    >
      <Input
        label='Escribe el nombre'
        placeholder='Escribe el nombre de la persona'
        onChange={(e) => setSearch(e.target.value)}
      />

      <List sx={{ width: '100%' }}>
        {contacts.map((user) => {
          const { image, name, link_open_or_create } = user

          return (
            <ListItem key={name} disablePadding disableRipple>
              <ListItemButton
                disableRipple
                onClick={() => handleStartConversation(link_open_or_create)}
              >
                <ListItemAvatar>
                  <Avatar alt={`${name} image`} src={image} />
                </ListItemAvatar>

                <ListItemText primary={name} />
              </ListItemButton>
            </ListItem>
          )
        })}
      </List>
    </Modal>
  )
}

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification)
}

export default connect(null, mapDispatchToProps)(ContactsModal)