add in-progress button in each item

Author: zamhirabeta

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 = ''

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,13 +124,25 @@ 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"
             data-testid="todo-body-text"
           >
             {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"
         />

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