Extract html into separate module (#103)
This commit is contained in:
committed by
Yoshua Wuyts
parent
d0920f153f
commit
8f8df602c5
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
`
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user