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