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

Transcript from the "Saving Todo Items to the Server Solution" Lesson

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

[00:00:04]
>> Scott: Actually the first we wanna do is pull down the new Todo when this thing loads up. So let's do that, so what we can do is on componentsWillMount,
>> Scott: No, My God, I can't type, there we go. So there's a lifecycle hook that's gonna be called when its component is about to mount on the app.

[00:00:30] So when it's about to mount what we can do is I need another l here. We can go ahead and just make a call to the API and get to todos and load up our local state. So we'll say fetch from fetch from http://localhosts:3000/todos. And I will say, we'll pass them some options here, we'll say headers are going to be Accept,

[00:01:16]
>> Scott: Application/json.
>> Scott: There we go. And we'll say .then, get the response, res.json, .then data. And then we'll say this.setState of the todos, it's gonna be, we can just call this todos, there we go, yes?
>> Speaker 2: The question on the channel about can you define default styles for every view text or text input?

[00:01:59]
>> Scott: Yeah, so somebody asked this question earlier, I said it in the Hangout or I'm sorry, in the chat, basically you have your mind.
>> Speaker 2: I'm scrolled up.
>> Scott: Okay.
>> Speaker 2: Sorry, forget that [COUGH].
>> Scott: All right, so we have the fetch here on mount, let's just reload, I took off all the reload and stuff, it was giving me problems.

[00:02:21] So let's do that, possible unhandled promise rejection. Anybody else get this error?
>> Speaker 3: Yeah.
>> Scott: You get this error too? Somehow it's just coming style just going. I don't know, let's try that again. No, reload. Okay, network failed. So let's see, let's look at the server, my server running, start that again.

[00:02:54] Let's put in a different port, on my own port 5,000. And I'll come here and change this.
>> Scott: Okay, what? Still getting that error? That's strange. Let's test something right quick, http localhost, yes, there we go, localhosts:5000/todos. Okay, so that totally works. One without fetch is tripped, then let's try this out in a browser and a non-HTTPs location like here.

[00:03:59]
>> Scott: Yeah, this totally works too.
>> Scott: Actually not too sure why react native is. Tripping is not even giving me an error, it's just saying no. Anybody else have this error and was able to resolve it? Is anybody have this error block them right now? You're having the same issue?

[00:04:21] Interesting, [INAUDIBLE].
>> Speaker 3: Yeah, I was trying to post though.
>> Scott: You were trying to post. Okay, well, we'll come back to post, we'll see. I don't know what's going on there. Looks like I just can't do fetch from react native right now. Not too sure why.
>> Speaker 2: Christina in the chat is saying she had to change localhost to her actual machine's IP address.

[00:04:44]
>> Scott: Really? Okay.
>> Speaker 4: Is she on an actual device?
>> Scott: How do you get that? What's a quick command of your IP?
>> Speaker 5: Ipconfig.
>> Scott: Okay.
>> Speaker 5: You got it in.
>> Scott: Okay.
>> Speaker 5: You have to open your network.
>> Scott: Let's do ipconfig.
>> Speaker 5: If.
>> Scott: Let's try that

[00:05:25]
>> Scott: Okay, yeah, that worked. I don't know [LAUGH] what was going on with that. That's weird, but okay, that worked. Let's confirm it by going to the server. Yeah, that's right.
>> Speaker 2: I wonder if it's confused about what localhost means in the simulator.
>> Scott: Yeah, could be the similar.

[00:05:40] I'm never had trouble with it before, I've always used it. I don't know, I'm not too sure cuz some people have an issue. Some people aren't, I'm not too sure what was that about. But anyway, so we fetched the state and we're setting our state to that. Which is just empty nothing and to confirm if I go back with db.jason app, I put something in here.

[00:05:58] I'm expecting there to be objects here with name properties. So I could say name, let's say take out trash and then I restart the server. Actually you're gonna do --watch on a JSON server and it will restart by itself. There we go, and then if we restart this, we should see something.

[00:06:28]
>> Scott: There we go, so take out the trash. So that's the first one cuz that was already here. So now we know that we're pulling data from there, let's actually go ahead and add some data. So we'll say fetch. And we want the same URL here.
>> Scott: And what we do is we'll just copy these headers again.

[00:06:56]
>> Scott: And we'll say the body is going to be JSON.stringify, always .stringify with body. And only we're gonna pass it as a name which is gonna be this .state.newTodo. So only we're gonna pass it here and we also need to pass in the method.
>> Scott: Which is going to be POST, sweet.

[00:07:22] So we got that and then we can say .then, the response, response.json. And I'm pretty sure the JSON server's gonna send back the entire object we created. So that will be the todo. And what we want to do is now as we'll get all the todos. So const todos = this.state.todos.

[00:07:53] And what I want to do is I'll say I'll spread over this. And I wanna do is I'm gonna actually put the new one up front. So put that last and I'll put the new one up here which would just be todo, there we go. And I would say this.setState, todos is gonna be todos and then a new todo is gonna be an empty string again.

[00:08:20] So basically what we did last time is I just a side.then. And I just moved this new todo to the top a list instead of the bottom of the list this time.
>> Scott: [INAUDIBLE] Refresh this app. Cool, take out the trash and then clean doggy. Broke, I mean that same error again, what happened here?

[00:08:50] Cannot read properly id of undefined on post todo.
>> Scott: Where am I?
>> Scott: Well, let's try that again.
>> Scott: There we go. I'm still getting it, let's see. What are you complaining about? Looks like now we have error with JSON server, acting ridiculous. So this is why, this is totally fine, so it's not liking me today.

[00:09:38]
>> Speaker 5: Does it have to have an ID?
>> Scott: No, it creates the ID for you. So I'm not sure why it's acting up. Sometimes it says the server just needs a restart. There we go.
>> Scott: No, yeah, I'm not so sure why JSON server is messing up, but it's definitely JSON server.

[00:10:05] And I don't want to debug that right now cuz that's not what we're teaching, but this code is correct. Any questions on this?
>> Speaker 2: Do you need to set the content type?
>> Scott: I thought I did that.
>> Speaker 2: It's not the get, the post one that make you [INAUDIBLE].

[00:10:26]
>> Scott: No, it's yeah.
>> Speaker 2: I'm just guessing.
>> Scott: That could be it actually. So I thought I already did that.
>> Speaker 2: You did that on the sample one.
>> Scott: Yeah, I did.
>> Speaker 2: The prebreak one.
>> Scott: That's why I thought I did it.
>> Speaker 2: That's what I thought.

[00:10:46]
>> Scott: That must have been it. That's why I couldn't find it undefined makes sense.
>> Scott: Nope, this just JSON server.
>> Scott: Yeah, it's just my stuff. It did this to me a long time ago and I stopped using it and then I got back to it. So, not too sure why.