Vanilla JS vs React Class Binding for Listener Functions

Question

I am following some api docs where the only code examples are in vanilla JS but I am trying to use them in React Native. They give fully functional React Native apps for reference but I can't figure out how to repurpose the methods for my needs.

In the api docs it gives the example:

ConnectyCube.videochat.onCallListener = function(session, extension) {

  // here show some UI with 2 buttons - accept & reject, and by accept -> run the following code:
  var extension = {};
  session.accept(extension);
};

ConnectyCube is an module import and I need to use this particular method in React Native. In the app they provide as an example, it looks like this in a class component:

class AppRoot extends React.Component {

    componentDidMount() {
        ConnectyCube.init(...config)

        this.setupListeners();
    }

    setupListeners() {
        ConnectyCube.videochat.onCallListener = this.onCallListener.bind(this);
        ConnectyCube.videochat.onUserNotAnswerListener = this.onUserNotAnswerListener.bind(this);
        ConnectyCube.videochat.onAcceptCallListener = this.onAcceptCallListener.bind(this);
        ConnectyCube.videochat.onRemoteStreamListener = this.onRemoteStreamListener.bind(this);
        ConnectyCube.videochat.onRejectCallListener = this.onRejectCallListener.bind(this);
        ConnectyCube.videochat.onStopCallListener = this.onStopCallListener.bind(this);
        ConnectyCube.videochat.onSessionConnectionStateChangedListener = this.onSessionConnectionStateChangedListener.bind(this);
    }

    onCallListener(session, extension) {
        console.log('onCallListener, extension: ', extension);

        const {
            videoSessionObtained,
            setMediaDevices,
            localVideoStreamObtained,
            callInProgress
        } = this.props

        videoSessionObtained(session);

        Alert.alert(
            'Incoming call',
            'from user',
            [
                {text: 'Accept', onPress: () => {
                    console.log('Accepted call request');

                    CallingService.getVideoDevices()
                        .then(setMediaDevices);

                    CallingService.getUserMedia(session).then(stream => {
                        console.log(stream)
                        localVideoStreamObtained(stream);
                        CallingService.acceptCall(session);
                        callInProgress(true);
                    });
                }},
                {
                    text: 'Reject',
                    onPress: () => {
                        console.log('Rejected call request');
                        CallingService.rejectCall(session);
                    },
                    style: 'cancel',
                },
            ],
            {cancelable: false},
        );
    }

    onUserNotAnswerListener(session, userId) {
        CallingService.processOnUserNotAnswer(session, userId);

        this.props.userIsCalling(false);
    }

    onAcceptCallListener(session, userId, extension) {
        CallingService.processOnAcceptCallListener(session, extension);
        this.props.callInProgress(true);
    }

    onRemoteStreamListener(session, userID, remoteStream){
        this.props.remoteVideoStreamObtained(remoteStream, userID);
        this.props.userIsCalling(false);
    }

    onRejectCallListener(session, userId, extension){
        CallingService.processOnRejectCallListener(session, extension);

        this.props.userIsCalling(false);

        this.props.clearVideoSession();
        this.props.clearVideoStreams();
    }

    onStopCallListener(session, userId, extension){
        this.props.userIsCalling(false);
        this.props.callInProgress(false);

        this.props.clearVideoSession();
        this.props.clearVideoStreams();

        CallingService.processOnStopCallListener(session, extension);
    }

    onSessionConnectionStateChangedListener(session, userID, connectionState){
        console.log('onSessionConnectionStateChangedListener', userID, connectionState);
    }

    render() {
        console.log('hey');
        return <AppRouter />
    }
}

function mapDispatchToProps(dispatch) {
    return {
        videoSessionObtained: videoSession => dispatch(videoSessionObtained(videoSession)),
        userIsCalling: isCalling => dispatch(userIsCalling(isCalling)),
        callInProgress: inProgress => dispatch(callInProgress(inProgress)),
        remoteVideoStreamObtained: remoteStream => dispatch(remoteVideoStreamObtained(remoteStream)),
        localVideoStreamObtained: localStream => dispatch(localVideoStreamObtained(localStream)),
        clearVideoSession: () => dispatch(clearVideoSession()),
        clearVideoStreams: () => dispatch(clearVideoStreams()),
        setMediaDevices: mediaDevices => dispatch(setMediaDevices(mediaDevices)),
        setActiveVideoDevice: videoDevice => dispatch(setActiveVideoDevice(videoDevice))
    }
}

export default connect(null, mapDispatchToProps)(AppRoot)

I want to set up the listeners but I am not using classes like the one in the component above called CallingService or using the same redux actions - I'm taking a functional approach. When I paste the code from the docs in to a service which is just a normal function, I get the error: Cannot set property 'onCallListener' of undefined.

Any ideas welcome!

Answer 1

componentDidMount() {
    document.addEventListener("keyup",this.login,false);
}

 login = (event) => {

      console.log('i have been activated on keyup event from the componentDidMount()');
      
 };