example-mailbox: v2

examples/http/client.js

@@ -5,6 +5,7 @@ sf('css-wipe/dest/bundle')
 sf('tachyons')
 
 const mainView = require('./views/main')
+const mailbox = require('./elements/mailbox')
 const nav = require('./elements/nav')
 
 const app = choo()
@@ -14,9 +15,9 @@ app.model('spam', require('./models/spam'))
 app.model('sent', require('./models/sent'))
 
 app.router((route) => [
-  route('/', mainView(nav)),
+  route('/', mainView(nav, mailbox)),
-  route('/:mailbox', mainView(nav), [
+  route('/:mailbox', mainView(nav, mailbox), [
-    route('/:message_id', mainView(nav))
+    route('/:message_id', mainView(nav, mailbox))
   ])
 ])
 

examples/http/elements/mailbox.js

@@ -0,0 +1,40 @@
+const choo = require('../../../')
+
+module.exports = function (params, state, send) {
+  const mailbox = params.mailbox
+
+  return choo.view`
+    <section>
+      <table>
+        ${createHeader()}
+        ${state[mailbox + ':messages'].map(function (msg) {
+          return createMessage(msg, mailbox)
+        })}
+      </table>
+    </section>
+  `
+}
+
+function createHeader () {
+  return choo.view`
+    <tr>
+      <th>Data</th>
+      <th>Subject</th>
+      <th>From</th>
+      <th>To</th>
+    </tr>
+  `
+}
+
+function createMessage (message, mailbox) {
+  return choo.view`
+    <tr>
+      <a href="${'/' + mailbox + '/' + message.id}">
+        <td>${message.date}</td>
+        <td>${message.subject}</td>
+        <td>${message.from}</td>
+        <td>${message.to}</td>
+      </a>
+    </tr>
+  `
+}

examples/http/elements/nav.js

@@ -1,14 +1,29 @@
 const choo = require('../../../')
 
+const mailboxes = [ 'inbox', 'spam', 'sent' ]
+
 module.exports = function (params, state, send) {
+  const mailbox = params.mailbox
+
   return choo.view`
     <aside>
       <ul>
         <li><h2>Mailboxes</h2></li>
-        <li>Inbox <span>${state.inboxCount}</span></li>
+        ${mailboxes.map(function (name) {
-        <li>Spam <span>${state.spamCount}</span></li>
+          return createLi(name, state[name + ':messages'], mailbox)
-        <li>Sent Mail <span>${state.SentMailCount}</span></li>
+        })}
       </ul>
     </aside>
   `
 }
+
+function createLi (mailbox, messages) {
+  return choo.view`
+    <li>
+      <a href="/${mailbox}">
+        ${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}
+        <span>${messages}</span>
+      </a>
+    </li>
+  `
+}

examples/http/package.json

@@ -4,7 +4,7 @@
   "private": "true",
   "main": "client.js",
   "scripts": {
-    "start": "node server.js"
+    "start": "NODE_ENV=development node server.js"
   },
   "browserify": {
     "transform": [
@@ -13,8 +13,7 @@
   },
   "author": "Yoshua Wuyts <i@yoshuawuyts.com>",
   "license": "ISC",
-  "devDependencies": {
+  "dependencies": {
-    "css-wipe": "^4.2.1",
+    "css-wipe": "^4.2.1"
-    "pathname-match": "^1.1.3"
   }
 }

examples/http/server.js

@@ -13,6 +13,8 @@ function createRouter () {
 
   const html = bankai.html({ css: false })
   router.on('/', (req, res) => html(req, res).pipe(res))
+  router.on('/:inbox', (req, res) => html(req, res).pipe(res))
+  router.on('/:inbox/:message_id', (req, res) => html(req, res).pipe(res))
 
   const js = bankai.js(browserify, require.resolve('./client.js'))
   router.on('/bundle.js', (req, res) => js(req, res).pipe(res))

examples/http/views/main.js

@@ -1,23 +1,13 @@
 const pathname = require('pathname-match')
 const choo = require('../../../')
 
-module.exports = function (nav) {
+module.exports = function (nav, mailbox) {
   return function (params, state, send) {
-    console.log(state)
     return choo.view`
       <main class="app">
-        <span>URL: ${'/' + pathname(state.location)}</span>
+        <span>URL: ${pathname(state.location) || '/'}</span>
         ${nav(params, state, send)}
-        <section>
+        ${mailbox(params, state, send)}
-          <table>
-            <tr>
-              <th>Data</th>
-              <th>Subject</th>
-              <th>From</th>
-              <th>To</th>
-            </tr>
-          </table>
-        </section>
       </main>
     `
   }