Submitting the assessment

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
 

app/javascript/components/TodoList/index.tsx

@@ -1,19 +1,22 @@
-import React, { useEffect } from "react";
-import { Container, ListGroup, Form } from "react-bootstrap";
+import React, { useEffect, useState } from "react";
+import { Container, ListGroup, Form, ProgressBar } from "react-bootstrap";
 import { ResetButton } from "./uiComponent";
 import axios from "axios";
 
 type TodoItem = {
   id: number;
   title: string;
   checked: boolean;
+  created_at: Date;
 };
 
 type Props = {
   todoItems: TodoItem[];
 };
 
 const TodoList: React.FC<Props> = ({ todoItems }) => {
+  const [todoItemsState, setTodoItemsState] = useState(todoItems)
+  const [progressBar, setProgressBar] = useState(0);
   useEffect(() => {
     const token = document.querySelector(
       "[name=csrf-token]"
@@ -23,23 +26,41 @@ 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 => {
     axios.post("/reset").then(() => location.reload());
   };
 
+  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>
       <ListGroup>
-        {todoItems.map((todo) => (
+        {todoItemsState.map((todo) => (
           <ListGroup.Item key={todo.id}>
             <Form.Check
               type="checkbox"
@@ -49,6 +70,8 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
             />
           </ListGroup.Item>
         ))}
+        <br />
+        <ProgressBar variant="success" now={progressBar}/>
         <ResetButton onClick={resetButtonOnClick}>Reset</ResetButton>
       </ListGroup>
     </Container>