feat(todo): view a single todo using /todo/<id> syntax, close #13

bahmutov · Oct 26, 2016 · 4ee7bda · 4ee7bda
1 parent 1f8f068
commit 4ee7bda
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 = [
   '<meta charset="utf-8">',
   '<meta http-equiv="Content-Security-Policy" content="script-src \'none\';">',
   '<title>TodoMVC</title>',
-  '<link rel="stylesheet" href="app.css">',
+  '<link rel="stylesheet" href="/app.css">',
   '</style>',
   '</head>',
   '<body>',
@@ -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
@@ -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: '/',