Integrated redux to application. Task list now is using list from the store. Added task marking as done and removal

src/components/TodoItem.tsx

@@ -9,17 +9,24 @@ import TextField from "@mui/material/TextField";
 import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
 
 import { TaskItemT } from "../types";
+import { useAppDispatch } from "../hooks";
+import { markDone, remove } from "../store/slices/todo";
 
-export type TodoItemProps = { task: TaskItemT };
+export type TodoItemProps = { task: TaskItemT; index: number };
 
-export const TodoItem: React.FC<TodoItemProps> = ({ task }) => {
+export const TodoItem: React.FC<TodoItemProps> = ({ task, index }) => {
   const { done, text } = task;
 
+  const dispatch = useAppDispatch();
+
   const [editing, setEditing] = useState(false);
 
   return (
     <ListItem>
-      <Checkbox checked={done} />
+      <Checkbox
+        checked={done}
+        onClick={() => dispatch(markDone({ index, value: !done }))}
+      />
       {editing ? (
         <TextField
           fullWidth
@@ -30,10 +37,19 @@ export const TodoItem: React.FC<TodoItemProps> = ({ task }) => {
           multiline
         />
       ) : (
-        <ListItemText onClick={() => setEditing(true)} primary={text} />
+        <ListItemText
+          sx={{
+            textDecoration: done ? "line-through" : undefined,
+          }}
+          onClick={() => setEditing(true)}
+          primary={text}
+        />
       )}
       <ListItemSecondaryAction>
-        <IconButton aria-label="Delete Todo">
+        <IconButton
+          aria-label="Delete Todo"
+          onClick={() => dispatch(remove(index))}
+        >
           <DeleteOutlined />
         </IconButton>
       </ListItemSecondaryAction>

src/components/TodoList.tsx

@@ -4,18 +4,16 @@ import List from "@mui/material/List";
 import Paper from "@mui/material/Paper";
 
 import { TodoItem } from "./TodoItem";
-import { TaskItemT } from "../types";
+import { useAppSelector } from "../hooks";
 
-export type TodoListProps = {
-  tasks: TaskItemT[];
-};
+export const TodoList: React.FC = () => {
+  const tasks = useAppSelector((state) => state.todo.tasks);
 
-export const TodoList: React.FC<TodoListProps> = ({ tasks }) => {
   return (
     <Paper variant="outlined">
       <List>
-        {tasks.map((task) => (
-          <TodoItem key={task.id} task={task} />
+        {tasks.map((task, index) => (
+          <TodoItem key={task.id} task={task} index={index} />
         ))}
       </List>
     </Paper>