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 app .js'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.
Okay, 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, well, 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.
Okay, so now that we know that that
context is hooked up and the app .js file has now provided the restaurants 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 and 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 provider, 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 you know 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 const is loading
and set is loading.
These are the value and the setter is
equal to use state false.
By default, we're not loading.
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 hook.
So when this component mounts, when the restaurant context provider mounts, we're
going to do some stuff.
The stuff we're going to do is we're
going to basically say, hey when it mounts do something.
Okay, 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 gonna call it.
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 const retrieve restaurants.
And that's going to do something for us.
What is 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 timeout.
Because we're gonna timeout, we're gonna act like it's a real API and we're gonna
wait for our response to come back.
Because there is no latency on retrieving
our local object.
So we're gonna wait two seconds.
What we're gonna say is, hey, do the restaurant request.
We're not going to give it a location.
It's gonna fall back to its default location.
And then we're gonna say dot then run the restaurant transform restaurants.
So I made a small spelling mistake here that may end up costing me.
So run the restaurants transform and then let's see here.
restaurants request dot then run the restaurants transform dot 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 say catch and then if we get an error, we're going to say set the error to to
the error.
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 to 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.
Okay, 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.
It 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 returned is loading state and return if we have an error.
So those are the three pieces of state I want.
Okay, 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 .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.
That's what we put down.
So we'll optimize that to look nice because we're mimicking as if it was a
real API.
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 dot restaurants.
And so we can simplify that we can say restaurants will destructure it off of here.
And then we'll say we'll also get the is loading state.
And we'll get the error if there is any.
So now that we have our restaurants,
what's going on in 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 .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 info card
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 item.
And by doing that, well, now we're getting some weird values.
We're getting JSON value height, etc, etc, etc.
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, photos 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.
We basically want to translate this to
properly return us a photo URL.
Normally this would return us like a URL
in here that would be linked to a photo, etc.
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 .photos is equal to and then let's just put an array here for now.
And if we set restaurant .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 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 .photos .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, math .random, 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 randomizing 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 could 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 did 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 .log error, we should be able to see the error 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 card 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 card 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.
Okay, 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.