When the user clicks the ‘Edit’ button, the input field opens, allowing the user to type their new task. However, I’m unable to implement saving these changes when the user clicks the ‘Save’ button. Currently, when the user clicks ‘Save,’ the previous task is saved, but the new task disappears.
import { ADD_TASK, REMOVE_TASK, UPDATE_TASK } from "../actionsTypes";
import { v4 as uuidv4 } from "uuid";
export const initialState = {
tasklist: [], //tasklist
};
export function taskReducer(state = initialState, action) {
switch (action.type) {
case ADD_TASK:
return {
...state,
tasklist: [
...state.tasklist,
{
id: uuidv4(),
title: action.payload,
isCompleted: false,
isEditing: false,
status: "To do",
number: state.tasklist.length + 1,
},
],
};
case REMOVE_TASK:
return {
...state,
tasklist: state.tasklist.filter((todo) => action.payload !== todo.id),
};
case UPDATE_TASK:
return {
...state,
tasklist: state.tasklist.map((prevTask) =>
prevTask.id === action.payload.id
? { ...prevTask, title: action.payload.newTitle }
: prevTask
),
};
default:
return state;
}
}
import React, { useState } from "react";
import "./Task.css";
import Button from "@mui/material/Button";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import { useDispatch } from "react-redux";
import { updateTask } from "../../store/actions";
const Task = ({ task, onDelete }) => {
const [isEditing, setIsEditing] = useState(false);
const [inputValue, setInputValue] = useState(task.title);
const dispatch = useDispatch();
const onEdit = () => {
setIsEditing(!isEditing);
};
const onSaveClicked = (title) => {
dispatch(updateTask(title.id, inputValue));
setIsEditing(!isEditing);
};
return (
<li>
{isEditing ? (
<input
id="edittask"
type="text"
value={inputValue}
onChange={(e) => {
// const newName = e.target.value; // setInputValue
// dispatch(updateTask(task.id, newName));
setInputValue(e.target.value);
}}
/>
) : (
<>
{task.number}
<p>{task.title}</p>
{task.isCompleted}
{task.status}
</>
)}
{!isEditing ? (
<Button onClick={onEdit} variant="outlined" endIcon={<EditIcon />}>
Edit
</Button>
) : (
<Button onClick={onSaveClicked} variant="outlined">
Save
</Button>
)}
<Button onClick={onDelete} variant="outlined" endIcon={<DeleteIcon />}>
Remove
</Button>
</li>
);
};
export default Task;
import { ADD_TASK, REMOVE_TASK, UPDATE_TASK } from "./actionsTypes";
export const addTask = (title) => ({
type: ADD_TASK,
payload: title, //title
});
export const removeTask = (id) => ({
type: REMOVE_TASK,
payload: id,
});
export const updateTask = (id, title) => ({
type: UPDATE_TASK,
payload: { id, newName: title },
});
import React from "react";
import InputTask from "../InputTask/InputTask";
import HeaderOfTaskList from "../HeaderOfTaskList/HeaderOfTaskList";
import Task from "../Task/Task";
import { useDispatch, useSelector } from "react-redux";
import { removeTask, addTask } from "../../../redux/store/actions";
import "./TaskList.css";
export const TaskList = () => {
const dispatch = useDispatch();
const task = useSelector((state) => state.tasklist);
const handleDelete = (id) => {
dispatch(removeTask(id));
};
const handleAddTask = (tasklist) => {
dispatch(addTask(tasklist));
};
return (
<div>
<InputTask addTask={handleAddTask} />
<HeaderOfTaskList />
<ul>
{task.map((task) => (
<Task
task={task}
key={task.id}
onDelete={() => handleDelete(task.id)}
/>
))}
</ul>
</div>
);
};
I have the above snippets of code
