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} />}

      />

    </>

  )

}