How to ensure function with promise continues execution

Question

I have a function in a react-native application that is executed on a button press, it calls an async action, and then resets the navigation stack. the function looks something like this:

confirm = () => {
  this.props.addEvent(args);
  this.props.loading != true ? this.props.navigation.dispatch(popAction) : null; 
}

the addEvent() action looks like this:

export const addEvent = (event, msgId, convoId) => {
    return (dispatch) => {
        dispatch({ type: types.UPDATING });
        console.log('Firestore Write: (actions/agenda) => addEvent()');

        return firebase
            .firestore()
            .collection('events')
            .add({
                date: event.date,
                token: event.token,
                withName: event.sender
            })
            .then((success) => {
                updateReqToScheduled(msgId, { uid: event.schedulerId, convoId: convoId });
                dispatch({ type: types.EVENT_ADD_SUCCESS });
            })
            .catch((err) => {
                console.log('ERROR => addEvent()' + '\n' + err.message);
                dispatch({ type: types.EVENT_ADD_FAIL, info: err.message });
            });
    };
};

the pre-firebase log statement executes, the document is added, and the updateReqToScheduled function execution begins. it looks like:

const updateReqToScheduled = (id, reader) => {
    console.log('Firestore Write: (actions/agenda) => updateReqToScheduled()');
    return firebase
        .firestore()
        .collection('messages')
        .doc(id)
        .update({ read: true })
        .then((success) => {
            return updateConvoUnread(reader);
        })
        .catch((err) => {
            console.log(err.message);
        });
};

this function also executes completely. the updateConvoUnread() function looks like:

const updateConvoUnread = (reader) => {
    console.log('Firestore Read: (actions/agenda) => updateConvoUnread( 1 )');
    return firebase
        .firestore()
        .collection('messages')
        .where('userConvos', 'array-contains', reader.convoId)
        .where('sender', '!=', reader.uid)
        .where('read', '==', false)
        .get()
        .then((querySnapshot) => {
            console.log('PRECONDITION');
            if (querySnapshot.empty == true) {
                console.log('Firestore Write: (actions/agenda) => updateConvoUnread( 2 )');

                return firebase
                    .firestore()
                    .collection('user-conversations')
                    .doc(reader.convoId)
                    .update({ unread: false });
            } else {
                console.log('ELSE CLAUSE');
                //return;
            }
            console.log('POST - IF');
        })
        .catch((err) => {
            console.log('ERROR => updateConvoUnread(): ' + err.message);
        });
};

the very first pre-firebase log statement executes, but no other log statement executes, not in the then(), not in the catch() and not in the conditional statement, thus the function execution halts and the navigation stack reset isn't executed.

Can anyone advise on the situation?

Answer 1

Something was wrong with the firebase query. a name of the field was incorrect. it halted everything. once corrected the function finished as expected and the route was reset.

Answer 2

Use async on your function declarations and await on the firebase calls