example-mailbox: v1

README.md

@@ -52,6 +52,8 @@ const tree = app.start()
 document.body.appendChild(tree)
 ```
 
+## Perform HTTP requests
+
 ## Concepts
 - __state:__ a single object that contains all application state, should only
   ever be modified by `reducers`

examples/http/client.js

@@ -0,0 +1,21 @@
+const choo = require('../../')
+const sf = require('sheetify')
+
+sf('css-wipe/dest/bundle')
+sf('tachyons')
+
+const mainView = require('./views/main')
+const navElement = 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(navElement))
+])
+
+const tree = app.start()
+document.body.appendChild(tree)

examples/http/elements/nav.js

@@ -0,0 +1,14 @@
+const choo = require('../../../')
+
+module.exports = function (params, state, send) {
+  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>
+      </ul>
+    </aside>
+  `
+}

examples/http/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/http/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/http/package.json

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

examples/http/server.js

@@ -0,0 +1,27 @@
+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))
+
+  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/http/views/main.js

@@ -0,0 +1,23 @@
+const pathname = require('pathname-match')
+const choo = require('../../../')
+
+module.exports = function (nav) {
+  return function (params, state, send) {
+    return choo.view`
+      <main class="app">
+        <span>URL: ${pathname(state.location) || '/'}</span>
+        ${nav(params, state, send)}
+        <section>
+          <table>
+            <tr>
+              <th>Data</th>
+              <th>Subject</th>
+              <th>From</th>
+              <th>To</th>
+            </tr>
+          </table>
+        </section>
+      </main>
+    `
+  }
+}

package.json

@@ -26,9 +26,15 @@
     "yo-yo": "^1.2.0"
   },
   "devDependencies": {
+    "bankai": "^2.0.2",
+    "browserify": "^13.0.1",
     "dependency-check": "^2.5.1",
+    "insert-css": "^0.2.0",
     "istanbul": "^0.4.3",
+    "server-router": "^2.1.0",
+    "sheetify": "^5.0.0",
     "standard": "^6.0.8",
+    "tachyons": "^4.0.0-beta.19",
     "tape": "^4.5.1"
   }
 }