Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15761 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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