Implement Solo chatbox

package.json

@@ -3,14 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
+    "immutable": "^3.8.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-scripts": "1.1.0"
+    "react-redux": "^5.1.0",
+    "react-scripts": "1.1.0",
+    "redux": "^4.0.1",
+    "redux-immutable": "^4.0.0",
+    "reselect": "^4.0.0",
+    "styled-components": "^4.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.css

@@ -9,17 +9,32 @@ body,
   padding: 0;
 }
 
+body * {
+  box-sizing: border-box;
+}
+
 .app {
   display: flex;
   flex-direction: column;
+  position: relative;
+  padding-bottom: 40px;
 }
 
 .chatArea {
   flex-grow: 1;
+  flex: 1;
+  overflow: auto;
   margin: 10px;
   border: 1px solid #ccc;
   background-color: #fafafa;
 }
+.chatArea > p {
+  padding: 12px;
+  margin: 0;
+}
+.chatArea > p:nth-of-type(even) {
+  background: #eee;
+}
 
 .messageBar {
   display: flex;

src/App.js

@@ -1,17 +1,114 @@
 import React, { Component } from "react";
-import MessageBar from "./MessageBar";
-import ChatArea from "./ChatArea";
+import { connect } from 'react-redux';
+import axios from 'axios';
+
+import { commands } from './constants';
+import MessageBar from "./components/MessageBar";
+import ChatArea from "./components/ChatArea";
+import ErrorMessage from "./components/ErrorMessage";
 import "./App.css";
+import { IDGenerator } from './utils';
+import { addMessage, updateMessage, stopApplication } from './actions';
 
 class App extends Component {
-    render() {
-        return (
-            <div className="app">
-                <ChatArea />
-                <MessageBar />
-            </div>
-        );
+  constructor(props) {
+    super(props);
+    this.state = {
+      errorMessage: ''
+    }
+  }
+  searchForCharacter = (messageId, query) => {
+    axios.get(`https://swapi.co/api/people/?search=${query}`).then(data => {
+      if(data) {
+        const { results } = data.data;
+        if (Array.isArray(results) && results.length) {
+          this.props.updateMessage(messageId, `Search results for \`${query}\`: ${results[0].name}`);
+        }
+        else {
+          this.props.updateMessage(messageId, `No results for \`${query}\``);
+        }
+      }
+    }, err => {
+      this.props.updateMessage(messageId, `There is an error when searching \`${query}\``);
+    });
+  }
+  messageConverter = (message) => {
+    let messageResults = null;
+    const messageArray = message.split(' ');
+    const messageCommand = messageArray.shift();
+    const id = IDGenerator();
+
+    const firstChar = messageCommand[0];
+    if (firstChar === '/') {
+      message = messageCommand.substring(1);
+      if (commands.indexOf(message) > -1) {
+        switch(message) {
+          case 'time':
+            messageResults = `Current time: ${new Date().toString()}`;
+            break;
+          case 'starwars':
+            const query = messageArray.join(' ');
+            if (!query.replace(/ /g,'')) {
+              messageResults = null;
+              this.setState({ errorMessage: 'Please enter a query' });
+              break;
+            }
+            this.searchForCharacter(id, query);
+            messageResults = `Searching character by name: ${query}`;
+            break;
+          case 'goodbye':
+            this.props.stopApplication();
+            messageResults = 'Bye! See you again.';
+            break;
+          default: 
+            messageResults = message;
+            break;
+        }
+      }
+      else {
+        messageResults = `Command \`${message}\` does not exist.`;
+      }
+    }
+    else {
+      messageResults = message;
+    }
+    if (!messageResults) return null;
+    return { id, content: messageResults };
+  }
+  onSubmit = (message) => {
+    this.setState({ errorMessage: '' });
+    const finalMessage = this.messageConverter(message);
+    if (finalMessage) {
+      this.props.addMessage(finalMessage);
+      return true;
     }
+    return false;
+
+  }
+  render() {
+    return (
+      <div className="app">
+        <ChatArea onSubmit={this.onSubmit} />
+        <MessageBar onSubmit={this.onSubmit} />
+        <ErrorMessage message={this.state.errorMessage} />
+      </div>
+    );
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    addMessage(message) {
+      dispatch(addMessage(message));
+    },
+    updateMessage(messageId, content) {
+      dispatch(updateMessage(messageId, content));
+    },
+    stopApplication() {
+      dispatch(stopApplication());
+    },
+  };
 }
 
-export default App;
+export default connect(null, mapDispatchToProps)(App);
+

src/actions.js

@@ -0,0 +1,11 @@
+import { STOP_APPLICATION, ADD_MESSAGE, UPDATE_MESSAGE } from './constants';
+
+export function stopApplication() {
+  return { type: STOP_APPLICATION };
+}
+export function addMessage(message) {
+  return { type: ADD_MESSAGE, message };
+}
+export function updateMessage(messageId, content) {
+  return { type: UPDATE_MESSAGE, messageId, content };
+}

src/components/ChatArea.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import PropTypes from 'prop-types';
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+import { selectApplicationStopped, selectMessages } from '../selectors';
+import { stopApplication } from '../actions';
+
+class ChatArea extends Component {
+  render() {
+    const { messages } = this.props;
+    if (typeof messages === 'undefined') return null;
+    const messagesDisplay = messages.map((item, itemIndex) => <p key={`message-${itemIndex}`}>{ item.content }</p>)
+    return <div className="chatArea">
+      { messagesDisplay }
+    </div>
+  }
+}
+
+ChatArea.defaultProps = {
+  contents: []
+};
+
+ChatArea.propTypes = {
+  contents: PropTypes.array
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    stopApplication() {
+      dispatch(stopApplication());
+    }
+  };
+}
+
+const mapStateToProps = createStructuredSelector({
+  applicationStopped: selectApplicationStopped(),
+  messages: selectMessages()
+});
+export default connect(mapStateToProps, mapDispatchToProps)(ChatArea);

src/components/ErrorMessage.js

@@ -0,0 +1,25 @@
+import React from "react";
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const StyledMessage = styled.div`
+  color: red;
+  font-size: 12px;
+  padding-left: 12px;
+  position: absolute;
+  bottom: 30px;
+`;
+const ErrorMessage = props => {
+  const { message } = props;
+  return <StyledMessage>{ message }</StyledMessage>
+}
+
+ErrorMessage.defaultProps = {
+  message: ' '
+};
+
+ErrorMessage.propTypes = {
+  message: PropTypes.string
+};
+export default ErrorMessage;
+