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