Autoría | Ultima modificación | Ver Log |
import React, { useEffect, useState } from 'react'
import { axios, debounce } from '../../utils'
import { Modal } from 'react-bootstrap'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import SendIcon from '@mui/icons-material/Send'
import Spinner from '../UI/Spinner'
const ContactsModal = ({ show, onClose, onComplete }) => {
const [isShow, setIsShow] = useState(show)
const [contacts, setContacts] = useState([])
const [loading, setLoading] = useState(false)
const dispatch = useDispatch()
const closeModal = () => {
setIsShow(false)
setContacts([])
onClose()
}
const handleSearch = debounce((value) => getContacts(value), 500)
const getContacts = (searchValue = '') => {
setLoading(true)
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)
})
.finally(() => setLoading(false))
}
const startConversation = ({ link_open_or_create, link_send }) => {
setLoading(true)
axios
.post(link_open_or_create)
.then(({ data: response }) => {
if (response.success) {
closeModal()
onComplete(link_send)
}
})
.finally(() => setLoading(false))
}
useEffect(() => {
setIsShow(show)
}, [show])
return (
<Modal show={isShow} onHide={closeModal}>
<Modal.Header closeButton>
<h3 className="card-title font-weight-bold">Iniciar conversación</h3>
</Modal.Header>
<Modal.Body className="pb-3">
<div className="form-group">
<label htmlFor="search-people">Escribe el nombre</label>
<input
type="text"
className="form-control"
placeholder="Escribe el nombre de la persona"
onChange={(e) => handleSearch(e.target.value)}
/>
</div>
{loading ? (
<Spinner />
) : (
<ul className="d-flex flex-column gap-3">
{contacts.map((user) => (
<li key={user.name}>
<div className="d-flex align-items-center justify-content-between gap-3">
<div className="d-flex align-items-center gap-3">
<img
src={user.image}
alt={`User ${user.name} image`}
width={40}
height={40}
style={{ borderRadius: '50%' }}
/>
<p>{user.name}</p>
</div>
<button
className="btn btn-primary"
onClick={() => startConversation(user)}
>
<SendIcon />
</button>
</div>
</li>
))}
</ul>
)}
</Modal.Body>
</Modal>
)
}
export default ContactsModal