6 - Delete a to-do

To delete a to-do, we will need a new column to add a delete button.

We will also need to write a function that takes the to-do Thing and deletes it on click:

// components/TodoList/index.jsx

import {
  addDatetime,
  getDatetime,
  getSourceUrl,
  getThingAll,
  getUrl,
  removeDatetime,
	removeThing,
  saveSolidDatasetAt,
  setThing,
} from "@inrupt/solid-client";

function TodoList({ todoList, setTodoList }) {
// ...
	const deleteTodo = async (todo) => {
	    const todosUrl = getSourceUrl(todoList);
	    const updatedTodos = removeThing(todoList, todo);
	    const updatedDataset = await saveSolidDatasetAt(todosUrl, updatedTodos, {
	      fetch,
	    });
	    setTodoList(updatedDataset);
	  };
// ...
}

We can get the to-do Thing using the useThing hook (like we did before with the CompleteBody component to mark to-dos as done), so it doesn't really matter which property we use, but because property is not optional in the TableColumn component, we'll use the to-do text.

Since we need to use a hook, we have to write a proper React component for the custom body outside the TodoList component:

// components/TodoList/index.jsx

function DeleteButton({ deleteTodo }) {
    const { thing } = useThing();
    return (
      <button className="delete-button" onClick={() => deleteTodo(thing)}>
        Delete
      </button>
    );
  }

And add the column to the table, after the last column:

// components/TodoList/index.jsx

<TableColumn
          property={TEXT_PREDICATE}
          header=""
          body={() => <DeleteButton deleteTodo={deleteTodo} />}
        />

That's it! Now if we click the delete button, we can delete the to-do.

💡
Commit: b9ad571