examples: update mailbox

examples/mailbox/client.js

@@ -6,9 +6,9 @@ sf('tachyons')
 
 const app = choo()
 
-app.model('inbox', require('./models/inbox'))
-app.model('spam', require('./models/spam'))
-app.model('sent', require('./models/sent'))
+app.model(require('./models/inbox'))
+app.model(require('./models/spam'))
+app.model(require('./models/sent'))
 
 app.router((route) => [
   route('/', require('./views/empty')),

examples/mailbox/elements/email-list.js

@@ -3,7 +3,7 @@ const choo = require('../../../')
 
 module.exports = function (params, state, send) {
   const mailbox = params.mailbox
-  const messages = state[mailbox + ':messages']
+  const messages = state[mailbox].messages
   return choo.view`
     <div>
       <div class="db cf w-100">

examples/mailbox/elements/email.js

@@ -4,7 +4,7 @@ module.exports = function (params, state, send) {
   const mailbox = params.mailbox
   const message = params.message
 
-  const email = state[mailbox + ':messages'].filter(function (msg) {
+  const email = state[mailbox].messages.filter(function (msg) {
     return String(msg.id) === message
   })[0]
 

examples/mailbox/elements/mailbox.js

@@ -5,9 +5,10 @@ module.exports = function () {
   return function (params, state, send) {
     const mailbox = params.mailbox
     const message = params.message
+    const messages = state[mailbox].messages
 
     if (message) {
-      const email = state[mailbox + ':messages'].filter(function (msg) {
+      const email = state[mailbox].messages.filter(function (msg) {
         return String(msg.id) === message
       })[0]
 
@@ -15,7 +16,7 @@ module.exports = function () {
         <section class="fl mt4 w-80 db">
           <div>
             ${createHeader()}
-            ${state[mailbox + ':messages'].map(function (msg) {
+            ${messages.map(function (msg) {
               return createMessage(msg, mailbox)
             })}
           </div>
@@ -28,7 +29,7 @@ module.exports = function () {
       return choo.view`
         <section class="fl mt4 w-80 db">
           ${createHeader()}
-          ${state[mailbox + ':messages'].map(function (msg) {
+          ${messages.map(function (msg) {
             return createMessage(msg, mailbox)
           })}
         </section>

examples/mailbox/elements/nav.js

@@ -3,16 +3,15 @@ const choo = require('../../../')
 const mailboxes = [ 'inbox', 'spam', 'sent' ]
 
 module.exports = function (params, state, send) {
-  const mailbox = params.mailbox
-
   return choo.view`
     <aside class="fl mt4 w-20 db">
       <ul>
         <li>
           <h2 class="f4 b lh0">Mailbox</h2>
         </li>
-        ${mailboxes.map(function (name) {
-          return createLi(name, state[name + ':messages'], mailbox)
+        ${mailboxes.map(function (mailbox) {
+          const messages = mailbox.messages
+          return createLi(mailbox, messages, mailbox)
         })}
       </ul>
     </aside>

examples/mailbox/elements/pathname.js

@@ -2,9 +2,10 @@ const pathname = require('pathname-match')
 const choo = require('../../../')
 
 module.exports = function (params, state, send) {
+  const location = state.app.location
   return choo.view`
     <span class="fl mt4 w-100 f4 b">
-      URL: ${pathname(state.location) || '/'}
+      URL: ${pathname(location) || '/'}
     </span>
   `
 }

examples/mailbox/models/inbox.js

@@ -1,4 +1,5 @@
 module.exports = {
+  namespace: 'inbox',
   state: {
     messages: [
       {

examples/mailbox/models/sent.js

@@ -1,4 +1,5 @@
 module.exports = {
+  namespace: 'sent',
   state: {
     messages: [
       {

examples/mailbox/models/spam.js

@@ -1,4 +1,5 @@
 module.exports = {
+  namespace: 'spam',
   state: {
     messages: [
       {

index.js

@@ -84,7 +84,7 @@ function choo () {
       }
 
       const nsReducers = ns ? reducers[ns] : reducers
-      if (nsReducers[action.type]) {
+      if (nsReducers && nsReducers[action.type]) {
         if (ns) {
           state[ns] = reducers[ns][action.type](action, state[ns])
           newState = state
@@ -95,7 +95,7 @@ function choo () {
       }
 
       const nsEffects = ns ? effects[ns] : effects
-      if (nsEffects) {
+      if (nsEffects && nsEffects[action.type]) {
         nsEffects[action.type](action, newState || state)
         _effects = true
       }
@@ -143,7 +143,7 @@ function appInit (opts) {
   if (opts.href !== false) {
     model.subscriptions.push(function (send) {
       href(function (href) {
-        send('location', { location: href })
+        send('app:location', { location: href })
       })
     })
   }
@@ -151,7 +151,7 @@ function appInit (opts) {
   if (opts.history !== false) {
     model.subscriptions.push(function (send) {
       history(function (href) {
-        send('location', { location: href })
+        send('app:location', { location: href })
       })
     })
   }
@@ -160,8 +160,7 @@ function appInit (opts) {
 
   // handle href links
   function setLocation (action, state) {
-    const location = action.location.replace(/#.*/, '')
-    return xtend(state, { location: location })
+    return { location: action.location.replace(/#.*/, '') }
   }
 }