Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import {
  Avatar,
  List,
  ListItem,
  ListItemAvatar,
  ListItemButton,
  ListItemText
} from '@mui/material';

import { useDebounce } from '@hooks';
import { getCurrentContacts, startConversation } from '@app/services/chats';
import { addNotification } from '@app/redux/notification/notification.actions';

import Modal from '../UI/modal/Modal';
import Input from '../UI/inputs/Input';

const ContactsModal = ({ show, onClose, onComplete, addNotification }) => {
  const [search, setSearch] = useState('');
  const debounceSearch = useDebounce(search, 500);
  const [contacts, setContacts] = useState([]);

  const closeModal = () => {
    setContacts([]);
    onClose();
  };

  const handleStartConversation = async (startConversationUrl) => {
    try {
      const conversation = await startConversation(startConversationUrl);
      onComplete(conversation);
      closeModal();
    } catch (error) {
      addNotification({ style: 'danger', msg: error.message });
    }
  };

  useEffect(() => {
    getCurrentContacts(debounceSearch)
      .then((currentContacts) => setContacts(currentContacts))
      .catch((error) => {
        addNotification({ style: 'danger', msg: error.message });
      });
  }, [debounceSearch]);

  return (
    <Modal show={show} title='Iniciar conversación' onClose={closeModal} showFooter={false}>
      <Input
        label='Escribe el nombre'
        placeholder='Escribe el nombre de la persona'
        onChange={(e) => setSearch(e.target.value)}
      />

      <List sx={{ width: '100%' }}>
        {contacts.map((user) => {
          const { image, name, link_open_or_create } = user;

          return (
            <ListItem key={name} disablePadding disableRipple>
              <ListItemButton
                disableRipple
                onClick={() => handleStartConversation(link_open_or_create)}
              >
                <ListItemAvatar>
                  <Avatar alt={`${name} image`} src={image} />
                </ListItemAvatar>

                <ListItemText primary={name} />
              </ListItemButton>
            </ListItem>
          );
        })}
      </List>
    </Modal>
  );
};

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification)
};

export default connect(null, mapDispatchToProps)(ContactsModal);