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);