From 91fb0d873a7421f7325f1d3c0ce7d522605ede56 Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Sun, 17 Oct 2021 17:26:16 +0300
Subject: [PATCH] Made task updating working, fixed task removal (i almost
 fogot how to use array mutationing methods)

---
 src/components/TodoItem.tsx | 15 +++++++++++----
 src/store/slices/todo.ts    | 17 +++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
index 19eda7b..d25a3de 100644
--- a/src/components/TodoItem.tsx
+++ b/src/components/TodoItem.tsx
@@ -9,8 +9,8 @@ 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";
+import { useAppDispatch, useInputValue } from "../hooks";
+import { updateText, markDone, remove } from "../store/slices/todo";
 
 export type TodoItemProps = { task: TaskItemT; index: number };
 
@@ -20,6 +20,9 @@ export const TodoItem: React.FC<TodoItemProps> = ({ task, index }) => {
   const dispatch = useAppDispatch();
 
   const [editing, setEditing] = useState(false);
+  const { value, onChange, submit } = useInputValue(text, (submitValue) =>
+    dispatch(updateText({ index, text: submitValue }))
+  );
 
   return (
     <ListItem>
@@ -31,9 +34,13 @@ export const TodoItem: React.FC<TodoItemProps> = ({ task, index }) => {
         <TextField
           fullWidth
           variant="standard"
-          value={text}
+          value={value}
           autoFocus={true}
-          onBlur={() => setEditing(false)}
+          onChange={onChange}
+          onBlur={() => {
+            setEditing(false);
+            submit();
+          }}
           multiline
         />
       ) : (
diff --git a/src/store/slices/todo.ts b/src/store/slices/todo.ts
index 359ccb8..3c459ce 100644
--- a/src/store/slices/todo.ts
+++ b/src/store/slices/todo.ts
@@ -3,16 +3,25 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { TaskItemT } from "../../types";
 
 const initialState: { tasks: TaskItemT[] } = {
-  tasks: [],
+  tasks: [
+    { done: true, id: 1, text: "hello" },
+    { done: false, id: 2, text: "goodbye" },
+  ],
 };
 
 export const todoSlice = createSlice({
   name: "todo",
-  initialState,
+  initialState: initialState,
   reducers: {
     add: (state, { payload }: PayloadAction<TaskItemT>) => {
       state.tasks.push(payload);
     },
+    updateText: (
+      state,
+      { payload }: PayloadAction<{ index: number; text: string }>
+    ) => {
+      state.tasks[payload.index].text = payload.text;
+    },
     markDone: (
       state,
       { payload }: PayloadAction<{ index: number; value: boolean }>
@@ -20,11 +29,11 @@ export const todoSlice = createSlice({
       state.tasks[payload.index].done = payload.value;
     },
     remove: (state, { payload }: PayloadAction<number>) => {
-      state.tasks.splice(payload);
+      state.tasks.splice(payload, 1);
     },
   },
 });
 
-export const { add, markDone, remove } = todoSlice.actions;
+export const { add, updateText, markDone, remove } = todoSlice.actions;
 
 export default todoSlice.reducer;