examples/http -> examples/mailbox

examples/mailbox/client.js

@@ -0,0 +1,25 @@
+const choo = require('../../')
+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 app = choo()
+
+app.model('inbox', require('./models/inbox'))
+app.model('spam', require('./models/spam'))
+app.model('sent', require('./models/sent'))
+
+app.router((route) => [
+  route('/', mainView(nav, mailbox)),
+  route('/:mailbox', mainView(nav, mailbox), [
+    route('/:message_id', mainView(nav, mailbox))
+  ])
+])
+
+const tree = app.start()
+document.body.appendChild(tree)

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>
+  `
+}

examples/mailbox/models/inbox.js

@@ -0,0 +1,22 @@
+module.exports = {
+  state: {
+    messages: [
+      {
+        id: 1,
+        subject: 'Welcome to Ember',
+        from: 'tomster@emberjs.com',
+        to: 'user@example.com',
+        date: new Date(),
+        body: 'Welcome to Ember. We hope you enjoy your stay'
+      }, {
+        id: 2,
+        subject: 'Great Ember Resources',
+        from: 'tomster@emberjs.com',
+        to: 'user@example.com',
+        date: new Date(),
+        body: 'Have you seen embercasts.com? How about emberaddons.com?'
+      }
+    ]
+  },
+  reducers: { }
+}

examples/mailbox/models/sent.js

@@ -0,0 +1,15 @@
+module.exports = {
+  state: {
+    messages: [
+      {
+        id: 4,
+        subject: 'Should I use Ember',
+        from: 'user@example.com',
+        to: 'tomster@emberjs.com',
+        date: new Date(),
+        body: 'Ember looks pretty good, should I use it?'
+      }
+    ]
+  },
+  reducers: { }
+}

examples/mailbox/models/spam.js

@@ -0,0 +1,15 @@
+module.exports = {
+  state: {
+    messages: [
+      {
+        id: 3,
+        subject: 'You have one the lottery!!!111ONEONE',
+        from: '419@thereallotteryhonest.com',
+        to: 'user@example.com',
+        date: new Date(),
+        body: 'You have ONE the lottery! You only have to send us a small amount of monies to claim your prize'
+      }
+    ]
+  },
+  reducers: { }
+}

examples/mailbox/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "http",
+  "version": "1.0.0",
+  "private": "true",
+  "main": "client.js",
+  "scripts": {
+    "start": "NODE_ENV=development node server.js"
+  },
+  "browserify": {
+    "transform": [
+      "sheetify/transform"
+    ]
+  },
+  "author": "Yoshua Wuyts <i@yoshuawuyts.com>",
+  "license": "ISC",
+  "dependencies": {
+    "css-wipe": "^4.2.1"
+  }
+}

examples/mailbox/server.js

@@ -0,0 +1,29 @@
+const serverRouter = require('server-router')
+const browserify = require('browserify')
+const bankai = require('bankai')
+const http = require('http')
+
+const PORT = 8080
+
+const server = http.createServer(createRouter())
+server.listen(PORT, () => console.log(`listening on port ${PORT}`))
+
+function createRouter () {
+  const router = serverRouter('/404')
+
+  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))
+
+  router.on('/hi', (req, res) => res.end('{ "message": "hi back!" }'))
+  router.on('/404', (req, res) => {
+    res.statusCode = 404
+    res.end('{ "message": "the server is confused" }')
+  })
+
+  return router
+}

examples/mailbox/views/main.js

@@ -0,0 +1,14 @@
+const pathname = require('pathname-match')
+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>
+        ${nav(params, state, send)}
+        ${mailbox(params, state, send)}
+      </main>
+    `
+  }
+}