From cae92748ebf923fc12ecb6e8cf43ef598d929344 Mon Sep 17 00:00:00 2001
From: Mohammad <zamhirabeta@gmail.com>
Date: Mon, 7 Nov 2022 21:42:00 +0330
Subject: [PATCH 1/5] add in-progress button to UnderBar

---
 src/App/TodoList/index.tsx            | 17 +++++++++++++----
 src/App/UnderBar/FilterLink/index.tsx | 15 ++++++++++++---
 src/App/index.tsx                     |  3 ++-
 src/dataStructure.ts                  |  1 +
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/App/TodoList/index.tsx b/src/App/TodoList/index.tsx
index 0f74c92f..0516773e 100644
--- a/src/App/TodoList/index.tsx
+++ b/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
diff --git a/src/App/UnderBar/FilterLink/index.tsx b/src/App/UnderBar/FilterLink/index.tsx
index 710c1e91..157222e0 100644
--- a/src/App/UnderBar/FilterLink/index.tsx
+++ b/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>
diff --git a/src/App/index.tsx b/src/App/index.tsx
index 41e062ba..8dc59b6f 100644
--- a/src/App/index.tsx
+++ b/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>
diff --git a/src/dataStructure.ts b/src/dataStructure.ts
index ae610c59..101997e3 100644
--- a/src/dataStructure.ts
+++ b/src/dataStructure.ts
@@ -7,6 +7,7 @@ export interface Todo {
   id: string
   bodyText: string
   completed: boolean
+  inProgress: boolean
 }
 
 export type TodoListType = Todo[]

From f66dfc3cf53d6023a5194062add9fbb3b5e04182 Mon Sep 17 00:00:00 2001
From: Mohammad <zamhirabeta@gmail.com>
Date: Mon, 7 Nov 2022 22:44:18 +0330
Subject: [PATCH 2/5] add in-progress button in each item

---
 src/App/NewTodoInput/index.tsx  |  5 ++++-
 src/App/TodoList/Item/index.tsx | 34 ++++++++++++++++++++++++++++++---
 src/App/TodoList/Item/style.ts  | 28 +++++++++++++++++++++++++++
 3 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/src/App/NewTodoInput/index.tsx b/src/App/NewTodoInput/index.tsx
index ba877033..9e3e194a 100644
--- a/src/App/NewTodoInput/index.tsx
+++ b/src/App/NewTodoInput/index.tsx
@@ -19,11 +19,14 @@ const NewTodoTextInput: React.FC = () => {
       const todo: Todo = {
         bodyText: textInput.current.value,
         completed: false,
+        inProgress: false,
         id: UUID(),
       }
 
       // add new TODO to entire TodoList
-      setAppState({ todoList: [todo, ...appState.todoList] })
+      setAppState({
+        todoList: [todo, ...appState.todoList],
+      })
 
       // reset text input UI value
       textInput.current.value = ''
diff --git a/src/App/TodoList/Item/index.tsx b/src/App/TodoList/Item/index.tsx
index 4ff6d6e7..0d94a8de 100644
--- a/src/App/TodoList/Item/index.tsx
+++ b/src/App/TodoList/Item/index.tsx
@@ -80,7 +80,19 @@ const Item: React.FC<Props> = ({ todo }) => {
     setAppState({ todoList: removed })
   }
 
-  const handleTodoTextEdit = (e: React.ChangeEvent<HTMLInputElement>, onEdit: Todo['id']): void => { /* eslint-disable-line prettier/prettier */
+  const setInprogress = (id: Todo['id']) => {
+    let temp: TodoListType = appState.todoList.map((t) =>
+      t.inProgress ? { ...t, inProgress: false } : t
+    )
+    temp = temp.map((t) => (t.id === id ? { ...t, inProgress: true } : t))
+    setAppState({ todoList: temp })
+  }
+
+  const handleTodoTextEdit = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    onEdit: Todo['id']
+  ): void => {
+    /* eslint-disable-line prettier/prettier */
     const edited = appState.todoList.map((t: Todo): Todo => {
       if (t.id === onEdit) {
         return { ...t, bodyText: e.target.value }
@@ -112,6 +124,7 @@ const Item: React.FC<Props> = ({ todo }) => {
           />
 
           {/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */}
+
           <label
             onClick={onClick}
             data-cy="todo-body-text"
@@ -119,6 +132,17 @@ const Item: React.FC<Props> = ({ todo }) => {
           >
             {todo.bodyText}
           </label>
+          {!todo.completed && todo.inProgress && (
+            <span className="inProgressActiveBadeg">In Progress</span>
+          )}
+          {!todo.completed && !todo.inProgress && (
+            <span
+              className="inProgressBadeg"
+              onClick={() => setInprogress(todo.id)}
+            >
+              In Progress
+            </span>
+          )}
           {/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */}
           <button
             className="destroy"
@@ -132,8 +156,12 @@ const Item: React.FC<Props> = ({ todo }) => {
           onBlur={(e: React.FocusEvent<HTMLInputElement>) => onBlurEdit(e)}
           className="edit"
           value={todo.bodyText}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleTodoTextEdit(e, todo.id)} /* eslint-disable-line prettier/prettier */
-          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => submitEditText(e)} /* eslint-disable-line prettier/prettier */
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            handleTodoTextEdit(e, todo.id)
+          } /* eslint-disable-line prettier/prettier */
+          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>
+            submitEditText(e)
+          } /* eslint-disable-line prettier/prettier */
           data-cy="todo-edit-input"
           data-testid="todo-edit-input"
         />
diff --git a/src/App/TodoList/Item/style.ts b/src/App/TodoList/Item/style.ts
index 60e6863b..32ea5f8d 100644
--- a/src/App/TodoList/Item/style.ts
+++ b/src/App/TodoList/Item/style.ts
@@ -35,6 +35,12 @@ export const Layout = styled.div`
     margin: 0 0 0 43px;
   }
 
+  .view {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
   .editing .view {
     display: none;
   }
@@ -111,4 +117,26 @@ export const Layout = styled.div`
   .editing:last-child {
     margin-bottom: -1px;
   }
+
+  .inProgressActiveBadeg {
+    padding: 3px 5px;
+    border-radius: 3px;
+    font-size: 0.5em;
+    background-color: #f39c12;
+    color: white;
+    font-weight: 600;
+    margin-right: 70px;
+    cursor: pointer;
+  }
+
+  .inProgressBadeg {
+    padding: 3px 5px;
+    border-radius: 3px;
+    font-size: 0.5em;
+    background-color: #bdc3c7;
+    color: white;
+    font-weight: 600;
+    margin-right: 70px;
+    cursor: pointer;
+  }
 `

From b7db9f5051a48fd7c823cac0d97a84df0a264445 Mon Sep 17 00:00:00 2001
From: Mohammad <zamhirabeta@gmail.com>
Date: Mon, 7 Nov 2022 22:54:27 +0330
Subject: [PATCH 3/5] add functionality to in-progress button in FilterBar

---
 src/App/TodoList/Item/index.tsx | 12 ++++++++++--
 src/App/TodoList/Item/style.ts  | 11 +++++++++++
 src/App/TodoList/index.tsx      |  4 +++-
 src/App/UnderBar/index.tsx      |  8 ++++++--
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/App/TodoList/Item/index.tsx b/src/App/TodoList/Item/index.tsx
index 0d94a8de..e0428203 100644
--- a/src/App/TodoList/Item/index.tsx
+++ b/src/App/TodoList/Item/index.tsx
@@ -62,7 +62,7 @@ const Item: React.FC<Props> = ({ todo }) => {
       // search clicked item by id...
       if (t.id === id) {
         // change complated status only clicked item
-        return { ...t, completed: !t.completed }
+        return { ...t, completed: !t.completed, inProgress: false }
         // return other item without any changes
       } else {
         return t
@@ -140,7 +140,15 @@ const Item: React.FC<Props> = ({ todo }) => {
               className="inProgressBadeg"
               onClick={() => setInprogress(todo.id)}
             >
-              In Progress
+              Backlog
+            </span>
+          )}
+          {todo.completed && !todo.inProgress && (
+            <span
+              className="completedBadeg"
+              onClick={() => setInprogress(todo.id)}
+            >
+              Completed
             </span>
           )}
           {/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */}
diff --git a/src/App/TodoList/Item/style.ts b/src/App/TodoList/Item/style.ts
index 32ea5f8d..117123e4 100644
--- a/src/App/TodoList/Item/style.ts
+++ b/src/App/TodoList/Item/style.ts
@@ -139,4 +139,15 @@ export const Layout = styled.div`
     margin-right: 70px;
     cursor: pointer;
   }
+
+  .completedBadeg {
+    padding: 3px 5px;
+    border-radius: 3px;
+    font-size: 0.5em;
+    background-color: #2ecc71;
+    color: white;
+    font-weight: 600;
+    margin-right: 70px;
+    cursor: pointer;
+  }
 `
diff --git a/src/App/TodoList/index.tsx b/src/App/TodoList/index.tsx
index 0516773e..e8e9066e 100644
--- a/src/App/TodoList/index.tsx
+++ b/src/App/TodoList/index.tsx
@@ -46,7 +46,9 @@ const TodoList: React.FC = () => {
                 case '/':
                   return true
                 case '/backlog':
-                  return t.completed === false
+                  return t.completed === false && t.inProgress === false
+                case '/in-progress':
+                  return t.inProgress === true
                 case '/completed':
                   return t.completed === true
                 default:
diff --git a/src/App/UnderBar/index.tsx b/src/App/UnderBar/index.tsx
index e43d2cb0..6e3e7516 100644
--- a/src/App/UnderBar/index.tsx
+++ b/src/App/UnderBar/index.tsx
@@ -9,8 +9,12 @@ import { Layout } from './style'
 
 const UnderBar: React.FC = () => {
   const [appState, setAppState] = useRecoilState<AppState>(recoilState)
-  const completed: number = appState.todoList.filter(t => t.completed === true).length /* eslint-disable-line prettier/prettier */
-  const backlog: number = appState.todoList.filter(t => t.completed === false).length /* eslint-disable-line prettier/prettier */
+  const completed: number = appState.todoList.filter(
+    (t) => t.completed
+  ).length /* eslint-disable-line prettier/prettier */
+  const backlog: number = appState.todoList.filter(
+    (t) => t.completed === false
+  ).length /* eslint-disable-line prettier/prettier */
 
   function clearCompleted(): void {
     setAppState({

From 3384b32f8ae830f39f96fb3380cc21b6470bf3e0 Mon Sep 17 00:00:00 2001
From: Mohammad <zamhirabeta@gmail.com>
Date: Mon, 7 Nov 2022 22:57:15 +0330
Subject: [PATCH 4/5] resolve a bug

---
 src/App/TodoList/Item/index.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/App/TodoList/Item/index.tsx b/src/App/TodoList/Item/index.tsx
index e0428203..59f3f876 100644
--- a/src/App/TodoList/Item/index.tsx
+++ b/src/App/TodoList/Item/index.tsx
@@ -144,12 +144,7 @@ const Item: React.FC<Props> = ({ todo }) => {
             </span>
           )}
           {todo.completed && !todo.inProgress && (
-            <span
-              className="completedBadeg"
-              onClick={() => setInprogress(todo.id)}
-            >
-              Completed
-            </span>
+            <span className="completedBadeg">Completed</span>
           )}
           {/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */}
           <button

From dc5d2e0990e20e7621438ec7a53f0a83b4b9df33 Mon Sep 17 00:00:00 2001
From: Mohammad <zamhirabeta@gmail.com>
Date: Mon, 7 Nov 2022 23:02:14 +0330
Subject: [PATCH 5/5] remove logs

---
 src/App/TodoList/index.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/App/TodoList/index.tsx b/src/App/TodoList/index.tsx
index e8e9066e..760a1881 100644
--- a/src/App/TodoList/index.tsx
+++ b/src/App/TodoList/index.tsx
@@ -23,10 +23,6 @@ const TodoList: React.FC = () => {
     }) /* eslint-disable-line prettier/prettier */
   }
 
-  useEffect(() => {
-    console.log('appState', appState)
-  }, [appState])
-
   return (
     <Layout>
       <section className="main">