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

src/App.tsx

@@ -1,25 +1,17 @@
 import React from "react";
+import { Provider } from "react-redux";
 
 import { Layout } from "./components/Layout";
 import { TodoList } from "./components/TodoList";
 import { AppBar } from "./components/AppBar";
-import { TaskItemT } from "./types";
 import { AddTask } from "./components/AddTask";
-
+import store from "./store";
-const tasks: TaskItemT[] = [
-  { text: "test", done: false, id: 0 },
-  { text: "Long, a bit tooooooo0000000000oooooo long test", done: true, id: 1 },
-];
 
 export const App = () => {
   return (
-    <>
+    <Provider store={store}>
-      <Layout
+      <Layout appBar={<AppBar />} title="My tasks" content={<TodoList />} />
-        appBar={<AppBar />}
-        title="My tasks"
-        content={<TodoList tasks={tasks} />}
-      />
       <AddTask />
-    </>
+    </Provider>
   );
 };

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 = {
+export const TodoList: React.FC = () => {
-  tasks: TaskItemT[];
+  const tasks = useAppSelector((state) => state.todo.tasks);
-};
 
-export const TodoList: React.FC<TodoListProps> = ({ tasks }) => {
   return (
     <Paper variant="outlined">
       <List>
-        {tasks.map((task) => (
+        {tasks.map((task, index) => (
-          <TodoItem key={task.id} task={task} />
+          <TodoItem key={task.id} task={task} index={index} />
         ))}
       </List>
     </Paper>