Компонент Undo REACT

Question

Я пишу свой первый TODO list на реакт и хочу организовать при помощи компонента функцию undo, которая бы отменяла последнее удаление todo элемента. Мой код работает при удалении одного элемента (сначала он удаляется из листа элементов, а затем, через 5 секунд и из localStorage), однако, если удалить сразу несколько, то удаляться будет только один, первый, попавший на удаление.

Сам компонент UNDO выглядит следующим образом

import React, {useEffect, useState} from 'react';
import MyButton from "./UI/button/MyButton";

const Undo = ({addNewTask, undoState}) => {

    const timeoutTime = 5 * 1000; //set in seconds


    const [currentUndo, setCurrentUndo] = useState(undoState.isUndo);


    useEffect(() =>{
        console.log("currentUndo = " + currentUndo);
    }, [currentUndo])

    function deleteEl(){
        console.log('удаление элемента' + currentUndo)
        let store = JSON.parse(localStorage.tasks);
        store = store.filter(task => task.id !== currentUndo);
        localStorage.tasks = JSON.stringify(store);

        undoState.setIsUndo(-1);
    }


    useEffect( () =>{
        let undoTimer = setTimeout(deleteEl, timeoutTime)

        console.log("timer id = " + undoTimer);


        return () =>{
            if (currentUndo === -1)
            {
                console.log("удаление таймера " + undoTimer)
                clearTimeout(undoTimer);
            }
            else
                console.log("удаление компонента");
        }
    }, [undoState])


    return (
        <div  className="undo">
            {/*При нажатии на кнопку удаления появляется этот блок,
            происходит удаление из State,
            удаление из localStorage не происходит,
            пока не истечет таймер*/}

            <span>task is removed</span>
            <MyButton onClick={() => {
                let undoTask = JSON.parse(localStorage.tasks).filter(task => task.id === undoState.isUndo)[0];
                addNewTask(undoTask);
                undoState.setIsUndo(-1);
                setCurrentUndo(-1);
            }}>UNDO</MyButton>
        </div>
    );
};

export default Undo;

и отрисовывается он в следующем контексте

{isUndo !== -1 && <Undo undoState={{isUndo, setIsUndo}} addNewTask={addNewTask}></Undo>}

Функция addNewTask отвечает за добавление элемента обратно из localStorage в лист тасков, isUndo содержит в себе либо -1, либо id удаляемого элемента.

По логам я выяснил, что новый isUndo попадает в компонент, но currentUndо не изменяется

Буду рад любым предложениям

БЛОГ НА HUSL

Компонент Undo REACT

Ответы (0 шт):