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, setConversation, 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