From 534cfb94af55e6d7375fc8286bcfb93bdd8f22d8 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jason.zhu@xero.com>
Date: Thu, 2 Mar 2023 18:00:07 +1100
Subject: [PATCH] Refactor Todo component and App.tsx

---
 src/App.tsx  | 10 ----------
 src/Todo.tsx | 11 ++++++-----
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 896f138..3ac51d5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,14 +22,6 @@ function App() {
         setText("");
     }
 
-    const handleToggleTodo = (id: number) => {
-        dispatch({ type: TOGGLE_TODO, payload: id});
-    }
-
-    const handleDeleteTodo = (id: number) => {
-        dispatch({ type: DELETE_TODO, payload: id});
-    }
-
     return (
         <div>
             <h1>Todo List</h1>
@@ -46,8 +38,6 @@ function App() {
                         id={todo.id}
                         text={todo.text}
                         completed={todo.completed}
-                        onToggle={handleToggleTodo}
-                        onDelete={handleDeleteTodo}
                     />
                 ))}
             </ul>
diff --git a/src/Todo.tsx b/src/Todo.tsx
index 757976d..f7a02b1 100644
--- a/src/Todo.tsx
+++ b/src/Todo.tsx
@@ -1,20 +1,21 @@
 import React from "react";
+import {useDispatch} from "react-redux";
+import {DELETE_TODO, TOGGLE_TODO} from "./reducers";
 
 interface TodoProps {
     id: number;
     text: string;
     completed: boolean;
-    onToggle: (id: number) => void;
-    onDelete: (id: number) => void;
 }
 
-const Todo = ( { id, text, completed, onToggle, onDelete }: TodoProps) => {
+const Todo = ( { id, text, completed }: TodoProps) => {
+    const dispatch = useDispatch();
     const handleToggle = () => {
-        onToggle(id);
+        dispatch({ type: TOGGLE_TODO, payload: id });
     };
 
     const handleDelete = () => {
-        onDelete(id);
+        dispatch({ type: DELETE_TODO, payload: id });
     };
 
     return (