From e10bd5d369711294410e208d4fc51f6a9c368185 Mon Sep 17 00:00:00 2001
From: Harshvardhan Chauhan <harshvardhancc@gmail.com>
Date: Sat, 10 Sep 2022 19:54:41 +0000
Subject: [PATCH 1/4] Resolving reset button and checked box button bug

---
 app/controllers/home_controller.rb           |  2 +-
 app/javascript/components/TodoList/index.tsx | 15 ++++++++++++---
 db/schema.rb                                 |  2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
index 064809b..c5c2ac4 100644
--- a/app/controllers/home_controller.rb
+++ b/app/controllers/home_controller.rb
@@ -11,7 +11,7 @@ def edit_todo_item
     @todo_item.update(todo_item_params)
   end
 
-  def reset_todo_items
+  def reset_todo_item
     Todo.update_all(checked: false)
   end
 
diff --git a/app/javascript/components/TodoList/index.tsx b/app/javascript/components/TodoList/index.tsx
index 60f7fd3..e9da20a 100644
--- a/app/javascript/components/TodoList/index.tsx
+++ b/app/javascript/components/TodoList/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Container, ListGroup, Form } from "react-bootstrap";
 import { ResetButton } from "./uiComponent";
 import axios from "axios";
@@ -14,6 +14,7 @@ type Props = {
 };
 
 const TodoList: React.FC<Props> = ({ todoItems }) => {
+  const [todoItemsState, setTodoItemsState] = useState(todoItems)
   useEffect(() => {
     const token = document.querySelector(
       "[name=csrf-token]"
@@ -23,12 +24,20 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
 
   const checkBoxOnCheck = (
     e: React.ChangeEvent<HTMLInputElement>,
-    todoItemId: number
+    todoItemId: number,
   ): void => {
     axios.post("/todo", {
       id: todoItemId,
       checked: e.target.checked,
     });
+    const newState = todoItemsState.map(obj => {
+      if(obj.id == todoItemId){
+        return {...obj, checked: !obj.checked}
+      }else{
+        return obj;
+      }
+    })
+    setTodoItemsState(newState);
   };
 
   const resetButtonOnClick = (): void => {
@@ -39,7 +48,7 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
     <Container>
       <h3>2022 Wish List</h3>
       <ListGroup>
-        {todoItems.map((todo) => (
+        {todoItemsState.map((todo) => (
           <ListGroup.Item key={todo.id}>
             <Form.Check
               type="checkbox"
diff --git a/db/schema.rb b/db/schema.rb
index c6bc617..6b73feb 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2022_03_05_192904) do
+ActiveRecord::Schema.define(version: 2022_03_05_213159) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"

From 2923110def7d1c06ce4e24da77b55eb42f100612 Mon Sep 17 00:00:00 2001
From: Harshvardhan Chauhan <harshvardhancc@gmail.com>
Date: Sat, 10 Sep 2022 21:04:33 +0000
Subject: [PATCH 2/4] Updating the styles with adding progress bar and making
 sure to track the update with progress bar

---
 app/controllers/home_controller.rb           |  2 +-
 app/javascript/components/TodoList/index.tsx | 27 +++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
index c5c2ac4..57d3d2b 100644
--- a/app/controllers/home_controller.rb
+++ b/app/controllers/home_controller.rb
@@ -7,7 +7,7 @@ def landing
     @todos = Todo.all.order(:id)
   end
 
-  def edit_todo_item
+  def edit_edit_todo_itemtodo_item
     @todo_item.update(todo_item_params)
   end
 
diff --git a/app/javascript/components/TodoList/index.tsx b/app/javascript/components/TodoList/index.tsx
index e9da20a..2be9d0b 100644
--- a/app/javascript/components/TodoList/index.tsx
+++ b/app/javascript/components/TodoList/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Container, ListGroup, Form } from "react-bootstrap";
+import { Container, ListGroup, Form, ProgressBar } from "react-bootstrap";
 import { ResetButton } from "./uiComponent";
 import axios from "axios";
 
@@ -7,6 +7,7 @@ type TodoItem = {
   id: number;
   title: string;
   checked: boolean;
+  created_at: Date;
 };
 
 type Props = {
@@ -15,6 +16,7 @@ type Props = {
 
 const TodoList: React.FC<Props> = ({ todoItems }) => {
   const [todoItemsState, setTodoItemsState] = useState(todoItems)
+  const [progressBar, setProgressBar] = useState(0);
   useEffect(() => {
     const token = document.querySelector(
       "[name=csrf-token]"
@@ -44,6 +46,27 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
     axios.post("/reset").then(() => location.reload());
   };
 
+  // const getProgressBar = () => {
+  //   const progressItem = [];
+  //   todoItemsState.map(item => {
+  //     if(item.checked){
+  //       progressItem.push(item)
+  //     }
+  //   })
+    
+  //   return ((progressItem.length/todoItemsState.length)*100).toString();
+  // }
+
+  useEffect(() => {
+    const progressItem = [];
+    todoItemsState.map(item => {
+      if(item.checked){
+        progressItem.push(item)
+      }
+    })
+    setProgressBar((progressItem.length/todoItemsState.length)*100)
+  }, [todoItemsState])
+
   return (
     <Container>
       <h3>2022 Wish List</h3>
@@ -58,6 +81,8 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
             />
           </ListGroup.Item>
         ))}
+        <br />
+        <ProgressBar variant="success" now={progressBar}/>
         <ResetButton onClick={resetButtonOnClick}>Reset</ResetButton>
       </ListGroup>
     </Container>

From 8ecef6bed48b889aa8e6dbba7556938a4bae3346 Mon Sep 17 00:00:00 2001
From: Harshvardhan Chauhan <harshvardhancc@gmail.com>
Date: Sat, 10 Sep 2022 21:06:44 +0000
Subject: [PATCH 3/4] Removing changes which are not intended

---
 app/controllers/home_controller.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
index 57d3d2b..c5c2ac4 100644
--- a/app/controllers/home_controller.rb
+++ b/app/controllers/home_controller.rb
@@ -7,7 +7,7 @@ def landing
     @todos = Todo.all.order(:id)
   end
 
-  def edit_edit_todo_itemtodo_item
+  def edit_todo_item
     @todo_item.update(todo_item_params)
   end
 

From 8df1fcd93244307bc23ccd3971e8be6ed92a39cb Mon Sep 17 00:00:00 2001
From: Harshvardhan Chauhan <harshvardhancc@gmail.com>
Date: Sat, 10 Sep 2022 21:10:22 +0000
Subject: [PATCH 4/4] Removed comments

---
 app/javascript/components/TodoList/index.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/app/javascript/components/TodoList/index.tsx b/app/javascript/components/TodoList/index.tsx
index 2be9d0b..911107b 100644
--- a/app/javascript/components/TodoList/index.tsx
+++ b/app/javascript/components/TodoList/index.tsx
@@ -46,17 +46,6 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
     axios.post("/reset").then(() => location.reload());
   };
 
-  // const getProgressBar = () => {
-  //   const progressItem = [];
-  //   todoItemsState.map(item => {
-  //     if(item.checked){
-  //       progressItem.push(item)
-  //     }
-  //   })
-    
-  //   return ((progressItem.length/todoItemsState.length)*100).toString();
-  // }
-
   useEffect(() => {
     const progressItem = [];
     todoItemsState.map(item => {