example-mailbox: v3

examples/mailbox/client.js

@@ -16,8 +16,9 @@ app.model('sent', require('./models/sent'))
 
 app.router((route) => [
   route('/', mainView(nav, mailbox)),
-  route('/:mailbox', mainView(nav, mailbox), [
-    route('/:message_id', mainView(nav, mailbox))
+  route('/:mailbox', [
+    route('/', mainView(nav, mailbox)),
+    route('/:message', mainView(nav, mailbox))
   ])
 ])
 

examples/mailbox/elements/mailbox.js

@@ -1,40 +1,83 @@
+const dateformat = require('dateformat')
 const choo = require('../../../')
 
 module.exports = function (params, state, send) {
   const mailbox = params.mailbox
+  const message = params.message
 
-  return choo.view`
-    <section>
-      <table>
-        ${createHeader()}
-        ${state[mailbox + ':messages'].map(function (msg) {
-          return createMessage(msg, mailbox)
-        })}
-      </table>
-    </section>
-  `
+  if (mailbox) {
+    if (message) {
+      const email = state[mailbox + ':messages'].filter(function (msg) {
+        return String(msg.id) === message
+      })[0]
+
+      return choo.view`
+        <section class="fl mt4 w-80 db">
+          ${createHeader()}
+          ${state[mailbox + ':messages'].map(function (msg) {
+            return createMessage(msg, mailbox)
+          })}
+          ${email ? createEmail(email) : 'error: no email found'}
+        </section>
+      `
+    } else {
+      return choo.view`
+        <section class="fl mt4 w-80 db">
+          ${createHeader()}
+          ${state[mailbox + ':messages'].map(function (msg) {
+            return createMessage(msg, mailbox)
+          })}
+        </section>
+      `
+    }
+  } else {
+    return choo.view`
+      <section>
+        <p>Select a mailbox</p>
+      </section>
+    `
+  }
 }
 
 function createHeader () {
   return choo.view`
-    <tr>
-      <th>Data</th>
-      <th>Subject</th>
-      <th>From</th>
-      <th>To</th>
-    </tr>
+    <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`
-    <tr>
+    <div class="db cf w-100">
       <a href="${'/' + mailbox + '/' + message.id}">
-        <td>${message.date}</td>
-        <td>${message.subject}</td>
-        <td>${message.from}</td>
-        <td>${message.to}</td>
+        <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>
-    </tr>
+    </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/nav.js

@@ -6,9 +6,11 @@ module.exports = function (params, state, send) {
   const mailbox = params.mailbox
 
   return choo.view`
-    <aside>
+    <aside class="fl mt4 w-20 db">
       <ul>
-        <li><h2>Mailboxes</h2></li>
+        <li>
+          <h2 class="f4 b lh0">Mailbox</h2>
+        </li>
         ${mailboxes.map(function (name) {
           return createLi(name, state[name + ':messages'], mailbox)
         })}
@@ -19,7 +21,7 @@ module.exports = function (params, state, send) {
 
 function createLi (mailbox, messages) {
   return choo.view`
-    <li>
+    <li class="mt4 f6">
       <a href="/${mailbox}">
         ${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}
         <span>${messages}</span>

examples/mailbox/package.json

@@ -14,6 +14,7 @@
   "author": "Yoshua Wuyts <i@yoshuawuyts.com>",
   "license": "ISC",
   "dependencies": {
-    "css-wipe": "^4.2.1"
+    "css-wipe": "^4.2.1",
+    "dateformat": "^1.0.12"
   }
 }

examples/mailbox/views/main.js

@@ -4,8 +4,10 @@ const choo = require('../../../')
 module.exports = function (nav, mailbox) {
   return function (params, state, send) {
     return choo.view`
-      <main class="app">
-        <span>URL: ${pathname(state.location) || '/'}</span>
+      <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>