Feature/solo chat

.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

package.json

@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "react-json-pretty": "^2.2.0",
     "react-scripts": "1.1.0"
   },
   "scripts": {
@@ -13,4 +14,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.css

@@ -17,8 +17,31 @@ body,
 .chatArea {
   flex-grow: 1;
   margin: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid rgb(138, 136, 134);
   background-color: #fafafa;
+  overflow: scroll;
+}
+
+.chatArea > div{
+  width: 60%;
+  margin-left: 10px
+}
+
+.loading {
+  height: 30px;
+  text-align: center;
+  font-family: system-ui
+}
+
+.chatArea > div pre{
+  padding: 10px;
+  border-radius: 25px;
+  border: 1px solid rgb(138, 136, 134);
+  white-space: pre-wrap;       /* css-3 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word; 
 }
 
 .messageBar {
@@ -27,11 +50,103 @@ body,
   margin: 10px;
 }
 
+.messageBar form {
+  display: flex;
+  width: 100%;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
 .textInput {
   flex-grow: 1;
   margin-right: 20px;
+  box-shadow: none;
+  margin-right: 10px;
+  padding: 0px;
+  box-sizing: border-box;
+  cursor: text;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  position: relative;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgb(138, 136, 134);
+  border-image: initial;
+  border-radius: 2px;
+  background: rgb(255, 255, 255);
+}
+
+.textInput:hover {
+  border-color: rgb(50, 49, 48);
 }
 
 .textInput input {
   width: 100%;
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  font-weight: 400;
+  box-shadow: none;
+  margin-top: 0px;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  margin-left: 0px;
+  padding-top: 0px;
+  padding-right: 8px;
+  padding-bottom: 0px;
+  padding-left: 8px;
+  box-sizing: border-box;
+  color: rgb(50, 49, 48);
+  width: 100%;
+  min-width: 0px;
+  text-overflow: ellipsis;
+  border-radius: 0px;
+  border-width: initial;
+  border-style: none;
+  border-color: initial;
+  border-image: initial;
+  background: none transparent;
+  outline: 0px;
 }
+
+.btn {
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  font-weight: 400;
+  box-sizing: border-box;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  vertical-align: top;
+  padding-top: 0px;
+  padding-right: 16px;
+  padding-bottom: 0px;
+  padding-left: 16px;
+  min-width: 80px;
+  height: 32px;
+  background-color: rgb(255, 255, 255);
+  color: rgb(50, 49, 48);
+  user-select: none;
+  outline: transparent;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgb(138, 136, 134);
+  border-image: initial;
+  text-decoration: none;
+  border-radius: 2px;
+}
+
+.btn:hover {
+  background-color: rgb(243, 242, 241);
+  color: rgb(32, 31, 30);
+}
+
+button:disabled,
+button:disabled:hover,
+button[disabled]{
+  border: 1px solid #999999;
+  background-color: #cccccc;
+  color: #666666;
+  cursor: not-allowed
+}

src/App.js

@@ -1,17 +1,67 @@
-import React, { Component } from "react";
-import MessageBar from "./MessageBar";
-import ChatArea from "./ChatArea";
-import "./App.css";
+import React, { useState } from "react"
+import MessageBar from "./components/MessageBar"
+import ChatArea from "./components/ChatArea"
+import useLoading from './components/Loading'
+import { get } from './services/http'
+import "./App.css"
 
-class App extends Component {
-    render() {
-        return (
-            <div className="app">
-                <ChatArea />
-                <MessageBar />
-            </div>
-        );
+const parseCommand = string => {
+  const [command, ...queries] = string.split(" ")
+  return {
+    command,
+    queries: queries.join(' ')
+  }
+}
+const isMatchedCommandPattern = ([firstCharacter]) => firstCharacter === '/'
+
+const getCurrentTime = () => Date()
+
+const App = () =>  {
+  const [isLoading, withLoading] = useLoading(false)
+  const [chatLogs, setChatLogs] = useState([])
+  const [disabledChat, setDisabledChat] = useState(false)
+
+  const commandFactory = {
+    '/time': () => getCurrentTime(),
+    '/goodbye': () => {
+      setDisabledChat(true)
+      return 'Gudbye!!!'
+    },
+    '/starwars': async (queries) => {
+      const response = await withLoading(() => get(`https://swapi.co/api/people/?search=${queries}`))
+      const { results: [firstResult = `Could not find ${queries} character !`] } = response
+      return firstResult
+    }
+  }
+
+  const isValidCommand = command => commandFactory[command]
+
+  const pushToChatLogs = async chat => {
+
+    if (isMatchedCommandPattern(chat)) {
+      const { command, queries } = parseCommand(chat)
+      if (isValidCommand(command)) {
+        const result = await commandFactory[command](queries)
+        if (result) {
+          setChatLogs([...chatLogs, result])
+        }
+        return
+      }
+      const error = 'Invalid command, please try again !'
+      setChatLogs([...chatLogs, error])
+      return
     }
+    setChatLogs([...chatLogs, chat])
+  }
+
+  return (
+    <div className="app">
+      <ChatArea chatLogs={chatLogs} />
+      {isLoading
+        ? <div className="loading">Loading ...</div>
+        : <MessageBar disabledChat={disabledChat} pushToChatLogs={pushToChatLogs} />}
+    </div>
+  )
 }
 
-export default App;
+export default App

src/components/ChatArea/index.js

@@ -0,0 +1,21 @@
+import React, { useEffect, useRef } from 'react'
+import JSONPretty from 'react-json-pretty'
+
+const ChatArea = ({ chatLogs }) =>  {
+  const messagesEndRef = useRef(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+  }
+
+  useEffect(scrollToBottom, [chatLogs])
+
+  return (
+    <div className="chatArea">
+      {chatLogs.map((chat, key) => <JSONPretty key={key} data={chat}></JSONPretty>)}
+      <div ref={messagesEndRef} />
+    </div>
+  )
+}
+
+export default ChatArea

src/components/Loading/index.js

@@ -0,0 +1,18 @@
+import { useState } from "react"
+
+function useLoading(status) {
+  const [loading, setLoading] = useState(status)
+  async function withLoading(callback) {
+    setLoading(true)
+    try {
+      const response = await callback()
+      setLoading(false)
+      return response
+    } catch (error) {
+      setLoading(false)
+      throw error
+    }
+  }
+  return [ loading, withLoading ]
+}
+export default useLoading

src/components/MessageBar/index.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react"
+import TextInput from '../TextInput'
+import SendButton from '../SendButton'
+
+const MessageBar = ({ pushToChatLogs, disabledChat }) =>  {
+  const [inputValue, setInputValue] = useState("")
+
+  const handleOnChangeTextInput = e => {
+    const { target: { value } } = e
+    setInputValue(value)
+  }
+
+  const onSubmit = e => {
+    e.preventDefault()
+    if (inputValue.length) {
+      pushToChatLogs(inputValue)
+      setInputValue('')
+    }
+  }
+
+  return (
+    <div className="messageBar">
+      <form onSubmit={onSubmit}>
+        <TextInput value={inputValue} onChange={handleOnChangeTextInput} />
+        <SendButton disabled={disabledChat} type='submit' />
+      </form>
+  </div>
+  )
+}
+
+export default MessageBar

src/components/SendButton/index.js

@@ -0,0 +1,7 @@
+import React from "react"
+
+const SendButton = ({ onClick, ...props }) =>  (
+  <button className="btn" {...props} onClick={onClick}>Send</button>
+)
+
+export default SendButton

src/components/TextInput/index.js

@@ -0,0 +1,13 @@
+import React from "react"
+
+const TextInput = ({ value, onChange}) =>  (
+  <div className="textInput">
+    <input
+      placeholder='Type a message'
+      value={value}
+      onChange={onChange}
+      type="text" />
+  </div>
+)
+
+export default TextInput