example-mailbox: v2

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>
-        <li>Spam <span>${state.spamCount}</span></li>
-        <li>Sent Mail <span>${state.SentMailCount}</span></li>
+        ${mailboxes.map(function (name) {
+          return createLi(name, state[name + ':messages'], mailbox)
+        })}
       </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>
+  `
+}