bookercodes

// ./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,

bookercodes

// ./src/MessageList.js

import React, { Component } from 'react'
import {
  ListView,
  ListViewSection,
  ListViewSectionHeader,
  ListViewRow,
  Text
} from 'react-desktop/macOs'

bookercodes

/* ./src/index.css */

body {
  font-family:  BlinkMacSystemFont, sans-serif;
  margin: 0;
  padding: 0;
}

.username-form {
  padding: 10px;

bookercodes

// ./src/Chat.js

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

class Chat extends Component {
  state = {
    currentUser: null
  }

bookercodes

// ./src/App.js

import React, { Component } from 'react'
import UsernameForm from './UsernameForm'
+import Chat from './Chat'

class App extends Component {
  state = {
    currentUsername: null,
-   currentId: null

bookercodes

// ./src/Chat.js

import React, { Component } from 'react'

class Chat extends Component {
  render() {
    return (
      <div>
        <h1>Chat</h1>
      </div>

bookercodes

// ./src/App.js

import React, { Component } from 'react'
import UsernameForm from './UsernameForm'

class App extends Component {
  state = {
    currentUsername: null,
    currentId: null
  }

bookercodes

// ./src/UsernameForm.js

import React, { Component } from 'react'
import { TextInput } from 'react-desktop/macOs'
import { Button } from 'react-desktop/macOs'

class UsernameForm extends Component {
  constructor() {
    super()
    this.state = {

bookercodes

// ./server.js

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const Chatkit = require('pusher-chatkit-server')

const chatkit = new Chatkit.default({
  instanceLocator: 'YOUR INSTANCE LOCATOR UNDER THE "CREDENTIALS" HEADER',
  key:

bookercodes

<!-- Global site tag (gtag.js) - Google AdWords: 955504922 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-955504922"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-955504922');
</script>