From 4ee7bdac61507da8569c3749e59edc67af2f001b Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Wed, 26 Oct 2016 15:58:42 -0400 Subject: [PATCH] feat(todo): view a single todo using /todo/ syntax, close #13 --- src/app.css | 5 +++++ src/app.js | 7 ++++++- src/index-page.js | 14 ++++++++++++-- src/render/render-todo.js | 6 +++++- 4 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/app.css b/src/app.css index 25f4f6f..4ecf211 100644 --- a/src/app.css +++ b/src/app.css @@ -366,6 +366,11 @@ label[for='toggle-all'] { position: absolute; } +.todo-list li a { + color: inherit; + text-decoration: none; +} + .todo-list li.completed label { color: #d9d9d9; text-decoration: line-through; diff --git a/src/app.js b/src/app.js index 7457273..9729701 100644 --- a/src/app.js +++ b/src/app.js @@ -24,12 +24,16 @@ function grabMethodFromBody (req, res) { app.use(methodOverride(grabMethodFromBody)) -const renderIndexPage = require('./index-page') +const {renderIndexPage, renderTodoPage} = require('./index-page') function sendIndexPage (req, res) { res.send(renderIndexPage()) } +function sendTodoPage (req, res) { + res.send(renderTodoPage(req.params.id)) +} + function activeTodosPage (req, res) { const filter = (todo) => !todo.done res.send(renderIndexPage(filter, req.url)) @@ -102,6 +106,7 @@ function clearCompleted (req, res, next) { } app.get('/', broadcast, sendIndexPage) +app.get('/todo/:id', sendTodoPage) app.get('/app.css', sendAppCss) app.get('/active', activeTodosPage) app.get('/completed', completedTodosPage) diff --git a/src/index-page.js b/src/index-page.js index 745984d..c2e8e8a 100644 --- a/src/index-page.js +++ b/src/index-page.js @@ -1,3 +1,7 @@ +'use strict' + +const la = require('lazy-ass') +const is = require('check-more-types') const render = require('./render/render') const Todos = require('todomvc-model') const toHTML = require('vdom-to-html') @@ -10,7 +14,7 @@ const header = [ '', '', 'TodoMVC', - '', + '', '', '', '', @@ -38,4 +42,10 @@ function renderIndexPage (filter, route) { return header + '\n' + todosMarkup + '\n' + footer } -module.exports = renderIndexPage +function renderTodoPage (id) { + la(is.unemptyString(id), 'missing todo id', id) + const filter = (todo) => todo.id === id + return renderIndexPage(filter) +} + +module.exports = {renderIndexPage, renderTodoPage} diff --git a/src/render/render-todo.js b/src/render/render-todo.js index a1ad6fe..b8800ad 100644 --- a/src/render/render-todo.js +++ b/src/render/render-todo.js @@ -31,7 +31,11 @@ function render (Todos, todo) { value: 'PATCH' }) ]), - h('label', todo.what), + h('label', [ + h('a', { + href: `/todo/${todo.id}` + }, todo.what) + ]), h('form', { method: 'POST', action: '/',