Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5307 | Rev 5354 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5307 Rev 5353
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable camelcase */
1 
/* eslint-disable react/prop-types */
 2 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useState } from 'react'
 3 
import React, { useEffect, useState } from 'react'
3 
import { axios } from '../../../utils'
 4 
import { axios, debounce } from '../../../utils'
4 
import { Modal } from 'react-bootstrap'
 5 
import { Modal } from 'react-bootstrap'
5 
import { useDispatch } from 'react-redux'
 6 
import { useDispatch } from 'react-redux'
6 
import { addNotification } from '../../../redux/notification/notification.actions'
 7 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
import SendIcon from '@mui/icons-material/Send'
 8 
import SendIcon from '@mui/icons-material/Send'
Línea 8... Línea 9...
8 
 
 9 
 
9 
// Components
 10 
// Components
Línea 10... Línea 11...
10 
import Spinner from '../../../shared/loading-spinner/Spinner'
 11 
import Spinner from '../../../shared/loading-spinner/Spinner'
11 
 
 - 
 
12 
const ContactsModal = ({ show, setConversation }) => {
 12 
 
13 
  let axiosThrottle = null
 13 
const ContactsModal = ({ show }) => {
14 
  const [isShow, setIsShow] = useState(show)
 14 
  const [isShow, setIsShow] = useState(show)
15 
  const [searchResult, setSearchResult] = useState({})
 15 
  const [contacts, setContacts] = useState({})
Línea 16... Línea 16...
16 
  const [loading, setLoading] = useState(false)
 16 
  const [loading, setLoading] = useState(false)
17 
  const dispatch = useDispatch()
 17 
  const dispatch = useDispatch()
18 
 
 18 
 
19 
  const closeModal = () => {
 19 
  const closeModal = () => {
Línea 20... Línea 20...
20 
    setIsShow(false)
 20 
    setIsShow(false)
21 
    setSearchResult({})
 - 
 
22 
  }
 - 
 
23 
 
 - 
 
24 
  const handleSearch = (contact) => {
 - 
 
25 
    clearTimeout(axiosThrottle)
 - 
 
Línea 26... Línea 21...
26 
    axiosThrottle = setTimeout(() => {
 21 
    setContacts([])
27 
      fetchContacts(contact)
 22 
  }
28 
    }, 500)
 23 
 
29 
  }
 24 
  const handleSearch = debounce((value) => getContacts(value), 500)
30 
 
 25 
 
31 
  const fetchContacts = async (searchParam = '') => {
 26 
  const getContacts = (searchValue = '') => {
32 
    setLoading(true)
 27 
    setLoading(true)
33 
    await axios.get(`/chat/users?search=${searchParam.toLowerCase()}`)
 28 
    axios.get(`/chat/users?search=${searchValue.toLowerCase()}`)
34 
      .then(({ data: response }) => {
 29 
      .then(({ data: response }) => {
Línea 35... Línea 30...
35 
        if (!response.success) return dispatch(addNotification({ style: 'danger', msg: 'Ha ocurrido un error' }))
 30 
        if (!response.success) return dispatch(addNotification({ style: 'danger', msg: 'Ha ocurrido un error' }))
36 
        setSearchResult(response.data)
 - 
 
37 
      })
 - 
 
38 
      .finally(() => setLoading(false))
 - 
 
39 
  }
 - 
 
40 
 
 31 
        setContacts(response.data)
41 
  const startConversation = async (send_url = '', name = '') => {
 32 
      })
42 
    const formData = new FormData()
 33 
      .finally(() => setLoading(false))
43 
    const fullName = name.split(' ')
 34 
  }
44 
    formData.append('message', `Hola, ${fullName[0]}`)
 35 
 
45 
 
 - 
 
46 
    setLoading(true)
 - 
 
47 
    await axios
 - 
 
48 
      .post(send_url, formData)
 36 
  const startConversation = async (create_url = '') => {
49 
      .then(({ data: response }) => {
 37 
    setLoading(true)
50 
        if (response.success) {
 38 
    await axios
Línea 51... Línea 39...
51 
          setConversation(send_url)
 39 
      .post(create_url)
Línea 62... Línea 50...
62 
  return (
 50 
  return (
63 
    <Modal show={isShow} onHide={closeModal}>
 51 
    <Modal show={isShow} onHide={closeModal}>
64 
      <Modal.Header closeButton>
 52 
      <Modal.Header closeButton>
65 
        <h3 className="card-title font-weight-bold">Iniciar conversación</h3>
 53 
        <h3 className="card-title font-weight-bold">Iniciar conversación</h3>
66 
      </Modal.Header>
 54 
      </Modal.Header>
- 
 
 55 
      <Modal.Body>
67 
      <div className="form-group">
 56 
        <div className="form-group">
68 
        <label htmlFor="search-people">Escribe el nombre</label>
 57 
          <label htmlFor="search-people">Escribe el nombre</label>
- 
 
 58 
          <input
- 
 
 59 
            type="text"
- 
 
 60 
            className="form-control"
- 
 
 61 
            placeholder="Escribe el nombre de la persona"
69 
        <input type="text" className="form-control" placeholder="Escribe el nombre de la persona" onChange={(e) => handleSearch(e.target.value)} />
 62 
            onChange={(e) => handleSearch(e.target.value)}
70 
      </div>
 63 
          />
71 
      <div className='container'>
 64 
        </div>
72 
        {loading
 65 
        {loading
73 
          ? <Spinner />
 66 
          ? <Spinner />
74 
          : Object.entries(searchResult).map(([key, value]) => {
 67 
          : contacts.map((name, image, link_open_or_create) => {
75 
            return (
 68 
            return (
76 
              <div className='row' key={key}>
 69 
              <div key={name} className="d-flex align-items-center justify-content-around">
77 
                <div className='col-8'>
 70 
                <div className="d-flex align-items-center">
78 
                  <p>{value}</p>
 - 
 
79 
                </div>
 - 
 
80 
                <div className='col-4'>
 71 
                  <img src={image} alt={`User ${name} image`} />
81 
                  <button className='btn btn-primary' onClick={() => startConversation(key, value)}>
 - 
 
82 
                    <SendIcon />
 - 
 
83 
                  </button>
 72 
                  <p>{name}</p>
84 
                </div>
 73 
                </div>
- 
 
 74 
 
- 
 
 75 
                <button className='btn btn-primary' onClick={() => startConversation(link_open_or_create)}>
- 
 
 76 
                  <SendIcon />
- 
 
 77 
                </button>
85 
              </div>
 78 
              </div>
86 
            )
 79 
            )
87 
          })}
 80 
          })}
88 
      </div>
 81 
      </Modal.Body>
89 
    </Modal >
 82 
    </Modal>
90 
  )
 83 
  )
91 
}
 84 
}
Línea 92... Línea 85...
92 
 
 85