example-mailbox: v5

examples/mailbox/client.js

@@ -4,9 +4,9 @@ const sf = require('sheetify')
 sf('css-wipe/dest/bundle')
 sf('tachyons')
 
-const mainView = require('./views/main')
-const mailbox = require('./elements/mailbox')
-const nav = require('./elements/nav')
+const mailboxView = require('./views/mailbox')
+const emailView = require('./views/email')
+const emptyView = require('./views/empty')
 
 const app = choo()
 
@@ -15,10 +15,10 @@ app.model('spam', require('./models/spam'))
 app.model('sent', require('./models/sent'))
 
 app.router((route) => [
-  route('/', mainView(nav, mailbox)),
+  route('/', emptyView()),
   route('/:mailbox', [
-    route('/', mainView(nav, mailbox)),
-    route('/:message', mainView(nav, mailbox))
+    route('/', mailboxView()),
+    route('/:message', emailView())
   ])
 ])
 

examples/mailbox/elements/email-list.js

@@ -0,0 +1,40 @@
+const dateformat = require('dateformat')
+const choo = require('../../../')
+
+module.exports = function (params, state, send) {
+  const mailbox = params.mailbox
+  return choo.view`
+    <div>
+      ${createHeader()}
+      ${state[mailbox + ':messages'].map(function (msg) {
+        return createMessage(msg, mailbox)
+      })}
+    </div>
+  `
+}
+
+function createHeader () {
+  return choo.view`
+    <div class="db cf w-100">
+      <div class="fl mb3 w-25 mt0 b">Date</th>
+      <div class="fl mb3 w-25 mt0 b">Subject</th>
+      <div class="fl mb3 w-25 mt0 b">From</th>
+      <div class="fl mb3 w-25 mt0 b">To</th>
+    </div>
+  `
+}
+
+function createMessage (message, mailbox) {
+  return choo.view`
+    <div class="db cf w-100">
+      <a href="${'/' + mailbox + '/' + message.id}">
+        <div class="fl mb3 w-25 f6 link">
+          ${dateformat(message.date, 'mmmm dS')}
+        </div>
+        <div class="fl mb3 w-25 f6 link">${message.subject}</div>
+        <div class="fl mb3 w-25 f6 link">${message.from}</div>
+        <div class="fl mb3 w-25 f6 link">${message.to}</div>
+      </a>
+    </div>
+  `
+}

examples/mailbox/elements/email.js

@@ -0,0 +1,33 @@
+const choo = require('../../../')
+
+module.exports = function (params, state, send) {
+  const mailbox = params.mailbox
+  const message = params.message
+
+  const email = state[mailbox + ':messages'].filter(function (msg) {
+    return String(msg.id) === message
+  })[0]
+
+  return choo.view`
+    <div>
+      ${email ? createEmail(email) : 'error: no email found'}
+    </div
+  `
+}
+
+function createEmail (message) {
+  return choo.view`
+    <div class="mail">
+      <dl>
+        <dt>From</dt>
+        <dd>${message.from}</dd>
+        <dt>To</dt>
+        <dd>${message.to}</dd>
+        <dt>Date</dt>
+        <dd>${message.date}</dd>
+      </dl>
+      <h4>${message.subject}</h4>
+      <p>${message.body}</p>
+    </div>
+  `
+}

examples/mailbox/elements/empty-mailbox.js

@@ -0,0 +1,9 @@
+const choo = require('../../../')
+
+module.exports = function (params, state, send) {
+  return choo.view`
+    <section>
+      <p>Select a mailbox</p>
+    </section>
+  `
+}

examples/mailbox/elements/mailbox.js

@@ -1,11 +1,10 @@
-const dateformat = require('dateformat')
 const choo = require('../../../')
 
-module.exports = function (params, state, send) {
+module.exports = function () {
+  return function (params, state, send) {
     const mailbox = params.mailbox
     const message = params.message
 
-  if (mailbox) {
     if (message) {
       const email = state[mailbox + ':messages'].filter(function (msg) {
         return String(msg.id) === message
@@ -13,11 +12,15 @@ module.exports = function (params, state, send) {
 
       return choo.view`
         <section class="fl mt4 w-80 db">
+          <div>
             ${createHeader()}
             ${state[mailbox + ':messages'].map(function (msg) {
               return createMessage(msg, mailbox)
             })}
+          </div>
+          <div>
             ${email ? createEmail(email) : 'error: no email found'}
+          </div
         </section>
       `
     } else {
@@ -30,12 +33,6 @@ module.exports = function (params, state, send) {
         </section>
       `
     }
-  } else {
-    return choo.view`
-      <section>
-        <p>Select a mailbox</p>
-      </section>
-    `
   }
 }
 

examples/mailbox/elements/pathname.js

@@ -0,0 +1,10 @@
+const pathname = require('pathname-match')
+const choo = require('../../../')
+
+module.exports = function (params, state, send) {
+  return choo.view`
+    <span class="fl mt4 w-100 f4 b">
+      URL: ${pathname(state.location) || '/'}
+    </span>
+  `
+}

examples/mailbox/views/email.js

@@ -0,0 +1,21 @@
+const choo = require('../../../')
+
+const emailList = require('../elements/email-list')
+const pathname = require('../elements/pathname')
+const email = require('../elements/email')
+const nav = require('../elements/nav')
+
+module.exports = function () {
+  return function (params, state, send) {
+    return choo.view`
+      <main class="mw5 mw7-ns center cf">
+        ${pathname(params, state, send)}
+        ${nav(params, state, send)}
+        <section class="fl mt4 w-80 db">
+          ${emailList(params, state, send)}
+          ${email(params, state, send)}
+        </section>
+      </main>
+    `
+  }
+}

examples/mailbox/views/empty.js

@@ -0,0 +1,17 @@
+const choo = require('../../../')
+
+const empty = require('../elements/empty-mailbox')
+const pathname = require('../elements/pathname')
+const nav = require('../elements/nav')
+
+module.exports = function () {
+  return function (params, state, send) {
+    return choo.view`
+      <main class="mw5 mw7-ns center cf">
+        ${pathname(params, state, send)}
+        ${nav(params, state, send)}
+        ${empty(params, state, send)}
+      </main>
+    `
+  }
+}

examples/mailbox/views/mailbox.js

@@ -0,0 +1,19 @@
+const choo = require('../../../')
+
+const emailList = require('../elements/email-list')
+const pathname = require('../elements/pathname')
+const nav = require('../elements/nav')
+
+module.exports = function () {
+  return function (params, state, send) {
+    return choo.view`
+      <main class="mw5 mw7-ns center cf">
+        ${pathname(params, state, send)}
+        ${nav(params, state, send)}
+        <section class="fl mt4 w-80 db">
+          ${emailList(params, state, send)}
+        </section>
+      </main>
+    `
+  }
+}

examples/mailbox/views/main.js

@@ -1,16 +0,0 @@
-const pathname = require('pathname-match')
-const choo = require('../../../')
-
-module.exports = function (nav, mailbox) {
-  return function (params, state, send) {
-    return choo.view`
-      <main class="mw5 mw7-ns center cf">
-        <span class="fl mt4 w-100 f4 b">
-          URL: ${pathname(state.location) || '/'}
-        </span>
-        ${nav(params, state, send)}
-        ${mailbox(params, state, send)}
-      </main>
-    `
-  }
-}

scripts/test-size

@@ -5,7 +5,7 @@
 #   -t uglifyify \
 #   | discify --open
 
-browserify http.js --full-paths \
+browserify index.js --full-paths \
   -g unassertify \
   -g uglifyify \
   | gzip-size \