Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2780 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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