WIP Todo app (#10)

* Start todo app article

* Start todo app

* Wordsmith

* TodoBlank

* Add example todo

* Start todo list

* Point arrow

* Continue

* Update CodeResult

* Set up reducer

* Show todo data

* Finish slide 2

* Mark all as completed

* Fix imports

* 📝

* Continue with todo

* Updated data/ui graphics

* Add custom document

* Temp commit

* Continue w/ todo

* 📝

* Highlight changes

* Highlight changes

* ResultHighlight

* Wordsmith

* Simplify

* 📝

* Wordsmith

* Wordsmith

* 📝

* Preview todo article

* 📝

* Fix todo list

* Only show heading when length > 0

* Continue with slide 5

* Finish readonly

* Wordsmith

* Wordsmith

Author: chibicode

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Deploy to github pages branch
+name: Deploy to Zeit Now
 on:
   push:
     branches:

snippets/snippets/todo/dqwb.ts

@@ -0,0 +1,5 @@
+function toggleTodo(todo: Todo): Todo {
+  // Little Duckling’s refactoring
+  todo.done = !todo.done
+  return todo
+}

snippets/snippets/todo/njgr.ts

@@ -0,0 +1,7 @@
+function toggleTodo(todo: Todo): Todo {
+  // Little Duckling’s refactoring is a
+  // bad refactoring because it modifies
+  // the original todo object
+  todo.done = !todo.done
+  return todo
+}

snippets/snippets/todo/qbgu.ts

@@ -0,0 +1,6 @@
+// Returns a new todo object
+// with the opposite boolean value
+// for the "done" proprty.
+function toggleTodo(todo) {
+  // ...
+}

snippets/snippets/todo/uxlb.ts

@@ -0,0 +1,5 @@
+function toggleTodo(todo: Todo): Todo {
+  // Little Duckling’s refactoring
+  todo.done = !todo.done
+  return todo
+}

snippets/snippets/todo/vgnq.ts

@@ -0,0 +1,9 @@
+// This will continue to work because
+// the input todo is not modified
+function toggleTodo(todo: Todo): Todo {
+  return {
+    id: todo.id,
+    text: todo.text,
+    done: !todo.done
+  }
+}

snippets/snippets/todo/wymp.ts

@@ -0,0 +1,16 @@
+const originalTodo = {
+  id: 1,
+  text: '…',
+  done: true
+}
+
+console.log('Before toggleTodo()…')
+console.log(originalTodo)
+
+const newTodo = toggleTodo(originalTodo)
+
+console.log('After toggleTodo()…')
+console.log('Original Todo:')
+console.log(originalTodo)
+console.log('New Todo:')
+console.log(newTodo)

snippets/snippets/todo/yhto.ts

@@ -0,0 +1,5 @@
+type Todo = {
+  readonly id: number
+  readonly text: string
+  readonly done: boolean
+}

src/components/ArticleList.tsx

@@ -77,7 +77,7 @@ const ArticleList = ({
   const filteredArticleKeys = articleKeys.filter(
     articleKey => articleKey !== ignoreArticleKey
   )
-  return (
+  return filteredArticleKeys.length > 0 ? (
     <>
       <h4
         css={css`
@@ -113,6 +113,8 @@ const ArticleList = ({
         ))}
       </ul>
     </>
+  ) : (
+    <></>
   )
 }
 

src/components/CodeBlock.tsx

@@ -95,7 +95,7 @@ const CodeBlock = ({
             resultVisible &&
             resultError
               ? 'none'
-              : `3px solid ${colors('darkOrange')}`};
+              : `2px solid ${colors('darkOrange')}`};
             text-decoration: ${shouldHighlightResult &&
             resultVisible &&
             resultError