Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5033 Rev 5307
Línea 8... Línea 8...
8 
 
 8 
 
9 
// Components
 9 
// Components
Línea 10... Línea 10...
10 
import Spinner from '../../../shared/loading-spinner/Spinner'
 10 
import Spinner from '../../../shared/loading-spinner/Spinner'
11 
 
 11 
 
12 
const ContactsModal = ({ show, setConversation }) => {
 12 
const ContactsModal = ({ show, setConversation }) => {
13 
    let axiosThrottle = null
 13 
  let axiosThrottle = null
14 
    const [isShow, setIsShow] = useState(show)
 14 
  const [isShow, setIsShow] = useState(show)
15 
    const [searchResult, setSearchResult] = useState({})
 15 
  const [searchResult, setSearchResult] = useState({})
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 = () => {
20 
        setIsShow(false)
 20 
    setIsShow(false)
21 
        setSearchResult({})
 21 
    setSearchResult({})
22 
    }
 22 
  }
23 
 
 23 
 
24 
    const handleSearch = (contact) => {
 24 
  const handleSearch = (contact) => {
25 
        clearTimeout(axiosThrottle)
 25 
    clearTimeout(axiosThrottle)
26 
        axiosThrottle = setTimeout(() => {
 26 
    axiosThrottle = setTimeout(() => {
27 
            fetchContacts(contact)
 27 
      fetchContacts(contact)
28 
        }, 500);
 28 
    }, 500)
29 
    };
 29 
  }
30 
 
 30 
 
31 
    const fetchContacts = async (searchParam = '') => {
 31 
  const fetchContacts = async (searchParam = '') => {
32 
        setLoading(true)
 32 
    setLoading(true)
33 
        await axios.get(`/chat/users?search=${searchParam.toLowerCase()}`)
 33 
    await axios.get(`/chat/users?search=${searchParam.toLowerCase()}`)
34 
            .then(({ data: response }) => {
 34 
      .then(({ data: response }) => {
35 
                if (!response.success) return dispatch(addNotification({ style: 'danger', msg: 'Ha ocurrido un error' }))
 35 
        if (!response.success) return dispatch(addNotification({ style: 'danger', msg: 'Ha ocurrido un error' }))
36 
                setSearchResult(response.data)
 36 
        setSearchResult(response.data)
37 
            })
 37 
      })
38 
            .finally(() => setLoading(false))
 38 
      .finally(() => setLoading(false))
39 
    }
 39 
  }
40 
 
 40 
 
41 
    const startConversation = async (send_url = '', name = '') => {
 41 
  const startConversation = async (send_url = '', name = '') => {
42 
        const formData = new FormData()
 42 
    const formData = new FormData()
43 
        const fullName = name.split(' ')
 43 
    const fullName = name.split(' ')
44 
        formData.append("message", `Hola, ${fullName[0]}`)
 44 
    formData.append('message', `Hola, ${fullName[0]}`)
45 
 
 45 
 
46 
        setLoading(true)
 46 
    setLoading(true)
47 
        await axios
 47 
    await axios
48 
            .post(send_url, formData)
 48 
      .post(send_url, formData)
49 
            .then(({ data: response }) => {
 49 
      .then(({ data: response }) => {
50 
                if (response.success) {
 50 
        if (response.success) {
51 
                    setConversation(send_url)
 51 
          setConversation(send_url)
52 
                    closeModal()
 52 
          closeModal()
53 
                }
 53 
        }
54 
            })
 54 
      })
55 
            .finally(() => setLoading(false))
 55 
      .finally(() => setLoading(false))
56 
    }
 56 
  }
57 
 
 57 
 
58 
    useEffect(() => {
 58 
  useEffect(() => {
59 
        setIsShow(show)
 59 
    setIsShow(show)
60 
    }, [show])
 60 
  }, [show])
61 
 
 61 
 
62 
    return (
 62 
  return (
63 
        <Modal show={isShow} onHide={closeModal}>
 63 
    <Modal show={isShow} onHide={closeModal}>
64 
            <Modal.Header closeButton>
 64 
      <Modal.Header closeButton>
65 
                <h3 className="card-title font-weight-bold">Iniciar conversación</h3>
 65 
        <h3 className="card-title font-weight-bold">Iniciar conversación</h3>
66 
            </Modal.Header>
 66 
      </Modal.Header>
67 
            <div className="form-group">
 67 
      <div className="form-group">
68 
                <label htmlFor="search-people">Escribe el nombre</label>
 68 
        <label htmlFor="search-people">Escribe el nombre</label>
69 
                <input type="text" className="form-control" placeholder="Escribe el nombre de la persona" onChange={(e) => handleSearch(e.target.value)} />
 69 
        <input type="text" className="form-control" placeholder="Escribe el nombre de la persona" onChange={(e) => handleSearch(e.target.value)} />
70 
            </div>
 70 
      </div>
71 
            <div className='container'>
 71 
      <div className='container'>
72 
                {loading
 72 
        {loading
73 
                    ? <Spinner />
 73 
          ? <Spinner />
74 
                    : Object.entries(searchResult).map(([key, value]) => {
 74 
          : Object.entries(searchResult).map(([key, value]) => {
75 
                        return (
 75 
            return (
76 
                            <div className='row' key={key}>
 76 
              <div className='row' key={key}>
77 
                                <div className='col-8'>
 77 
                <div className='col-8'>
78 
                                    <p>{value}</p>
 78 
                  <p>{value}</p>
79 
                                </div>
 79 
                </div>
80 
                                <div className='col-4'>
 80 
                <div className='col-4'>
81 
                                    <button className='btn btn-primary' onClick={() => startConversation(key, value)}>
 81 
                  <button className='btn btn-primary' onClick={() => startConversation(key, value)}>
82 
                                        <SendIcon />
 82 
                    <SendIcon />
83 
                                    </button>
 83 
                  </button>
84 
                                </div>
 84 
                </div>
85 
                            </div>
 85 
              </div>
86 
                        )
 86 
            )
87 
                    })}
 87 
          })}
88 
            </div>
 88 
      </div>
89 
        </Modal >
 89 
    </Modal >
Línea 90... Línea -...
90 
    )
 - 
 
91 
}
 90 
  )
- 
 
 91 
}