Implement solo chat

src/App.js

@@ -4,11 +4,23 @@ import ChatArea from "./ChatArea";
 import "./App.css";
 
 class App extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { messages: [] };
+    }
+    sendMessageHandler(newMessage) {
+        this.setState({
+            messages: [
+                ...this.state.messages,
+                newMessage
+            ]
+        });
+    }
     render() {
         return (
             <div className="app">
-                <ChatArea />
-                <MessageBar />
+                <ChatArea data={this.state.messages} />
+                <MessageBar onSendMessage={this.sendMessageHandler.bind(this)} />
             </div>
         );
     }

src/ChatArea.js

@@ -2,7 +2,18 @@ import React, { Component } from "react";
 
 class ChatArea extends Component {
 	render() {
-		return <div className="chatArea" />;
+		var data = this.props.data || [];
+		return (
+			<div className="chatArea">
+				{data.map(function (message, i) {
+					return (
+						<p key={i}>
+							{message}
+						</p>
+					)
+				})}
+			</div>
+		)
 	}
 }
 

src/MessageBar.js

@@ -1,13 +1,77 @@
 import React, { Component } from "react";
 import TextInput from "./TextInput";
 import SendButton from "./SendButton";
+import PropTypes from "prop-types";
 
 class MessageBar extends Component {
+    static propTypes = {
+        onSendMessage: PropTypes.func
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            message: '',
+            isDisabled: false
+        };
+    }
+
+    cleanUp() {
+        this.setState({
+            message: ''
+        });
+    }
+
+    async onSendMessageHandler() {
+        if (this.state.isDisabled) {
+            return;
+        }
+
+        if (this.state.message === '/time') {
+            this.props.onSendMessage && this.props.onSendMessage((new Date()).toString());
+        } else if (this.state.message === '/goodbye') {
+            this.setState({
+                isDisabled: true
+            });
+            this.props.onSendMessage && this.props.onSendMessage('Goodbye. Have a nice day.');
+
+        } else if (this.state.message.startsWith('/starwars')) {
+            var character = this.state.message.split(' ')[1];
+            var people = await fetch('https://swapi.co/api/people/?search=' + character);
+            var json = await people.json();
+            var characterName = '';
+            characterName = json.results && json.results[0] && json.results[0].name;
+            if (characterName) {
+                this.props.onSendMessage && this.props.onSendMessage(characterName);
+            } else {
+                this.props.onSendMessage && this.props.onSendMessage('Your character is not available.');
+            }
+        } else if (this.state.message.startsWith('/')) {
+            this.props.onSendMessage && this.props.onSendMessage('Sorry. This command is not available.');
+        } else {
+            this.state.message && this.props.onSendMessage && this.props.onSendMessage(this.state.message);
+        }
+
+        this.cleanUp();
+        this.refs.messageInput.cleanUp();
+    }
+
+    onChangeHandler(e) {
+        this.setState({
+            message: e.target.value
+        });
+    }
+
     render() {
         return (
             <div className="messageBar">
-                <TextInput />
-                <SendButton />
+                <TextInput ref="messageInput"
+                    onChange={this.onChangeHandler.bind(this)}
+                    onSendMessage={this.onSendMessageHandler.bind(this)}
+                    isDisabled={this.state.isDisabled} />
+                <SendButton
+                    onSendMessage={this.onSendMessageHandler.bind(this)}
+                    isDisabled={this.state.isDisabled} />
             </div>
         );
     }

src/SendButton.js

@@ -1,8 +1,14 @@
 import React, { Component } from "react";
+import PropTypes from 'prop-types';
 
 class SendButton extends Component {
+	static propTypes = {
+		onSendMessage: PropTypes.func,
+		isDisabled: PropTypes.bool
+	}
+
 	render() {
-		return <button>Send</button>;
+		return <button onClick={this.props.onSendMessage} disabled={this.props.isDisabled}>Send{this.props.isDisabled}</button>;
 	}
 }
 

src/TextInput.js

@@ -1,10 +1,39 @@
 import React, { Component } from "react";
+import PropTypes from 'prop-types';
 
 class MessageBar extends Component {
+	static propTypes = {
+		onChange: PropTypes.func,
+		onSendMessage: PropTypes.func,
+	}
+
+	constructor(props) {
+		super(props);
+		this.state = { message: '' };
+	}
+
+	cleanUp() {
+		this.setState({ message: '' });
+	}
+
+	onChangeHanlder(e) {
+		this.props.onChange && this.props.onChange(e);
+		this.setState({ message: e.target.value });
+	}
+
+	onKeyPressHanlder(e) {
+		if (e.key === 'Enter') {
+			this.props.onSendMessage && this.props.onSendMessage();
+		}
+	}
+
 	render() {
 		return (
 			<div className="textInput">
-				<input type="text" />
+				<input type="text" value={this.state.message}
+					disabled={this.props.isDisabled}
+					onChange={this.onChangeHanlder.bind(this)}
+					onKeyPress={this.onKeyPressHanlder.bind(this)} />
 			</div>
 		);
 	}