data-mining-code · 8BitJonny · Mar 15, 2018 · Feb 23, 2018 · Feb 23, 2018 · Feb 26, 2018
diff --git a/components/input.js b/components/input.js
@@ -0,0 +1,44 @@
+const html = require('choo/html')
+const Component = require('nanocomponent')
+const fetch = window.fetch
+
+class Input extends Component {
+  constructor (state, emit) {
+    super()
+    this.emit = emit
+    this.state = state
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  createElement () {
+    return html`
+      <input
+         class="f3 f2-l helvetica bt-0 bl-0 br-0 bb-0 pb2 w-100"
+         style="border-radius: 10px; padding: 5px;"
+         placeholder="ask me something"
+         autofocus
+         onkeyup=${this.handleSubmit}
+      />
+    `
+  }
+
+  handleSubmit (evt) {
+    if (evt.key === 'Enter') {
+      this.emit('messages:add', {
+        text: evt.target.value,
+        response: false
+      })
+      fetch(`http://${process.env.HOSTNAME}:3030/api/request?input=${evt.target.value}&&id=${this.state.id}`)
+        .then(res => res.json())
+        .then(body => {
+          this.state.id = body.id
+          this.emit('messages:add', {
+            text: body.text,
+            response: true
+          })
+        })
+    }
+  }
+}
+
+module.exports = Input
diff --git a/components/message.js b/components/message.js
@@ -0,0 +1,47 @@
+const html = require('choo/html')
+const Component = require('nanocomponent')
+
+class Message extends Component {
+  constructor () {
+    super()
+    this.response = false
+    this.text = ''
+  }
+
+  createElement (config) {
+    this.text = config.text
+    this.response = config.response
+    let classNames
+    let style
+    let after_element_left
+    let after_element_color
+    let after_element_border
+    if (this.response) {
+      classNames = 'mr-auto bg-silver'
+      style = 'background-color: #ffed00;' 
+      after_element_border = 'border-width:20px 20px 0 0;'
+      after_element_color = 'border-color: #ffed00 transparent;' 
+      after_element_left = 'left: 4%;'
+    } else {
+      classNames = 'ml-auto white bg-blue'
+      style = 'background-color: #00245b;'
+      after_element_border = 'border-width:20px 0 0 20px;'
+      after_element_color = 'border-color: #00245b transparent;' 
+      after_element_left = 'left: 96%;'
+    }
+    return html`
+      <div style="margin-bottom: 13px;">
+        <div class="w-70 mb3 ph3 pv3 tc br2 ${classNames}" style="${style}  border-radius: 10px 10px 10px 10px;">
+          ${this.text}
+        </div>
+        <div class="relative db w-0 b--solid" style="${after_element_border} ${after_element_color} ${after_element_left} margin: -1rem; width: 0;"></div>
+      </div>
+    `
+  }
+
+  update (text) {
+    return this.text !== text
+  }
+}
+
+module.exports = Message
diff --git a/index.js b/index.js
@@ -1,7 +1,6 @@
 const css = require('sheetify')
 const choo = require('choo')
-const inputStore = require('./stores/input')
-const outputStore = require('./stores/output')
+const messagesStore = require('./stores/messages')
 
 css('tachyons')
 
@@ -10,8 +9,7 @@ if (process.env.NODE_ENV !== 'production') {
   app.use(require('choo-devtools')())
 }
 
-app.use(inputStore)
-app.use(outputStore)
+app.use(messagesStore)
 
 app.route('/', require('./views/main'))
 app.route('/*', require('./views/404'))

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "choo": "6.6.1",
     "choo-devtools": "2.3.3",
+    "nanocomponent": "6.5.1",
     "sheetify": "7.0.0",
     "tachyons": "4.9.1"
   },

diff --git a/stores/input.js b/stores/input.js
diff --git a/stores/messages.js b/stores/messages.js
@@ -0,0 +1,9 @@
+module.exports = function (state, emitter) {
+  state.messages = [{text: 'How can I help you?',
+                    response: true}]
+
+  emitter.on('messages:add', message => {
+    state.messages.push(message)
+    emitter.emit('render')
+  })
+}
diff --git a/stores/output.js b/stores/output.js
diff --git a/views/main.js b/views/main.js
@@ -1,37 +1,30 @@
 const html = require('choo/html')
-const fetch = window.fetch
+
+const Input = require('../components/input')
+const Message = require('../components/message')
 
 const TITLE = 'data mining chatbot'
 
 module.exports = view
 
 function view (state, emit) {
   if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)
-
-  function onsubmit (evt) {
-    if (evt.key === 'Enter') {
-      emit('input:submit', evt.target.value)
-      fetch(`http://${process.env.HOSTNAME}:3030/api/request?input=${state.input.text}`)
-        .then(res => res.json())
-        .then(body => {
-          emit('output:submit', body.text)
-        })
-    }
-  }
+  const input = new Input(state, emit)
 
   return html`
-    <body class="helvetica">
-      <header class="vh-100 bg-light-pink dt w-100">
-        <div class="dtc v-mid cover ph3 ph4-m ph5-l">
-          <h1 class="f2 f-subheadline-l mt0 measure lh-title fw9">${state.output.text}</h1>
-          <input
-            class="f3 f2-l helvetica bg-light-pink bt-0 bl-0 br-0 bb b--navy navy pb2 vw-100"
-            placeholder="Ask me a question..."
-            autofocus
-            onkeyup=${onsubmit}
-          />
-        </div>
-      </header>
+    <body style="background-color: #33578e">
+      <div class="helvetica f3 mw5 mw7-ns center bg-light-gray pa3 pa5-ns vh-100">
+        ${state.messages.map(msg => {
+          const message = new Message()
+          return html`
+            ${message.render(msg)}
+          `
+        })}
+      </div>
+
+      <div class="fixed center f3 pb4" style="bottom:0;left: 0;right: 0; width: 31%">
+        ${input.render()}
+      </div>
     </body>
   `
 }