import React , { useState , useCallback } from "react" ; import { useDispatch } from "react-redux" ; import { getDistrictByName , getStates } from "../../../Redux/actions" ; import { AutoCompleteAsyncField } from "../../Common/HelperInputFields" ; const debounce = require ( "lodash.debounce" ) ; interface DistrictSelectProps { name : string ; errors : string ; className ? : string ; multiple ? : boolean ; searchAll ? : boolean ; selected : string ; margin ? : string ; setSelected : ( selected : string ) => void ; } function DistrictSelect ( props ) { const { name , errors , className , multiple , selected , searchAll , setSelected , margin , } = props ; const [ isdistrictLoading , setDistrictLoading ] = useState ( false ) ; const [ hasSearchText , setHasSearchText ] = useState ( false ) ; const [ districtList , setDistrictList ] = useState ( [ ] ) ; const dispatchAction = useDispatch ( ) ; const handleValueChange = ( current ) => { if ( ! current ) { setDistrictList ( [ ] ) ; setDistrictLoading ( false ) ; setHasSearchText ( false ) ; } setSelected ( current ) ; } ; const handleSearch = ( e ) => { setDistrictLoading ( true ) ; setHasSearchText ( ! ! e . target . value ) ; onDistrictSearch ( e . target . value ) ; } ; const onDistrictSearch = useCallback ( debounce ( async ( text ) => { if ( text ) { const params = { limit : 50 , offset : 0 , district_name : text } ; const res = await dispatchAction ( getDistrictByName ( params ) ) ; if ( res && res . data ) { setDistrictList ( res . data . results ) ; } setDistrictLoading ( false ) ; } else { setDistrictList ( [ ] ) ; setDistrictLoading ( false ) ; } } , 300 ) , [ ] ) ; return ( < AutoCompleteAsyncField name = { name } multiple = { multiple } variant = "outlined" margin = { margin } value = { selected } options = { districtList } onSearch = { handleSearch } onChange = { ( e , selected ) => handleValueChange ( selected ) } loading = { isdistrictLoading } placeholder = "Enter district name" noOptionsText = { hasSearchText ? "No district found, please try again" : "Start typing to begin search" } renderOption = { ( option ) => < div > { option . name } < /div>} getOptionSelected={(option, value) => option.id === value.id} getOptionLabel={(option) => option.name} filterOptions={(options) => options} errors={errors} className={className}/ > ) ; } export default DistrictSelect ;