add in-progress button to UnderBar

Author: zamhirabeta

src/App/TodoList/index.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useEffect } from 'react'
 import React from 'react'
 import { useLocation } from 'react-router-dom'
 import { useRecoilState } from 'recoil'
@@ -13,11 +13,20 @@ const TodoList: React.FC = () => {
   const { pathname } = useLocation()
   const [appState, setAppState] = useRecoilState<AppState>(recoilState)
 
-  function toggleAllCheckbox(e: React.ChangeEvent<HTMLInputElement>): void { /* eslint-disable-line prettier/prettier */
+  function toggleAllCheckbox(e: React.ChangeEvent<HTMLInputElement>): void {
+    /* eslint-disable-line prettier/prettier */
     // reverse all todo.completed: boolean flag
-    setAppState({ todoList: appState.todoList.map((t: Todo): Todo => ({ ...t, completed: e.target.checked })) }) /* eslint-disable-line prettier/prettier */
+    setAppState({
+      todoList: appState.todoList.map(
+        (t: Todo): Todo => ({ ...t, completed: e.target.checked })
+      ),
+    }) /* eslint-disable-line prettier/prettier */
   }
 
+  useEffect(() => {
+    console.log('appState', appState)
+  }, [appState])
+
   return (
     <Layout>
       <section className="main">
@@ -36,7 +45,7 @@ const TodoList: React.FC = () => {
               switch (pathname) {
                 case '/':
                   return true
-                case '/active':
+                case '/backlog':
                   return t.completed === false
                 case '/completed':
                   return t.completed === true

src/App/UnderBar/FilterLink/index.tsx

@@ -17,10 +17,19 @@ const FilterLink: React.FC = () => {
       <li>
         <Link
           data-cy="active-filter"
-          className={pathname === '/active' ? 'selected' : ''}
-          to="/active"
+          className={pathname === '/backlog' ? 'selected' : ''}
+          to="/backlog"
         >
-          Active
+          Backlog
+        </Link>
+      </li>
+      <li>
+        <Link
+          data-cy="active-filter"
+          className={pathname === '/in-progress' ? 'selected' : ''}
+          to="/in-progress"
+        >
+          In progress
         </Link>
       </li>
       <li>

src/App/index.tsx

@@ -12,8 +12,9 @@ const App: React.FC = () => (
       <RecoilRoot>
         <Routes>
           <Route path="/" element={<TodoMVC />} />
-          <Route path="/active" element={<TodoMVC />} />
+          <Route path="/backlog" element={<TodoMVC />} />
           <Route path="/completed" element={<TodoMVC />} />
+          <Route path="/in-progress" element={<TodoMVC />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </RecoilRoot>

src/dataStructure.ts

@@ -7,6 +7,7 @@ export interface Todo {
   id: string
   bodyText: string
   completed: boolean
+  inProgress: boolean
 }
 
 export type TodoListType = Todo[]