1

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)


L_Fr
  • 101
  • 1
  • 8
  • 2
    Not the problem but relevant: [What is the explicit promise construction antipattern and how do I avoid it?](https://stackoverflow.com/q/23803743) – VLAZ Oct 26 '21 at 05:46

0 Answers0