Proyectos de Subversion LeadersLinked - SPA

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

import { useDebounce } from '@hooks';
import { axios } from '../../utils';

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

const StartConversationModal = ({ show, onClose }) => {
  const [users, setUsers] = useState([]);
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 500);
  const navigate = useNavigate();
  const labels = useSelector(({ intl }) => intl.labels);

  const searchUsers = async (value) => {
    try {
      const { data } = await axios.get('/helpers/search-people?search=' + value);
      if (data.success) setUsers(data.data);
    } catch (error) {
      console.log('>>: error > ', error);
    }
  };

  const openChat = (uuid) => {
    navigate(`/inmail/${uuid}`);
    onClose();
  };

  useEffect(() => {
    searchUsers(debouncedSearch);
  }, [debouncedSearch]);

  return (
    <Modal title={labels.create_inmail} show={show} onClose={onClose}>
      <Input
        label={labels.write_name}
        placeholder={labels.write_person_name}
        onChange={(e) => setSearch(e.target.value)}
        value={search}
      />

      <List sx={{ width: '100%' }}>
        {users.map((user) => {
          const { text, value } = user;

          return (
            <ListItem key={value} disablePadding disableRipple>
              <ListItemButton disableRipple onClick={() => openChat(value)}>
                <ListItemAvatar>
                  <Avatar alt={`${text} image`} src='' />
                </ListItemAvatar>

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

export default StartConversationModal;