Refactorized React client side into folders, added chat with pubnub-react npm module

Author: jpdjere

client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "pubnub-react": "^1.0.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-scripts": "1.0.11"

client/public/index.html

@@ -10,6 +10,13 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+
+
+    <!-- Import Google Icon Font -->
+    <link rel="stylsheet" href="//fonts.googleapis.com/icon?family=Material+Icons" />
+    <!-- Import materialize.css -->
+    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" media="screen,projection" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -36,5 +43,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
   </body>
 </html>

client/src/App.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+const ChatHistory = (props) => {
+
+  // we’ll use the curly braces to output the result of the array map, since we’ll
+  //  be returning JSX in our array map.Wrap the <li> so that it looks like so:
+  //It’s important to add a ‘key’ attribute to the list item.
+  // Whenever you repeat values in JSX, React needs a unique identifier so that it can apply updates as needed to that DOM element.
+  // Since our messages have a timestamp down to the millisecond, this should be adequate.
+
+
+    return (
+        <ul className="collection">
+        { props.history.map((messageObj) => {
+          let imgURL = '//robohash.org/' + messageObj.Who +'?set=set2&bgset=bg2&size=70x70';
+          let messageDate = new Date(messageObj.When);
+          let messageDateTime = messageDate.toLocaleDateString() +' at ' + messageDate.toLocaleTimeString();
+          return (
+          <li className="collection-item avatar" key={ messageObj.When }>
+            <img src={ imgURL } alt={ messageObj.Who } className="circle" />
+            <div className="title">Anonymous robot #{ messageObj.Who }</div>
+            <div>{ messageObj.What }</div>
+            <div className="message-date">{ messageDateTime }</div>
+          </li>
+        ); })
+       }
+      </ul>
+    );
+
+}
+
+export default ChatHistory;

client/src/components/ChatHistory.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+export default class ChatInput extends React.Component {
+
+  constructor(props){
+    super(props);
+
+    this.onSubmit = (e) => {
+      e.preventDefault();
+      // Check if the message is empty
+      const message = this.refs.txtMessage.value;
+      if (message.length === 0) {
+        return;
+      }
+      // Build a message object and send it
+      const messageObj = {
+        Who: this.props.userID,
+        What: message,
+        When: new Date().valueOf(),
+      };
+      this.props.sendMessage(messageObj);
+
+      // Clear the input field and set focus
+      this.refs.txtMessage.value = '';
+      this.refs.txtMessage.focus();
+    };
+    this.userID=props.userID;
+    this.imgURL = '//robohash.org/' + props.userID + '?set=set2&bgset=bg2&size=70x70';
+
+  }
+
+
+
+  componentDidMount() {
+    this.refs.txtMessage.focus();
+  }
+
+
+  render() {
+    return (
+      <footer className="teal">
+        <form className="container" onSubmit={ this.onSubmit }>
+          <div className="row">
+            <div className="input-field col s10">
+              <i className="prefix mdi-communication-chat" />
+              <input type="text" ref="txtMessage" placeholder="Type your message" />
+              <span className="chip left">
+                <img src={ this.imgURL } alt="Robot 1"/>
+                <span>Anonymous robot #{ this.userID }</span>
+              </span>
+            </div>
+            <div className="input-field col s2">
+              <button type="submit" className="waves-effect waves-light btn-floating btn-large">
+                <i className="mdi-content-send" />
+              </button>
+            </div>
+          </div>
+        </form>
+      </footer>
+    );
+  }
+}

client/src/components/ChatInput.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import ChatInput from '../components/ChatInput';
+import ChatHistory from '../components/ChatHistory';
+import PubNubReact from 'pubnub-react';
+import './App.css';
+
+class App extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      userID: Math.round(Math.random() * 1000000).toString(),
+      history: [],
+    };
+
+    this.PubNubReact = new PubNubReact({
+      publishKey: 'pub-c-16087bca-e20e-4ab4-9047-725901d50ffe',
+      subscribeKey: 'sub-c-070667ae-8848-11e7-953d-ce3f2a1d1460'
+    });
+
+    this.sendMessage = (message) => {
+      // for now this will let us know things work.  `console` will give us a
+      // warning though
+      console.log('sendMessage', message);
+      this.PubNubReact.publish({
+        channel: 'ReactChat',
+        message: message,
+      });
+    }
+    this.replyMessage = (message) => {
+      fetch('/chat')
+         .then(res => res.json())
+         .then(users => console.log({ users }));
+      console.log('replyMessage', message);
+      // this.PubNubReact.publish({
+      //   channel: 'ReactChat',
+      //   message: message,
+      // });
+    }
+
+  }
+
+  componentWillMount() {
+    this.PubNubReact.init(this);
+    this.PubNubReact.subscribe({
+      channels: ['ReactChat'],
+      withPresence: true
+    });
+
+    this.PubNubReact.getMessage('ReactChat', (message) => {
+      console.log("message is:", message);
+      this.setState({
+        history: this.state.history.concat(message.message)
+      })
+      console.log(this.state.history);
+    });
+
+  }
+
+  componentDidMount() {
+
+    fetch('/users')
+       .then(res => res.json())
+       .then(users => console.log({ users }));
+
+
+  }
+
+  render() {
+    return (
+      <div>
+        <ChatHistory history={ this.state.history } />
+        <ChatInput userID={ this.state.userID } sendMessage={ this.sendMessage } replyMessage={this.replyMessage}/>
+      </div>
+    );
+  }
+}
+
+export default App;

client/src/App.css renamed to client/src/containers/App.css

@@ -1,5 +1,31 @@
-body {
-  margin: 0;
+/* Application specific CSS */
+
+/* ChatInput styles */
+footer {
+  color: white;
+  position: fixed;
   padding: 0;
-  font-family: sans-serif;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 130px;
+}
+footer .input-field input,
+button {
+  border-color: #FFFFFF;
+}
+.chip {
+  font-style: italic;
+}
+
+/* ChatHistory styles */
+.collection {
+ margin-bottom:130px;
+ margin-top: -1px;
+}
+.message-date {
+  color: #585858;
+}
+body {
+  background: #EEEEEE;
 }

client/src/containers/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './containers/App';
 import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));