Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
/* eslint-disable react/prop-types */
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'

// Components
import Spinner from '../../../shared/loading-spinner/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