Skip to content

Deleting Todo Item from Backend

We need to modify and existing action removeItem that will call our DELETE endpoint on backend, get the data and dispatch action to update our store and remove specific item from the list.

export function addItem(title: string) {
    return async (dispatch: any) => {
        try {
            const addTodoItem: any = await fetch('http://localhost:3001/todo', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    title,
                })
            });

            const body = await addTodoItem.json();

            if (addTodoItem.status !== 200) {
                return dispatch({ type: 'ADD_ITEM_ERROR', message: body.message });
            }

            return dispatch({ type: 'ADD_ITEM_SUCCESS', item: body.todo });
        } catch (error) {
            return dispatch({ type: 'ADD_ITEM_ERROR', message: 'Something went wrong.' });
        }
    };
}

export function removeItem(item_id: string) {
    return async (dispatch: any) => {
        try {
            const removeItem: any = await fetch('http://localhost:3001/todo/' + item_id, {
                method: 'DELETE'
            });

            const body = await removeItem.json();

            if (removeItem.status !== 200) {
                return dispatch({ type: 'REMOVE_ITEM_ERROR', message: body.message });
            }

            return dispatch({ type: 'REMOVE_ITEM_SUCCESS', item_id: item_id });
        } catch (error) {
            return dispatch({ type: 'REMOVE_ITEM_ERROR', message: 'Something went wrong.' });
        }
    };
}

export function markItemAsDone(item_id: number) {
    return {
        type: 'MARK_ITEM_DONE',
        item_id
    }
}

export function getTodos() {
    return async (dispatch: any) => {
        try {
            const todoList: any = await fetch('http://localhost:3001/todos', {
                method: 'GET'
            });

            const body = await todoList.json();

            if (todoList.status !== 200) {
                return dispatch({ type: 'GET_TODOS_ERROR', message: body.message });
            }

            return dispatch({ type: 'GET_TODOS_SUCCESS', items: body.data });
        } catch (error) {
            return dispatch({ type: 'GET_TODOS_ERROR', message: 'Something went wrong.' });
        }
    };
}

We will now have 2 action types for removing an item REMOVE_ITEM_SUCCESS that will dispatch action to reducer with item id so we can find that item in the list and delete. Also, REMOVE_ITEM_ERROR that will be called in case something went wrong and pass error message to be stored in reducer.