React - Object accessible throughout component

Question

So I'm attempting on using chatkit and they have the connnect function that we use.

However I'm trying to get the currentuser object, so I can use it in other functions. However, the object is always undefined and function is also undefined.

I'm using this sdk https://docs.pusher.com/chatkit/reference/javascript

I tried both const user and this.user.

import React, { Component } from 'react';
import ToggleButton from './ToggleButton';
import ChatBox from './ChatBox';
import { ChatManager, TokenProvider } from '@pusher/chatkit'



class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            chatbox: true,
            user: ''
        }
        const chatManager = new ChatManager({
            instanceLocator: 'somestring',
            userId: 'JaneLowTeu',
            tokenProvider: new TokenProvider({ url: 'https://us1.pusherplatform.io/services/chatkit_token_provider/v1/somestring/token' })
        })

        this.user = chatManager.connect() // <-- I want to save the object. Tried both this.user and const user =
            .then(currentUser => {

             console.log('Successful connection', currentUser)
                return currentUser;
            })
            .catch(err => {
             console.log('Error on connection', err)
    })
}




    joinRoom = () => {
        this.user.createRoom({ //<- When I click the button i want to createRoom but now it says user is undefined, function is undefined.
              name: 'general',
              private: true,
              addUserIds: ['craig', 'kate']
            }).then(room => {
              console.log(`Created room called ${room.name}`)
            })
            .catch(err => {
              console.log(`Error creating room ${err}`)
            })
    }



    showChatBox = () => {
        console.log(this.state.chatbox);
        if (this.state.chatbox) {
            return (<ChatBox />);
        }
    }

    toggleChatBox = () => {
        this.setState(prevState => ({ chatbox: !prevState.chatbox }))
    }
    render() {
        return (
            <div>
            <div 
            onClick={() => this.joinRoom()}
            >Join Room</div>

            <ToggleButton onClick={this.toggleChatBox}/>
            {this.showChatBox()}
            </div>
            )
    }
}

export default App;

Answer 1

connect returns a Promise not the currentUser:

// Connect does not return the `currentUser`
this.user = chatManager.connect()
  .then(currentUser => {
    // You need to access the `currentUser` here
    console.log('Successful connection', currentUser)
    return currentUser;
  })
  .catch(err => {
    console.log('Error on connection', err)
  })

You're almost there. You just need to access currentUser from the then function and update your component state:

constructor(props) {
  super(props);
  this.state = {
    chatbox: true,
    user: { }
  }
}

chatManager.connect()
  .then(currentUser => {
    this.setState({
      user: currentUser
    });
    console.log('Successful connection', currentUser);
    return currentUser;
  })
  .catch(err => {
    console.log('Error on connection', err)
  })

Then you can access this.state.user:

joinRoom = () => {
  this.state.user.createRoom({
     name: 'general',
     private: true,
     addUserIds: ['craig', 'kate']
   }).then(room => {
     console.log(`Created room called ${room.name}`)
   })
   .catch(err => {
     console.log(`Error creating room ${err}`)
   })
 }

Remember to change user from a string ('') to an empty object ({}).