Now that we have our restaurant context provider set up and we have a restaurant context and we've proved
that when we give the context provider a value of restaurants with an array of eight items, that we're
able to access it anywhere below Apgar's level by using context, by using the use context hook.
So by using the use context hook, we're able to pull the value from this object.
OK, so now that we understand that and we've seen it in action and we see that it applies itself to
the actual output of the screen, because if I put this down to one item will boom, we have one item
when I put it to two items, two items when I put it to three items, three items.
So it's in effect, this array is now controlling the output of the screen.
OK, so now that we know that that context is hooked up and the app JS file has now provided the restaurant's
array to any component below it inside of the tree, now we can go ahead and try to hook up our data,
our restaurant request in our restaurant transform.
Right.
So the way that we want to do that is we want to set up some state.
So we want basically this context provided this component.
We want it to provide the request.
So it's going to do the request.
It's going to do the transform and it's going to provide any state that happens to that request.
So the end output of this request should be this array, but it's also going to control the interface
with the API.
So if we get an error, it's going to be able to provide an error.
It's going to provide the information if it's loading or not.
So that whole thing is going to be what we're building right now.
So there's three states that I talked about the error, the loading and the actual output.
So we're going to say const restaurants and set restaurants.
Is equal to use state of an empty array, because by default, we don't have any restaurants, then
we're going to say CONSED is loading and set is loading.
These are the value and the center is equal to use state false by default.
We're not loading.
And then we're going to say const error set error is equal to use state of null.
So by default we do not have an error.
So we have our three pieces of state here and now we basically have to hook them up to be controlled.
So how are they going to be controlled?
Well, we're going to have the use effect hooke's.
So when this component mounts, when the restaurant context provider mounts, we're going to do some
stuff.
And the stuff we're going to do is we're going to basically say, hey, when it mounts, do something,
OK?
So when this mounts, we're going to do something.
This empty array syntax is saying.
Run the use effect when the component mounts.
So when it mounts, we're going to say retrieve restaurants, that's what we're going to retrieve restaurants.
That's what we're going to run.
So we're going to define a function here.
And it's going to be consed retrieve restaurants and that's going to do something for us.
Was it going to do well, first of all, it's going to say, hey, we're loading, so set loading to
true.
And then what it's going to do is it's going to do a set time out because we're going to time out,
we're going to act like it's a real API and we're going to wait for our response to come back because
there is no latency on retrieving our local objects.
So we're going to wait two seconds.
What we're going to say is, hey, do the restaurant request.
We're not going to give it a location.
It's going to fall back to its default location and then we're going to say.
Run the restaurant, transform.
Restaurants, so I made a small spelling mistake here that may end up costing me, so run the restaurants,
transform.
Let's see here.
Restaurants request that then run, the restaurants transform, but then.
We're going to say here are our restaurants.
And we're going to say inside of the function body set restaurants to restaurants.
One more thing we need to do is we need to catch.
And then if we get an error, we're going to say set the error to.
Now, one more thing we need to take into account here is when we do get the restaurants back, we need
to set loading to false.
And if we get an error back, we also need to set loading the false.
Those are two important things.
Now, restaurants is already declared in the upper scope, so let's call this results, we don't want
to conflict with the upper scope here because we're re declaring a variable that's already known.
So we don't want to do that.
OK, so now that we have what retrieve restaurants is going to do, we can say return restaurants as
restaurants, now we can also shorthand this to just be this and then it will reference this variable.
Doesn't really matter what you choose to do.
We're going to return our is loading state, so I'm going to shorthand it to say return restaurants,
return is loading state and return if we have an error.
So those are the three pieces of state I want.
OK, now that I have those three pieces of state.
We can go ahead and we can go look at our application right here.
And what we can see, it's loading way more restaurants, so we seem to be getting something back.
So if we go inside of here and we say console that log restaurants, we're going to see the different
states that restaurant is going through.
And if we open up our terminal, we'll see that restaurants is getting our entire restaurant array.
Now, if we reload this, you'll see that there's a little bit of lag on it coming in two seconds,
right?
Two full seconds.
So that's what we put down.
So we'll optimize that to look nice because we're mimicking as if it was a real AP.
And what we want to do now is.
Right now, we're giving restaurants.
Just the data.
Over here in the screen.
So we're saying the data is restaurant, not restaurants.
And so we can simplify that, we can say restaurants, we'll structure it off of here.
And then we'll say we'll also get the imploding state and we'll get the ER, if there is any.
So now that we have our restaurants, what's going on, a restaurant list?
Well, in render item, we basically get an item.
This is what we get, we get an item each time, so if we open this up.
And then we say return.
We can console that log item.
And what we'll see is, in the most basic sense, we'll see a singular restaurant coming in.
So what we want to do now is we want to go look at what Restaurant InFocus takes in restaurant info
card takes in a component restaurant.
So what we want to do in the screen is we want to say here restaurant.
Is equal to Eitam.
And by doing that.
Well, now we're getting some weird values, we're getting Jason value, height, et cetera, et cetera,
et cetera, photo cannot be translated.
Interesting, so what's going on here is that if we go look at our data.
If we go look at photos.
Fotos is giving us an array of objects, right, it's giving us this photos and then it has height,
HTML attributions, photo reference, all this stuff.
But what we basically want is we just want the URL of the photo, the very first photo, or we basically
want to translate this to properly return us a photo URL.
So normally this would return us like you are in here that would be linked to a photo, et cetera,
and that would be what we want to pull.
So we need to edit our transform a bit.
So our transform over here in the service takes into account the is closed, is closed temporarily,
but one thing it isn't doing, it isn't taking into account the translation that we need to do for the
pictures.
So one thing we should do in here is we should say restaurant dot photos is equal to and then let's
just put an array here for now.
And if we set restaurant that photos to an empty array, what we'll be able to see here is that we'll
be able to render out all of the restaurant information.
So now we're getting dynamic information from the restaurant.
We're getting the name of the restaurant, the rating of that restaurant.
So we're able to basically render out what it's going to be.
Now, with that, we're getting different icons here.
This is a lodge.
This is a restaurant, but we're not getting any photos.
And so over here in the mock folder, you will have seen that I've put mock images.
So there's one thing that I wanted to add here that is for us right now.
What we want to do is we want to make sure that our photos are randomized.
We don't have photos coming back from this API.
So let's do restaurant dot photos, thought map.
And let's pull in mock images from the mock and what we'll be able to do here is we'll go and we'll
select a random image Matheran them from the mock images.
And this will allow us to render out just a specific image.
In this case.
We'll be selecting a random image from our mock images array here so they'll be overlapping or similar
images based on how the random works and on every render, the image will be different.
But what you can see here is we've just hooked up our data and now it's randomising and legitimizing
the view.
We're seeing all of the restaurants and all of their information happen.
And all we did was hook up our context, make sure that our context can get the restaurants from this,
fetch action over here from retrieve restaurants.
And that allows us to basically be able to get the information that we need, set it.
And let's say, for instance.
That we retrieve the restaurant that didn't exist, right, so we didn't give it a location.
Now, does it take location as a single property, so, yeah, if we did this.
And we gave it a location that does not exist, it should theoretically give us an error back because
the information does not exist.
If we went inside of our restaurant screen.
What we know now is that we may have an error here, so if we do console dialogue, error.
We should be able to see the air coming in, so if we go to our terminal output here and we do this
and we scroll to the bottom.
We'll see not found because, well, we gave our context.
A value that does not exist.
This is not a valid location, but if we save this, then what we'll see is that our restaurants will
come back in and they will load after two seconds.
So now that we have the end to end flow set up to get the information from the JSON files rendering
on the screen and dynamically rendering, we can see how powerful the entire setup we went through step
by step is.
Right, because we set up our restaurant car to take in a certain shape, we set up our context to be
able to do the request for us to get the restaurants and then transform that information to match the
input that the restaurant cart expects.
And then in our restaurant screen, all we needed to do was we needed to use the context.
Of the restaurants that already did the API call for us.
And give the restaurant information to restaurants and at that point.
Everything was hooked up because we gave this prop over here, and so now we're getting real restaurant
information.
OK, so now that this works.
How can we hook up search in order to swap out between the different cities?
Well, let's take a look at that.