Network Requests Solution

[00:00:00]
>> All right, let's look at the solution to the network requests exercise. I'm just gonna go ahead and leave this open. So, I have the URL. Here it is. All right, and pretty much we want to do exactly what we did in the Hooks example. So the first thing we're going to do is we're going to go to, Our home, because this is where we hard coded all the palettes originally.

[00:00:33]
So we're gonna just use this here. Yeah, cool. All right, so the first thing we'll do is we want to import useState from react. And we're going to start a state parameter to hold our color palettes. So that's do color palettes, setColorPalettes, = useState. And then let's set an initial value for that for an empty array.

[00:01:15]
All right, the next thing you want to do is actually write the code that does the network request. So to do that, we're going to use a useCallback, because we need to use useCallback if we want to do anything asynchronous. So let call this fetchColorPalettes, And lets do useCallback.

[00:01:45]
And usually, I create an empty function if I'm writing these. And then immediately do a comma and pass in an empty array so we won't forget to do that later. And we want to do a network request, so let's make this async. Fetch works on React Native the same way it does in the web, which is great.

[00:02:11]
So we can just do const results = fetch, and we can just fetch the URL. Oops, that's not the URL. Can I get this? That's pretty much it. If you want to do a post, you could add more attributes here. And let's do an await. And if, we have result.Ok, usually it's good to account for the case that the network request fails, so you should always do a if result.Ok handle the thing.

[00:02:51]
And you can do const pallettes. And we await results.json, and this will basically get the network request and convert it to get the JSON response from it first. And last thing you wanna do is you want to use set colorPalettes to actually set it to the response that we got.

[00:03:20]
And here we really don't care about what the original value was, so we can just go ahead and pass the palettes in. Cool, and lastly, what we want to do is actually make this happen dynamically when the component is mounted. And for that, we're going to import useEffect.

[00:03:44]
And here we're going to do useEffect, Pass in a function, don't forget to do the empty array, we saw what happens when you don't. And let's just call fetchColorPalettes. Nice, and the very last thing you should do is actually pass the colorPalettes into a Flatlist as data. And because our data structure is exactly the same, we can just replace them.

[00:04:21]
Nice, got a whole bunch of them now, and now we can delete all the hard coded values. And that's pretty much it. I added three color palettes that I knew about which was Solarized, Frontend Masters, and the Rainbow. And then I added a bunch of other color palettes just from the Public color API, and what I found is that people name their colors very strange things, which is quite funny.

[00:04:50]
All right.
>> Question.
>> Yes.
>> For React Native, what would you use for unit testing? Would you use something like React?
>> There's a React Native testing library that's special for React Native, it is React Native test library. And then if you want to do end to end testing, there's a framework called Detox, that's kind of the best for that.

[00:05:13]
There's some limitations on running on some Android devices on specific CIs. But in general, if you want to do end to end testing in React Native, Detox is kind of like the main thing you use. And you can write your tests in JavaScript, which is pretty cool.