React Native (feat. Redux) Exercise: Saving Todo Items to the Server

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Scott Moss: What I wanna do now, actually is we're actually gonna hook our Todo app up to the server, but there is no server. So we need to make a quick server, right quick. And it's gonna take like one second, you don't even have to write any code really.

[00:00:15] So if you could just head over to your terminal, and if you just type in npm install, I'm gonna put i for short, and --save json-server. You can do this locally or globally, it's up to you. I already have it globally. So actually, I'm just gonna install it globally to make sure, so json-server.

[00:00:38] So this, literally, you give it a JSON file and it creates a RESTful server for you. It's super easy. So, we'll just have this JSON Server here. So once you have that, just head over to the app that we're working on. And on the root of the app, just create a new file, and you can call it data, or db.json.

[00:00:58] And it's just gonna be a JSON file that has a todos property whose value is a empty array. And that's it, that's all you gotta do.
>> Scott Moss: So just make any filename you want, I put db.json. And just make sure this is an object with the todos array in it.

[00:01:22] That's it. So once you have that, and once you have json-server started, in a new tab, you can just run json-server followed by the name of the file you wanna serve, it's database.json. And hit Enter, it created a new API Server right here on 3000. And we can actually go take a look at it.

[00:01:46] It's pretty cool if you haven't used this before. There it is. Here's our JSON Server. Here's our resource, has a todos resource that we can do CRUD on. So we can post to this todos like this. So I can come in here and I can post whatever I want, I can say http localhost:3000/todos.

[00:02:08] And I wanna create a new todo that has a name called cleanup. And I posted it and it gave it a id of 1. And then the value that I posted, which was cleanup. So now if I go look at it, it should be there. There it is.

[00:02:25] And it also, it does that because it has rights to the file.
>> Scott Moss: Pretty cool, so that's gonna be our API server for our app right quick. So we have that, if you just-
>> Speaker 2: What was the command to start it?
>> Scott Moss: Yeah, the command was the exact same with the package, it's just json-server followed by the file.

[00:02:44] Which in this case, was whatever file you wanted to use. I used db.json.
>> Scott Moss: Yeah, so if you just run that, you've got a RESTful server. You can do all CRUD on it, not just POST or GET, like, anything. It's pretty cool. Pretty good way to prototype some stuff.

[00:03:02] All right, so now, once you have that, then the challenge is or the exercise is going to be actually, get, go away. It's gonna be actually using the server instead of, let's go up to the todo. Instead of storing our state locally here in the component, we're gonna use the server to fetch the data, the state, and post it back to the server when we change it.

[00:03:30] So I'll start off with just one example what that will look like. So first, let's say, let me switch this back,
>> Scott Moss: To Todo.
>> Scott Moss: Is it still running? Did I stop it? Naw, I didn't stop it, let's just run it again just in case. So an example of that would be, let's actually just create a todo and see how that will look like.

[00:03:59] So on create todo, which is on this Press right here, instead of setting the state, what I would do is, I'm gonna comment that out for now. I don't even really need the todos either right now either. So on Press, what I would do is I would just get the todo value, which would be,

[00:04:18]
>> Scott Moss: this.state.newTodo, I would just say fetch and method, post, body, which would be the body that I wanna post of the new Todo. So I'll say all todos have a name property, and that name property is gonna be this.state.newTodo. And headers, I'll say Content-Type, which is application/json, so I'll do that.

[00:04:59]
>> Scott Moss: And then I'll do the same thing we did before, which was get the json, and then get the data back. I don't know what JSON Server sends back. Hopefully it'll send back the whole thing. And then we'll do this.setState with that data.
>> Scott Moss: With the new todos actually.

[00:05:23] So then, yeah, this is where we'll update the new todos with that state.
>> Scott Moss: So this has state.todos plus that data that came back. So something like that.
>> Scott Moss: So let's see if this actually works. So first thing, I forgot to put the url. There we go, that's the most important thing.

[00:05:56] So localhost:3000/todos. There we go, so now when we press it, it should go out there and then we also wanna do this, too.
>> Scott Moss: There we go. But this is going to break because it is now todo.name. So now if we type in some stuff, let me refresh just to make sure the hot reload is not sticking.

[00:06:36] There we go, and I say clean up, hit make, it looks like something happened. Let's look at the, I don't have the server on, oops.
>> Scott Moss: Let's turn it on. There we go.
>> Scott Moss: I'll turn the server on.
>> Scott Moss: I got it, there we go. Cool, turn the server on, clean up, make and we get error string.

[00:07:20] Dynamic type string but had type object, constructing arguments. Yeah, you have to actually JSON stringify this yourself, I forgot. And again, this is not React Native, this is literally window.fetch. You gotta do this in a web too. It's kind of aggravating. Why have to stringify this myself? Why do I have to say application type JSON?

[00:07:44] It should just know. But, you have to do it yourself. That's what it was freaking out about.
>> Scott Moss: There we go.
>> Scott Moss: Okay, why are you still freaking out? Let's see, maybe it didn't refresh.
>> Scott Moss: What do you want? All right, let's see, maybe they changed this.
>> Scott Moss: They don't even have it in their docs.

[00:08:35] [LAUGH]
>> Scott Moss: Well, that's awesome.
>> Scott Moss: Luckily it's a web standard and we can just look it up elsewhere.
>> Scott Moss: Or the best place is GitHub, fetch polyfill. There we go.
>> Scott Moss: Okay, looks like I was wrong. It was actually like this.
>> Scott Moss: url still goes first, object is still gonna be second there.

[00:09:20] That's what it was freaking out about. Live debugging.
>> Scott Moss: All right, now, if we do this.
>> Scott Moss: Unexpected URL, okay, http, there we go.
>> Scott Moss: There we go, okay, sweet. So that one worked this time. I got an unhandled promise rejection, which is what I was expecting. But it definitely went through.

[00:09:58] I just need to actually catch this error to see what was going on. I'm not gonna do that right now. We'll do that in the solution. Sweet, so that's what you need to do now using your API, just go ahead and post to the API, and then figure out how to get it back from the API and list it in your application.

[00:10:19] And however you want to do that, that's totally up to you. There's a few ways you can do it. But we'll do that, and then it is 2:37 now, we'll come back at 3:00 and we'll go over the solution.