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