examples/http -> examples/mailbox

examples/mailbox/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/mailbox/elements/nav.js

@@ -0,0 +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>
+        ${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>
+  `
+}