Added feature to check, uncheck and reset todos items

Author: aidanshw

app/controllers/home_controller.rb

@@ -9,19 +9,22 @@ def landing
 
   def edit_todo_item
     @todo_item.update(todo_item_params)
+    render json: @todo_item
   end
 
   def reset_todo_items
     Todo.update_all(checked: false)
+    @todos = Todo.all.order(:id)
+    render json: @todos
   end
 
   private
 
   def todo_item_params
-    params.permit(:id, :title, :checked)
+    params.require(:home).permit(:id, :title, :checked)
   end
 
   def set_todo_item
-    @todo_item = Todo.find(todo_item_params[:id])
+    @todo_item = Todo.find(params[:id])
   end
 end

app/javascript/components/TodoList/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } 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 [todoList, setTodoList] = useState([...todoItems]);
   useEffect(() => {
     const token = document.querySelector(
       "[name=csrf-token]"
@@ -25,21 +26,34 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
     e: React.ChangeEvent<HTMLInputElement>,
     todoItemId: number
   ): void => {
+    const checked = e.target.checked;
     axios.post("/todo", {
       id: todoItemId,
       checked: e.target.checked,
+    }).then(() => {
+      setTodoList(prevList => {
+        const updatedList = prevList.map(todo => {
+          if (todo.id === todoItemId) {
+            todo.checked = checked;
+          }
+          return todo;
+        })
+        return updatedList;
+      });
     });
   };
 
   const resetButtonOnClick = (): void => {
-    axios.post("/reset").then(() => location.reload());
+    axios.post("/reset").then(response => {
+      setTodoList(response.data);
+    });
   };
 
   return (
     <Container>
       <h3>2022 Wish List</h3>
       <ListGroup>
-        {todoItems.map((todo) => (
+        {todoList.map((todo) => (
           <ListGroup.Item key={todo.id}>
             <Form.Check
               type="checkbox"

config/routes.rb

@@ -3,5 +3,5 @@
 Rails.application.routes.draw do
   root to: "home#landing"
   post "todo", to: "home#edit_todo_item"
-  post "reset", to: "home#reset_todo_item"
+  post "reset", to: "home#reset_todo_items"
 end