add functionality to in-progress button in FilterBar

Author: zamhirabeta

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 */}

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;
+  }
 `

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:

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({