Now that we have our TodoService library, we have to go back to our src/TodoList/TodoList.js file and find all of the areas where we used to have the fetch code written into our component. We'll need to start off at the top of our file by importing those three named functions from our TodoService:

import { fetchTodos, createTodo, deleteTodo } from "../TodoService";

Next, we'll need to go into our componentDidMount() function, where we'll modify it to call the fetchTodos() function instead:

  async componentDidMount() {
    const { todos } = await fetchTodos();
    this.setState({ items: todos, loaded: true });
  }

Look at how nice and clean that function is now! This is definitely a move for the better, no matter what! Now, let's move on to our addTodo() function call:

  async addTodo(description) {
    const { status } = await createTodo(description);
    if (status === 200) {
      const newItem = {
        id: this.state.items.length + 1,
        description: description,
        done: false,
        critical: false
      };
      this.setState({
        items: [...this.state.items, newItem]
      });
    }
  }

Finally, we'll modify our removeTodo() function:

  async removeTodo(todoId) {
    const { status } = await deleteTodo(todoId);
    if (status === 200) {
      const filteredItems = this.state.items.filter(todo => {
        return todo.id !== todoId;
      });
      this.setState({ items: filteredItems });
    }
  }

This will get us most of the way back toward fixing our failing tests, but the last place we need to get some work done is in the failing tests themselves.