Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 1929 Rev 2076
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
2 
import { useDispatch } from 'react-redux'
 2 
import { connect } from 'react-redux'
3 
import {
 3 
import {
4 
  Avatar,
 4 
  Avatar,
5 
  List,
 5 
  List,
6 
  ListItem,
 6 
  ListItem,
7 
  ListItemAvatar,
 7 
  ListItemAvatar,
8 
  ListItemButton,
 8 
  ListItemButton,
9 
  ListItemText
 9 
  ListItemText
10 
} from '@mui/material'
 10 
} from '@mui/material'
Línea 11... Línea 11...
11 
 
 11 
 
12 
import { axios, debounce } from 'utils/index'
 12 
import { getCurrentContacts, startConversation } from '@app/services/chats'
- 
 
 13 
import { addNotification } from '@app/redux/notification/notification.actions'
13 
import { addNotification } from '../../redux/notification/notification.actions'
 14 
import useDebounce from '@app/hooks/useDebounce'
14 
 
 15 
 
15 
import Modal from 'components/UI/modal/Modal'
 16 
import Modal from '../UI/modal/Modal'
16 
import TextInput from 'components/UI/inputs/TextInput'
 17 
import Input from '../UI/inputs/input'
17 
 
 18 
 
- 
 
 19 
const ContactsModal = ({ show, onClose, onComplete, addNotification }) => {
- 
 
 20 
  const [search, setSearch] = useState('')
18 
const ContactsModal = ({ show, onClose, onComplete }) => {
 21 
  const debounceSearch = useDebounce(search, 500)
19 
  const [contacts, setContacts] = useState([])
 - 
 
Línea 20... Línea 22...
20 
  const dispatch = useDispatch()
 22 
  const [contacts, setContacts] = useState([])
21 
 
 23 
 
22 
  const closeModal = () => {
 24 
  const closeModal = () => {
23 
    setContacts([])
 25 
    setContacts([])
Línea 24... Línea 26...
24 
    onClose()
 26 
    onClose()
25 
  }
 - 
 
26 
 
 - 
 
27 
  const handleSearch = debounce((value) => getContacts(value), 500)
 - 
 
28 
 
 27 
  }
29 
  const getContacts = (searchValue = '') => {
 28 
 
30 
 
 29 
  const handleStartConversation = async (startConversationUrl, sendUrl) => {
31 
    axios
 30 
    try {
32 
      .get(`/chat/users?search=${searchValue.toLowerCase()}`)
 31 
      await startConversation(startConversationUrl)
33 
      .then(({ data: response }) => {
 32 
      onComplete(sendUrl)
34 
        if (!response.success) {
 - 
 
35 
          return dispatch(
 - 
 
36 
            addNotification({ style: 'danger', msg: 'Ha ocurrido un error' })
 - 
 
37 
          )
 33 
      closeModal()
38 
        }
 34 
    } catch (error) {
Línea 39... Línea -...
39 
        setContacts(response.data)
 - 
 
40 
      })
 - 
 
41 
  }
 35 
      addNotification({ style: 'danger', msg: error.message })
42 
 
 36 
    }
43 
  const startConversation = ({ link_open_or_create, link_send }) => {
 37 
  }
44
- 
 
45 
    axios
 38 
 
46 
      .post(link_open_or_create)
 39 
  useEffect(() => {
47 
      .then(({ data: response }) => {
 - 
 
48 
        if (response.success) {
 40 
    getCurrentContacts(debounceSearch)
49 
          closeModal()
 41 
      .then((currentContacts) => setContacts(currentContacts))
Línea 50... Línea 42...
50 
          onComplete(link_send)
 42 
      .catch((error) => {
51 
        }
 43 
        addNotification({ style: 'danger', msg: error.message })
52 
      })
 44 
      })
53 
  }
 45 
  }, [debounceSearch])
54 
 
 46 
 
55 
  return (
 47 
  return (
56 
    <Modal
 48 
    <Modal
57 
      show={show}
 49 
      show={show}
58 
      title='Iniciar conversación'
 50 
      title='Iniciar conversación'
59 
      onClose={closeModal}
 - 
 
60 
      showFooter={false}
 - 
 
61 
    >
 51 
      onClose={closeModal}
62 
      <TextInput
 52 
      showFooter={false}
63 
        label='Escribe el nombre'
 53 
    >
Línea 64... Línea 54...
64 
        name='search-contact'
 54 
      <Input
65 
        type='text'
 55 
        label='Escribe el nombre'
66 
        placeholder='Escribe el nombre de la persona'
 56 
        placeholder='Escribe el nombre de la persona'
Línea 67... Línea 57...
67 
        onChange={(e) => handleSearch(e.target.value)}
 57 
        onChange={(e) => setSearch(e.target.value)}
68 
      />
 58 
      />
69 
 
 59 
 
70 
      <List sx={{ width: '100%' }}>
 60 
      <List sx={{ width: '100%' }}>
71 
          {contacts.map((user) => {
 61 
        {contacts.map((user) => {
- 
 
 62 
          const { image, name, link_open_or_create, link_send } = user
72 
            const { image, name } = user
 63 
 
- 
 
 64 
          return (
73 
 
 65 
            <ListItem key={name} disablePadding disableRipple>
74 
            return (
 66 
              <ListItemButton
75 
              <ListItem key={name} disablePadding disableRipple>
 67 
                disableRipple
76 
                <ListItemButton
 68 
                onClick={() =>
77 
                  disableRipple
 69 
                  handleStartConversation(link_open_or_create, link_send)
78 
                  onClick={() => startConversation(user)}
 70 
                }
79 
                >
 71 
              >
80 
                  <ListItemAvatar>
 72 
                <ListItemAvatar>
81 
                    <Avatar alt={`${name} image`} src={image} />
 73 
                  <Avatar alt={`${name} image`} src={image} />
82 
                  </ListItemAvatar>
 74 
                </ListItemAvatar>
83 
 
 75 
 
84 
                  <ListItemText primary={name} />
 76 
                <ListItemText primary={name} />
85 
                </ListItemButton>
 77 
              </ListItemButton>
Línea -... Línea 78...
- 
 
 78 
            </ListItem>
- 
 
 79 
          )
- 
 
 80 
        })}
- 
 
 81 
      </List>
86 
              </ListItem>
 82 
    </Modal>