Chat.diff

// ./src/Chat.js

import React, { Component } from 'react'
import { ChatManager, TokenProvider } from '@pusher/chatkit'
+import MessageList from './MessageList'

class Chat extends React.Component {
  state = {
-   currentUser: null
+   currentUser: null,
+   currentRoom: {},
+   messages: []
  }

  componentDidMount() {
    const chatkit = new ChatManager({
      instanceLocator: 'YOUR INSTANCE LOCATOR',
      userId: this.props.currentId,
      tokenProvider: new TokenProvider({
        url: 'YOUR TOKEN PROVIDER URL'
      })
    })

    chatkit
      .connect()
      .then(currentUser => {
        this.setState({ currentUser })
        console.log('Bleep bloop 🤖 You are connected to Chatkit')
+       return currentUser.subscribeToRoom({
+         roomId: 8434070, // Replace with YOUR ROOM ID
+         messageLimit: 100,
+         hooks: {
+           onNewMessage: message => {
+             this.setState({
+              messages: [...this.state.messages, message]
+           })
+         }
+       }
+     })
+   })
+   .then(currentRoom => {
+     this.setState({ currentRoom })
    })
    .catch(error => console.error('error', error))
  }

  render() {
    return (
-     <div>
-       <h1>Chat</h1>
-      </div>
+      <div className="wrapper">
+        <div className="chat">
+          <MessageList messages={this.state.messages} />
+        </div>
+      </div>
    )
  }
}

export default Chat