Step 7

Let's update the App component to use the functions defined in ZirectoryApi.

First, import the functions:

import * as ZirectoryApi from "./ZirectoryApi.js";

Next, update componentDidMount():

componentDidMount() {
  ZirectoryApi
    .getAll()
    .then((meetings) => this.setState({ meetings }));
}

Then, update removeMeeting:

removeMeeting = (meeting) => {
  this.setState((state) => {
    return {
      meetings: state.meetings.filter((m) => m._id !== meeting._id),
    };
  });

  ZirectoryApi.remove(meeting._id);
};

Finally, update addMeeting:

addMeeting = (meeting) => {
  ZirectoryApi.add(meeting).then((m) =>
    this.setState({
      meetings: this.state.meetings.concat(m),
    })
  );
};

As the result of refactoring, the logic for working with the backend API is taken out of the App component and its operations are now simplified.

Save the file and revisit the app in your browser; everything must look and function as before! You must see the sample meetings data and be able to add/remove meetings.