I want to return a value from debounce function. Currently, the function does not run at all. If I add () after its arguments like so:
debounce(input...)()
it runs after each keyboard input. The EmailValidator part runs just fine, I just need the inputDebouncer to properly resolve to an options-like object with value and label pairs.
import { debounce } from 'lodash-es'
import * as EmailValidator from 'email-validator';
import AsyncSelect from 'react-select/async';
import { connect } from 'react-redux'
import { getcolleaguesList, joinDirectRoom, setInvitee, setInvitees } from '../redux/actions/RoomActions'
export class DMSearchBar extends Component {
constructor(props) {
super(props)
const inputDebouncer = async (inp) => {
let mapped = []
return new Promise((resolve, reject) => {
debounce(input => {
console.log(inp)
getcolleaguesList(input)
.then((colleaguesList) => {
mapped = Object.keys(colleaguesList).map(idx => (
{
"value": colleaguesList[idx],
"label": `${colleaguesList[idx].displayname} <${colleaguesList[idx].username}>`
}
))
resolve(mapped)
})
}, 1000)
})
}
this.getAsyncOptions = (input) => {
return new Promise(async (resolve, reject) => {
// 1. Check if it's an email value, if true, return an option value with added "inviteeType": 'email'
if (EmailValidator.validate(input)) {
resolve([
{
"value": input,
"label": "Email value: " + input,
"inviteeType": 'email'
}
])
}
// 2. If not an email value, debounce 1 sec and then look among colleagues
else inputDebouncer(input).then(res => {
console.log(res)
resolve(res)
})
});
}
this.handleContactClick = (contact, contactClickAction) => {
switch (contactClickAction) {
case 'joinDirectRoom':
this.props.joinDirectRoom(contact)
break;
case 'addToInviteeList':
this.props.setInvitees(contact)
break;
default:
this.props.setInvitees([])
break;
}
}
}
render() {
return (
<div>
<AsyncSelect
loadOptions={inputValue => this.getAsyncOptions(inputValue)}
onChange={opt => this.handleContactClick(opt, 'addToInviteeList')}
placeholder="Enter name or email address"
isClearable="true"
/>
</div >
)
}
}
export default connect({}, { getcolleaguesList, joinDirectRoom, setInvitees, setInvitee })(DMSearchBar)