Connect an existing React application to an API server created with Swagger

Instructor: [0:01] I've gotten a sample React application here that we're going to wire up to our API server. The way it works is, I've got these components here that the first component displays all of the ToDos and then there's a component to display a single ToDo.

[0:15] The final component allows us to add a new ToDo item. Starting with the all ToDos component, it's looking to pass in all the ToDos. We can define that in our initial state. Here's where using Swagger gets really cool.

[0:32] I don't have to guess what that initial state is going to look like or the data that I'm getting returned from the API because we defined it down here in our definition. We defined the ToDo object and I can use this to model out my initial state. Let's do that now.

[0:47] I'll define it ToDos object, and it's an array. Inside of it, we'll have a ToDo ID, the ToDo itself, the author, the due date, and the flag indicating whether or not it's been completed. Same thing with the single ToDo.

[1:08] We'll define the ToDo itself that's going to be passed in using the schema defined in the Swagger API. Again, we've got the ToDo ID, the ToDo item itself, our author, the due date, and the completed flag. With our initial state defined, we can see that the page loads.

[1:32] It's complete with the empty data that we stubbed out in our initial state. Let's now wire that up so that it talks to the API. We'll start using the component did mount function and we're going to grab the data from the API.

[1:46] I'm going to use a library called Axios, which is just an HTTP wrapper and it returns a promise for the HTTP calls. My API server is running on localhost Port 10010.

[2:01] Since it's a promise, we can use .then so that when that promise is fulfilled, we call our callback function that has a response object. We want to use that to update our state. Since this is inside of a nested function, this isn't available. We need to do this is equal to this.

[2:21] Then inside of our function, we can say underscore this set state and set the ToDos object to equal to the data object of the response that we got back. Now if we reload the page, it displays the list of the ToDos from the API server. Taking a look at our next component, we have the single ToDo component.

[2:49] What that does is in all ToDos, we have this handle select function that calls the display ToDo function from the parent class passing in the ToDo that was selected on. That in turn, gets passed to set the state of our single ToDo item, and then it will display that in a single ToDo.

[3:09] What that does is our single ToDo item here is blank, but then whenever I click on one here, it loads it into the single ToDo component. This is a text box or these are all text boxes, which allow me to update it and then save it. Let's wire that up now.

[3:25] The way the single ToDo update works, is we have these on-change handlers for each text box on there that updates the state of that single ToDo, and then we have the handle update function. Whenever we click Save, calls this function, that we'll use PUT to send that to the API server. Again, we're going to use the Axios library.

[3:49] Using the .PUT method this time, we'll specify the URL to my API server and then we're calling the /ToDo endpoint. Plus, we have to pass in the ID of the ToDo that we're updating and we can get that from this.props.ToDo.ToDo_ID.

[4:08] Then in the body, we need to post the updated ToDo item and that's found at this.props.ToDo. Again, it gives us a promise. When that promise completes, we'll call our callback function with our response, and we can just write out the response itself to the console. If we refresh the page.

[4:30] Now whenever we select one of our ToDos, we can update it, save it and then refresh the page. Our ToDo in the list has been updated. Final thing we need to do, is wire up the ability to create a new ToDo. Whenever we load that component, we're passing in this.handle Add ToDo.

[4:50] This is where we'll add our code. Let me show you how that works real quick. Our new ToDo component brings in a child component called Add ToDo. That Add ToDo is where we see our form for creating new ToDo.

[5:04] Then when we submit that, it calls handle submit, which pulls in this Add ToDo function from the parent class. The new ToDo we created from our form, gets passed in as new ToDo. To save that to the database, the first thing we need to do is create a new ToDo ID. I'm doing that just by getting the length of the current ToDo as we have displayed. Then we'll use that as the ID number. We'll use Axios once again.

[5:34] This time we're going to post to the endpoint and pass along our new ToDo item in the body. When our promise is fulfilled, we can just write out the response. Now we can go and create a new ToDo.

[5:48] When we hit submit, we have a functioning react application that talks to our ToDo API server that's capable of listing the ToDos, adding a new ToDo, and editing individual ToDos.