diff --git a/examples/mailbox/client.js b/examples/mailbox/client.js index 39f45d9..416a32d 100644 --- a/examples/mailbox/client.js +++ b/examples/mailbox/client.js @@ -16,8 +16,9 @@ app.model('sent', require('./models/sent')) app.router((route) => [ route('/', mainView(nav, mailbox)), - route('/:mailbox', mainView(nav, mailbox), [ - route('/:message_id', mainView(nav, mailbox)) + route('/:mailbox', [ + route('/', mainView(nav, mailbox)), + route('/:message', mainView(nav, mailbox)) ]) ]) diff --git a/examples/mailbox/elements/mailbox.js b/examples/mailbox/elements/mailbox.js index 35a7192..b6e7b68 100644 --- a/examples/mailbox/elements/mailbox.js +++ b/examples/mailbox/elements/mailbox.js @@ -1,40 +1,83 @@ +const dateformat = require('dateformat') const choo = require('../../../') module.exports = function (params, state, send) { const mailbox = params.mailbox + const message = params.message - return choo.view` -
- - ${createHeader()} - ${state[mailbox + ':messages'].map(function (msg) { - return createMessage(msg, mailbox) - })} -
-
- ` + if (mailbox) { + if (message) { + const email = state[mailbox + ':messages'].filter(function (msg) { + return String(msg.id) === message + })[0] + + return choo.view` +
+ ${createHeader()} + ${state[mailbox + ':messages'].map(function (msg) { + return createMessage(msg, mailbox) + })} + ${email ? createEmail(email) : 'error: no email found'} +
+ ` + } else { + return choo.view` +
+ ${createHeader()} + ${state[mailbox + ':messages'].map(function (msg) { + return createMessage(msg, mailbox) + })} +
+ ` + } + } else { + return choo.view` +
+

Select a mailbox

+
+ ` + } } function createHeader () { return choo.view` - - Data - Subject - From - To - +
+
Date +
Subject +
From +
To +
` } function createMessage (message, mailbox) { return choo.view` - +
- ${message.date} - ${message.subject} - ${message.from} - ${message.to} +
+ ${dateformat(message.date, 'mmmm dS')} +
+
${message.subject}
+
${message.from}
+
${message.to}
 - +
+ ` +} + +function createEmail (message) { + return choo.view` +
+
+
From
+
${message.from}
+
To
+
${message.to}
+
Date
+
${message.date}
+
+

${message.subject}

+

${message.body}

+
` } diff --git a/examples/mailbox/elements/nav.js b/examples/mailbox/elements/nav.js index 5117932..2d51362 100644 --- a/examples/mailbox/elements/nav.js +++ b/examples/mailbox/elements/nav.js @@ -6,9 +6,11 @@ module.exports = function (params, state, send) { const mailbox = params.mailbox return choo.view` -