Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import { axios } 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'

// Components
import Spinner from '../../../shared/loading-spinner/Spinner'

const ContactsModal = ({ show, setConversation }) => {
    let axiosThrottle = null
    const [isShow, setIsShow] = useState(show)
    const [searchResult, setSearchResult] = useState({})
    const [loading, setLoading] = useState(false)
    const dispatch = useDispatch()

    const closeModal = () => {
        setIsShow(false)
        setSearchResult({})
    }

    const handleSearch = (contact) => {
        clearTimeout(axiosThrottle)
        axiosThrottle = setTimeout(() => {
            fetchContacts(contact)
        }, 500);
    };

    const fetchContacts = async (searchParam = '') => {
        setLoading(true)
        await axios.get(`/chat/users?search=${searchParam.toLowerCase()}`)
            .then(({ data: response }) => {
                if (!response.success) return dispatch(addNotification({ style: 'danger', msg: 'Ha ocurrido un error' }))
                setSearchResult(response.data)
            })
            .finally(() => setLoading(false))
    }

    const startConversation = async (send_url = '', name = '') => {
        const formData = new FormData()
        const fullName = name.split(' ')
        formData.append("message", `Hola, ${fullName[0]}`)

        setLoading(true)
        await axios
            .post(send_url, formData)
            .then(({ data: response }) => {
                if (response.success) {
                    setConversation(send_url)
                    closeModal()
                }
            })
            .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>
            <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>
            <div className='container'>
                {loading
                    ? <Spinner />
                    : Object.entries(searchResult).map(([key, value]) => {
                        return (
                            <div className='row' key={key}>
                                <div className='col-8'>
                                    <p>{value}</p>
                                </div>
                                <div className='col-4'>
                                    <button className='btn btn-primary' onClick={() => startConversation(key, value)}>
                                        <SendIcon />
                                    </button>
                                </div>
                            </div>
                        )
                    })}
            </div>
        </Modal >
    )
}

export default ContactsModal