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