How to import Chutkit in React?

W

Whoop2018-07-30 13:35:45

React

Whoop, 2018-07-30 13:35:45

Good afternoon. I want to build a messenger using Chatkit and React. But I get this error: 'Chatkit' is not defined no-undef. How to solve a similar problem?? I attach the code

/index.js/

import React from "react";
import ReactDOM from "react-dom";






const testToken = "https://us1.pusherplatform.io/services/chatkit_token_provider/v1/51cb3879-c401-488b-bc31-bfd35d881ffd/token"
const instanceLocator = "v1:us1:51cb3879-c401-488b-bc31-bfd35d881ffd"
const roomId = 12775221
const username = 'clever'

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            messages: []
        }
        this.sendMessage = this.sendMessage.bind(this)
    } 
    
    componentDidMount() {
        const chatManager = new Chatkit.ChatManager({
            instanceLocator: instanceLocator,
            userId: 'janedoe',
            tokenProvider: new Chatkit.TokenProvider({
                url: testToken
            })
        })
        
        chatManager.connect()
        .then(currentUser => {
            this.currentUser = currentUser
            this.currentUser.subscribeToRoom({
            roomId: roomId,
            hooks: {
                onNewMessage: message => {

                    this.setState({
                        messages: [...this.state.messages, message]
                    })
                }
            }
        })
      })
    }
    
    sendMessage(text) {
        this.currentUser.sendMessage({
            text,
            roomId: roomId
        })
    }
    
    render() {
        return (
            <div className="app">
              <Title />
              <MessageList 
                  roomId={this.state.roomId}
                  messages={this.state.messages} />
              <SendMessageForm
                  sendMessage={this.sendMessage} />
            </div>
        );
    }
}

class MessageList extends React.Component {
    render() {
        return (
            <ul className="message-list">
                {this.props.messages.map((message, index) => {
                    return (
                      <li  key={message.id} className="message">
                        <div>{message.senderId}</div>
                        <div>{message.text}</div>
                      </li>
                    )
                })}
            </ul>
        )
    }
}

class SendMessageForm extends React.Component {
    constructor() {
        super()
        this.state = {
            message: ''
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    
    handleChange(e) {
        this.setState({
            message: e.target.value
        })
    }
    
    handleSubmit(e) {
        e.preventDefault()
        this.props.sendMessage(this.state.message)
        this.setState({
            message: ''
        })
    }
    
    render() {
        return (
            <form
                onSubmit={this.handleSubmit}
                className="send-message-form">
                <input
                    onChange={this.handleChange}
                    value={this.state.message}
                    placeholder="Type your message and hit ENTER"
                    type="text" />
            </form>
        )
    }
}

function Title() {
  return <p className="title">My awesome chat app</p>
}

ReactDOM.render(<App />, document.getElementById('root'));

/index.html/

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
        <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@pusher/chatkit"></script>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Roman Aleksandrovich, 2018-07-30
@RomReed

https://github.com/pusher/build-a-slack-clone-with...
Step 6. Connect to your Chatkit instance
import Chatkit from '@pusher/chatkit'