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;