timeedit · datphamba · Oct 30, 2018 · Oct 30, 2018 · Oct 30, 2018 · Oct 30, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "moment": "^2.22.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-scripts": "1.1.0"
@@ -13,4 +14,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -4,37 +4,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Solo Chat</title>
   </head>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins');
+
 html,
 body,
 #root,
@@ -7,6 +9,8 @@ body,
 
   margin: 0;
   padding: 0;
+
+  font-family: 'sans-serif';
 }
 
 .app {
@@ -25,13 +29,89 @@ body,
   display: flex;
   flex-direction: row;
   margin: 10px;
+  border-top: 1px solid #c3c3c3
 }
 
+.chatContent {
+	width: 100%;
+	height: 100%;
+	background-color: white;
+	overflow: hidden;
+}
+
+.chatContent .titleHeader {
+	font-family: 'Poppins', sans-serif;
+	background-color: #2979FF;
+	color: #FFF;
+	margin: 0;
+	height: 40px;
+	font-size: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.chatContent .chats {
+	box-sizing: border-box;
+	padding: 0 20px;
+	margin: 10px 0 0;
+	height: 90%;
+	overflow-y: scroll;
+}
+
+.chatContent .chats .chat {
+	background: #f3f3f3;
+	position: relative;
+	padding: 5px 13px;
+	font-size: 14px;
+	border-radius: 10px;
+	list-style: none;
+	float: left;
+	clear: both;
+	margin: 10px 20px;
+	max-width: 200px;
+}
+
+.chatContent .chats .chat img {
+	width: 25px;
+	height: 25px;
+	border-radius: 50%;
+	position: absolute;
+	top: -10px;
+	left: -30px;
+}
+
+.chatContent .chats .chat a {
+	text-decoration: none;
+	color:#3498DB;
+}
+
+
 .textInput {
-  flex-grow: 1;
-  margin-right: 20px;
+	height: 70px;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	bottom: 0;
+	clear: both;
+	left: 0;
 }
 
-.textInput input {
+.messageBar .textInput input {
+  background: rgba(255, 255, 255, 0.5);
+  outline: 0;
+  padding: 0 5px;
+  border: none;
+  margin-left: 10px;
+  height: 40px;
   width: 100%;
+  box-sizing: border-box;
+  font-size: 15px;
 }
+
+.messageBar button {
+  height: 30px;
+  margin: 20px 0;
+}
+
diff --git a/src/App.js b/src/App.js
@@ -4,11 +4,24 @@ import ChatArea from "./ChatArea";
 import "./App.css";
 
 class App extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+			messages: []};
+    }
+    sendMessageHandler (message) {
+        this.setState({
+            messages: [
+                ...this.state.messages,
+                message
+            ]
+        });
+    }
     render() {
         return (
             <div className="app">
-                <ChatArea />
-                <MessageBar />
+                <ChatArea messages={this.state.messages}/>
+                <MessageBar onSendMessage={this.sendMessageHandler.bind(this)} />
             </div>
         );
     }

diff --git a/src/ChatArea.js b/src/ChatArea.js
@@ -1,9 +1,31 @@
 import React, { Component } from "react";
 
+import PropTypes from 'prop-types';
+import Message from './Messager';
+
 class ChatArea extends Component {
+
+	static propTypes = {
+        messages: PropTypes.array
+	}
+
 	render() {
-		return <div className="chatArea" />;
+		const username = "Dat Pham";
+		const messages = this.props.messages || [];
+        return (
+			<div className="chatContent">
+				<p className="titleHeader">TimeEdit Chatbox</p>
+	            <ul className="chats" ref="chats">
+	                {
+						messages.map((data, i) => 
+	                        <Message key={i} chat={data} user={username} />
+	                    )
+	                }
+	            </ul>
+            </div>
+        );
 	}
 }
 
 export default ChatArea;
+
diff --git a/src/MessageBar.js b/src/MessageBar.js
@@ -1,13 +1,105 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import TextInput from "./TextInput";
 import SendButton from "./SendButton";
+import moment from 'moment';
 
 class MessageBar extends Component {
+    static propTypes = {
+      onSendMessage: PropTypes.func
+	}
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            message: '',
+            disabled: false
+        };
+	}
+
+	fetchSWAPI = async (characterName) => {
+        try {
+
+            const res = await fetch(
+                `https://swapi.co/api/people/?search=${characterName}`
+			);
+
+			const response = await res.json();
+
+			if (!res.ok) {
+				this.props.onSendMessage && this.props.onSendMessage('No result found !');
+			} else {
+				if(response.count === 0) {
+					this.props.onSendMessage && this.props.onSendMessage(`Starwars character "${ characterName }" not found !`);
+				} else {
+					this.props.onSendMessage && this.props.onSendMessage(`/starwars "${ characterName }"`);
+					this.props.onSendMessage && this.props.onSendMessage(`Fullname: ${response.results[0].name}`);
+					this.props.onSendMessage && this.props.onSendMessage(`Gender: ${response.results[0].gender}`);
+					this.props.onSendMessage && this.props.onSendMessage(`Height: ${response.results[0].height}`);
+					this.props.onSendMessage && this.props.onSendMessage(`Mass: ${response.results[0].mass}`);
+				}
+			}
+
+        } catch (e) {
+			this.props.onSendMessage && this.props.onSendMessage("Sorry, Something went wrong !");
+			throw e;
+		}
+	};
+
+    async sendMessageHandler () {
+
+		const starwarsCommand = new RegExp(/^\s*\/starwars\s*(.*)$/g);
+
+        if (this.state.disabled) {
+            return;
+        }
+        if (/^\s*\/time\s*$/g.test(this.state.message)) {
+			this.props.onSendMessage && this.props.onSendMessage(`/time`);
+            this.props.onSendMessage && this.props.onSendMessage(moment(new Date()).format('lll'));
+        } else if (/^\s*\/goodbye\s*$/g.test(this.state.message)) {
+			this.props.onSendMessage && this.props.onSendMessage(`/goodbye`);
+			this.props.onSendMessage && this.props.onSendMessage('Goodbye, Have a nice day !');
+            this.setState({
+				disabled: true
+            });
+        } else if (starwarsCommand.test(this.state.message)) {
+			starwarsCommand.lastIndex = 0;
+            const matches = starwarsCommand.exec(this.state.message);
+
+            if (matches && matches[1]) {
+                const characterName = matches[1];
+				this.fetchSWAPI(characterName);
+            } else {
+				this.props.onSendMessage && this.props.onSendMessage(`Starwars character "${ matches[1] }" not found !`);
+			}
+        } else if (this.state.message.startsWith('/')) {
+            this.props.onSendMessage && this.props.onSendMessage('Sorry, This command still not supported yet !');
+        } else {
+            !!this.state.message && this.props.onSendMessage && this.props.onSendMessage(this.state.message);
+		}
+
+        this.setState({
+            message: ''
+		});
+
+        this.refs.textInput.cleanUp();
+	}
+
+    onChangeHandler (e) {
+        this.setState({
+            message: e.target.value
+        });
+	}
+
     render() {
         return (
             <div className="messageBar">
-                <TextInput />
-                <SendButton />
+				<TextInput ref="textInput" 
+						   onChange={this.onChangeHandler.bind(this)}
+						   onSendMessage={this.sendMessageHandler.bind(this)}/>
+
+				<SendButton onSendMessage={this.sendMessageHandler.bind(this)} 
+							disabled={this.state.disabled}/>
             </div>
         );
     }

diff --git a/src/Messager.js b/src/Messager.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Message = ({chat}) => (
+	<li className="chat left" >
+		<img src="https://scontent.fsgn5-2.fna.fbcdn.net/v/t1.0-9/40504683_2170866303170588_483742712009326592_n.jpg?_nc_cat=107&_nc_ht=scontent.fsgn5-2.fna&oh=619339b7e2e2d2a238939abdecc50a5c&oe=5C88750F" />
+        {chat}
+    </li>
+);
+
+export default Message;
diff --git a/src/SendButton.js b/src/SendButton.js
@@ -1,8 +1,15 @@
 import React, { Component } from "react";
+import PropTypes from 'prop-types';
 
 class SendButton extends Component {
+    static propTypes = {
+        onSendMessage: PropTypes.func,
+        disabled: PropTypes.bool
+	}
+
+
 	render() {
-		return <button>Send</button>;
+		return <button onClick={this.props.onSendMessage} disabled={this.props.disabled}>Send</button>;
 	}
 }
 

diff --git a/src/TextInput.js b/src/TextInput.js
@@ -1,10 +1,35 @@
 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 = {value: ''};
+    }
+    cleanUp () {
+        this.setState({value: ''});
+    }
+    onChangeHandler (e) {
+        this.props.onChange && this.props.onChange(e);
+        this.setState({value: e.target.value});
+    }
+    onKeyPressHandler (e) {
+        if (e.key === 'Enter') {
+            this.props.onSendMessage && this.props.onSendMessage();
+        }
+    }
 	render() {
 		return (
 			<div className="textInput">
-				<input type="text" />
+				<input type="text" 
+						placeholder="Type a message ..."
+						value={this.state.value}
+                		onChange={this.onChangeHandler.bind(this)}
+                		onKeyPress={this.onKeyPressHandler.bind(this)} />
 			</div>
 		);
 	}