Proyectos de Subversion LeadersLinked - SPA

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

import { axios, debounce } from 'utils/index'
import { addNotification } from '../../redux/notification/notification.actions'

import Modal from 'components/UI/modal/Modal'
import TextInput from 'components/UI/inputs/TextInput'

const ContactsModal = ({ show, onClose, onComplete }) => {
  const [contacts, setContacts] = useState([])
  const dispatch = useDispatch()

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

  const handleSearch = debounce((value) => getContacts(value), 500)

  const getContacts = (searchValue = '') => {

    axios
      .get(`/chat/users?search=${searchValue.toLowerCase()}`)
      .then(({ data: response }) => {
        if (!response.success) {
          return dispatch(
            addNotification({ style: 'danger', msg: 'Ha ocurrido un error' })
          )
        }
        setContacts(response.data)
      })
  }

  const startConversation = ({ link_open_or_create, link_send }) => {
    
    axios
      .post(link_open_or_create)
      .then(({ data: response }) => {
        if (response.success) {
          closeModal()
          onComplete(link_send)
        }
      })
  }

  return (
    <Modal
      show={show}
      title='Iniciar conversación'
      onClose={closeModal}
      showFooter={false}
    >
      <TextInput
        label='Escribe el nombre'
        name='search-contact'
        type='text'
        placeholder='Escribe el nombre de la persona'
        onChange={(e) => handleSearch(e.target.value)}
      />

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

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

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

export default ContactsModal