Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { Autocomplete, TextField } from '@mui/material'

import { axios } from '@app/utils'
import { addNotification } from '@app/redux/notification/notification.actions'

export default function SearchInput({ onChange }) {
  const [search, setSearch] = useState('')
  const [value, setValue] = useState(null)
  const [loading, setLoading] = useState(false)
  const [options, setOptions] = useState([])
  const dispatch = useDispatch()

  useEffect(() => {
    const SEARCH_URL = '/helpers/search-people?search='

    const searchMember = (search = '') => {
      setLoading(true)
      axios
        .get(SEARCH_URL + search + '&page=1')
        .then((response) => {
          const { data } = response.data
          const users = data.current ? data.current.items : data
          setOptions(users)
        })
        .catch((err) => {
          dispatch(addNotification({ style: 'danger', msg: err.message }))
        })
        .finally(() => setLoading(false))
    }

    searchMember(search)
  }, [search])

  return (
    <>
      <Autocomplete
        value={value}
        getOptionLabel={(option) => option.contact}
        noOptionsText='Sin resultados'
        loadingText='Buscando...'
        onInputChange={(event, value) => setSearch(value)}
        onChange={(event, newValue) => {
          setValue(newValue)
          onChange(newValue)
        }}
        options={options}
        loading={loading}
        renderInput={(params) => <TextField label='Para' {...params} />}
      />
    </>
  )
}