WIP Todo app

.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

src/components/ContentTags/Code.tsx

@@ -14,6 +14,7 @@ const Code = ({
       css={[
         css`
           font-size: 0.95em;
+          font-style: normal;
           word-break: break-word;
           background: ${color ? colors(color) : colors('lightPink2')};
         `

src/components/TodoItem.tsx

@@ -30,9 +30,9 @@ const Todo = ({
       <span
         css={[
           css`
-            margin: ${spaces('-0.25')} ${spaces(0.25)} ${spaces('-0.25')}
-              ${spaces('-0.25')};
-            padding: ${spaces(0.25)};
+            margin: ${spaces('-0.25')} 0 ${spaces('-0.25')} ${spaces('-0.25')};
+            padding: ${spaces(0.25)} ${spaces(0.5)} ${spaces(0.25)}
+              ${spaces(0.25)};
 
             display: inline-block;
             outline: none;
@@ -58,12 +58,26 @@ const Todo = ({
         {done ? <Emoji type="check" /> : <TodoBlank hovered={todoHovered} />}
       </span>
       <span
-        css={
+        css={[
           done &&
-          css`
-            color: ${colors('gray')};
-          `
+            css`
+              color: ${colors('gray')};
+            `,
+          !disabled &&
+            css`
+              cursor: pointer;
+            `
+        ]}
+        onClick={() =>
+          disabled ? undefined : dispatch({ type: 'toggle', index })
         }
+        onMouseOver={hoverOn}
+        onMouseOut={hoverOff}
+        onTouchStart={hoverOn}
+        onTouchEnd={hoverOff}
+        onTouchCancel={hoverOff}
+        onFocus={hoverOn}
+        onBlur={hoverOff}
       >
         {text}
       </span>

src/components/TodoWithData.tsx

@@ -143,7 +143,7 @@ const TodoWithData = ({
                 shouldHighlight(tokenIndex)
                   ? {
                       background: `${colors('yellowHighlight')}`,
-                      borderBottom: `3px solid ${colors('darkOrange')}`,
+                      borderBottom: `2px solid ${colors('darkOrange')}`,
                       reset: true,
                       fontWeight: 'bold',
                       from: {

src/lib/snippets.ts

@@ -489,6 +489,12 @@ function toggleTodo(todo: Todo) {
   // ...
 }`
 
+export const dqwb = `function toggleTodo(todo: Todo): Todo {
+  // Little Duckling’s refactoring
+  todo.done = !todo.done
+  return todo
+}`
+
 export const dxfc = `// Associated data. If we're using React, this
 // would be the todo component’s props or state
 [
@@ -513,6 +519,14 @@ console.log(\`{ id: 1, text: '…', done: false }\`)
 console.log('Actual:')
 console.log(result)`
 
+export const njgr = `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
+}`
+
 export const ntau = `function toggleTodo(todo: Todo): Todo {
   // Little Duckling’s code from earlier:
   // Missing the "id" property
@@ -522,6 +536,13 @@ export const ntau = `function toggleTodo(todo: Todo): Todo {
   }
 }`
 
+export const qbgu = `// Returns a new todo object
+// with the opposite boolean value
+// for the "done" proprty.
+function toggleTodo(todo) {
+  // ...
+}`
+
 export const reel = `function toggleTodo(todo) {
   return {
     text: todo.text,
@@ -534,6 +555,22 @@ export const tgvw = `const bar: Todo = {
   done: true
 }`
 
+export const uxlb = `function toggleTodo(todo: Todo): Todo {
+  // Little Duckling’s refactoring
+  todo.done = !todo.done
+  return todo
+}`
+
+export const vgnq = `// 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
+  }
+}`
+
 export const vpco = `// Returns a new todo object with the opposite
 // boolean value for the "done" proprty.
 function toggleTodo(todo) {
@@ -546,6 +583,29 @@ function toggleTodo(todo) {
   // { id: …, text: '…', done: true }
 }`
 
+export const wymp = `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)`
+
+export const yhto = `type Todo = {
+  readonly id: number
+  readonly text: string
+  readonly done: boolean
+}`
+
 export const ywiv = `// The return value must match the Todo type
 function toggleTodo(todo: Todo): Todo {
   // ...