Extract html into separate module (#103)

This commit is contained in:
Todd Kennedy
2016-07-02 12:55:41 +02:00
committed by Yoshua Wuyts
parent d0920f153f
commit 8f8df602c5
19 changed files with 61 additions and 52 deletions
+2 -2
View File
@@ -1,9 +1,9 @@
const choo = require('../../../')
const html = require('../../../html')
module.exports = function (params, state, send) {
const error = state.app.error[0]
const title = state.api.title
return choo.view`
return html`
<section>
<h1>${title}</h1>
<h2>Latest error: ${error}</h2>
+3 -3
View File
@@ -1,10 +1,10 @@
const dateformat = require('dateformat')
const choo = require('../../../')
const html = require('../../../html')
module.exports = function (params, state, send) {
const mailbox = params.mailbox
const messages = state[mailbox].messages
return choo.view`
return html`
<div>
<div class="db cf w-100">
<div class="fl mb3 w-25 mt0 b">Date</th>
@@ -20,7 +20,7 @@ module.exports = function (params, state, send) {
}
function createMessage (message, mailbox) {
return choo.view`
return html`
<div class="db cf w-100">
<a href="${'/' + mailbox + '/' + message.id}">
<div class="fl mb3 w-25 f6 link">
+3 -3
View File
@@ -1,4 +1,4 @@
const choo = require('../../../')
const html = require('../../../html')
module.exports = function (params, state, send) {
const mailbox = params.mailbox
@@ -8,7 +8,7 @@ module.exports = function (params, state, send) {
return String(msg.id) === message
})[0]
return choo.view`
return html`
<div>
${email ? createEmail(email) : 'error: no email found'}
</div
@@ -16,7 +16,7 @@ module.exports = function (params, state, send) {
}
function createEmail (message) {
return choo.view`
return html`
<div class="mail">
<dl>
<dt>From</dt>
+2 -2
View File
@@ -1,7 +1,7 @@
const choo = require('../../../')
const html = require('../../../html')
module.exports = function (params, state, send) {
return choo.view`
return html`
<section>
<p>Select a mailbox</p>
</section>
+6 -6
View File
@@ -1,5 +1,5 @@
const dateformat = require('dateformat')
const choo = require('../../../')
const html = require('../../../html')
module.exports = function () {
return function (params, state, send) {
@@ -12,7 +12,7 @@ module.exports = function () {
return String(msg.id) === message
})[0]
return choo.view`
return html`
<section class="fl mt4 w-80 db">
<div>
${createHeader()}
@@ -26,7 +26,7 @@ module.exports = function () {
</section>
`
} else {
return choo.view`
return html`
<section class="fl mt4 w-80 db">
${createHeader()}
${messages.map(function (msg) {
@@ -39,7 +39,7 @@ module.exports = function () {
}
function createHeader () {
return choo.view`
return html`
<div class="db cf w-100">
<div class="fl mb3 w-25 mt0 b">Date</th>
<div class="fl mb3 w-25 mt0 b">Subject</th>
@@ -50,7 +50,7 @@ function createHeader () {
}
function createMessage (message, mailbox) {
return choo.view`
return html`
<div class="db cf w-100">
<a href="${'/' + mailbox + '/' + message.id}">
<div class="fl mb3 w-25 f6 link">
@@ -65,7 +65,7 @@ function createMessage (message, mailbox) {
}
function createEmail (message) {
return choo.view`
return html`
<div class="mail">
<dl>
<dt>From</dt>
+3 -3
View File
@@ -1,9 +1,9 @@
const choo = require('../../../')
const html = require('../../../html')
const mailboxes = [ 'inbox', 'spam', 'sent' ]
module.exports = function (params, state, send) {
return choo.view`
return html`
<aside class="fl mt4 w-20 db">
<ul>
<li>
@@ -19,7 +19,7 @@ module.exports = function (params, state, send) {
}
function createLi (mailbox, messages) {
return choo.view`
return html`
<li class="mt4 f6">
<a href="/${mailbox}">
${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}
+2 -2
View File
@@ -1,9 +1,9 @@
const pathname = require('pathname-match')
const choo = require('../../../')
const html = require('../../../html')
module.exports = function (params, state, send) {
const location = state.app.location
return choo.view`
return html`
<span class="fl mt4 w-100 f4 b">
URL: ${pathname(location) || '/'}
</span>
+2 -2
View File
@@ -1,4 +1,4 @@
const choo = require('../../../')
const html = require('../../../html')
const emailList = require('../elements/email-list')
const pathname = require('../elements/pathname')
@@ -6,7 +6,7 @@ const email = require('../elements/email')
const nav = require('../elements/nav')
module.exports = function (params, state, send) {
return choo.view`
return html`
<main class="mw5 mw7-ns center cf">
${pathname(params, state, send)}
${nav(params, state, send)}
+2 -2
View File
@@ -1,11 +1,11 @@
const choo = require('../../../')
const html = require('../../../html')
const empty = require('../elements/empty-mailbox')
const pathname = require('../elements/pathname')
const nav = require('../elements/nav')
module.exports = function (params, state, send) {
return choo.view`
return html`
<main class="mw5 mw7-ns center cf">
${pathname(params, state, send)}
${nav(params, state, send)}
+2 -2
View File
@@ -1,11 +1,11 @@
const choo = require('../../../')
const html = require('../../../html')
const emailList = require('../elements/email-list')
const pathname = require('../elements/pathname')
const nav = require('../elements/nav')
module.exports = function (params, state, send) {
return choo.view`
return html`
<main class="mw5 mw7-ns center cf">
${pathname(params, state, send)}
${nav(params, state, send)}
+2 -2
View File
@@ -1,5 +1,5 @@
const assert = require('assert')
const choo = require('../../../')
const html = require('../../../html')
module.exports = function (params, state, send) {
const serverMessage = state.message.server
@@ -8,7 +8,7 @@ module.exports = function (params, state, send) {
assert.equal(typeof serverMessage, 'string', 'server should be a string')
assert.equal(typeof clientMessage, 'string', 'client should be a string')
return choo.view`
return html`
<section id="app-root">
<h1>server message: ${serverMessage}</h1>
<h1>client message: ${clientMessage}</h1>
+2 -1
View File
@@ -1,4 +1,5 @@
const choo = require('../../')
const html = require('../../html')
const app = choo()
app.model(createModel())
@@ -10,7 +11,7 @@ const tree = app.start()
document.body.appendChild(tree)
function mainView (params, state, send) {
return choo.view`
return html`
<div>${state.logger.msg}</div>
`
}
+2 -2
View File
@@ -1,9 +1,9 @@
const choo = require('../../../')
const html = require('../../../html')
module.exports = function (params, state, send) {
const error = state.app.error[0]
const title = state.api.title
return choo.view`
return html`
<section>
<h1>${title}</h1>
<h2>Latest error: ${error}</h2>
+2 -1
View File
@@ -1,4 +1,5 @@
const choo = require('../../')
const html = require('../../html')
const app = choo()
app.model({
@@ -15,7 +16,7 @@ app.model({
})
const mainView = (params, state, send) => {
return choo.view`
return html`
<main class="app">
<h1>${state.input.title}</h1>
<label>Set the title</label>