So now that we know the majority of how the context works, how the service works,
and how it all interoperates, we can clean up our code here.
So let's remove our console logs because we don't need the logs everywhere.
And what we want to do now is we want to remove our use effect here, and I'm going
to show you why we don't need this right away.
What we need to do right now is we need
to build a search component.
And that search component is going to
live inside of the components folder of the restaurant feature.
So we're going to do search .component .js.
And so this search component is basically
what it's going to do.
Blank canvas here.
We're going to import React from React.
What we need to do right now is we need
to go into our restaurant screen.
And right over here, we built this search
bar and search container.
So we're going to copy that out because
we're going to build a standalone search functionality that we're going to call search.
And it's just going to stand alone and it's going to talk to the location
context on its own.
And it's basically going to be
encapsulated right here.
And it's going to live inside feature restaurant.
So we're going to do export const search.
And then we're going to declare the
function body.
And what we're going to do inside of
here, we're going to have a search container, which we need to pull out of
the restaurant screen.
So once we do that, we'll grab it, we'll
put it over here.
And what we need to do is we need to
import styled from styled components slash native.
And so by doing that, now we have our search container.
The one other thing we're missing is our search bar, which we also need to pull out.
So we'll take that and we'll put it over here.
And so now we basically have our search
bar as if it were integrated in a separate feature, correct?
Because it's running in its own component folder over here.
Okay.
So now what we want to do is we want to
pull use context.
And what we're going to do is we're going
to say const search context is equal to use context of and then we're going to do
location context.
Now, sorry, we're going to call it
location context, excuse me.
And that's equal to the use context of
location context.
Naming is important.
The variable names are so so important.
And oftentimes, I'll tell you so hard.
And I'm working on the search feature.
And I think I'm using the search context.
But actually, I'm using the location context that has a search function, it's,
it can get confusing, honestly.
So what we're going to do now is we're
going to import location context.
And we're going to import that from dot
dot slash dot dot slash dot dot slash.
And then we're going to go into services,
we're going to go into location, and we're going to grab location dot context.
And so by doing that, what we're going to grab is the location context.
So if we console dot log location context, what we're going to see in here
is the ability for us, if we grab this, we close this, and we open our terminal,
what we're going to see in here is an error.
And that is because obviously, we need to
import search into our restaurant list.
So let's go and do that.
So let's do import search.
And let's say from dot dot slash
components slash search.
And save that.
And so with that, let's put that, let's group the imports for the imports that
are coming from here, I like to group imports together, just makes it feel a
little bit cleaner.
So two views with the same name.
Let's dismiss that.
Let's reload here.
And what we're going to see is that now that we have this context, right in here,
if we scroll up, beyond our error here, what we're going to see is that we have
search location keyword is loading and error.
And so because we have all of that
information, what we can do now is in our search component, what we're going to do
is we're going to start layering it, like I said, we're going to layer it like a cake.
So the placeholder is going to be placeholder is going to be search for a location.
And then what's going to be the icon?
Well, let's work on the icon later, let's
say that the value is equal to, we can say we're going to use state here, use state.
And what we're going to say is that we're going to have the const search keyword,
and then set search keyword.
And that's going to be equal to use state.
Now we want to move this line down, because what we want to do is we want to
default the search keyword to a value on location context.
And that is going to be if we go into location context, the keyword.
So we're going to grab keyword from here, and we're going to set it as the default.
And that is going to be set as the default value inside of the search bar.
And by doing that, what we're going to see over here is once we remove our
console log, because that's breaking.
Once we remove that, we can see that San
Francisco is being filled in by default.
And this is coming from the location
context, default value that we have over here, because we set that to San Francisco.
Now let's set it to look proper.
Right?
So we set it by default to San Francisco.
And that's filling in here.
And so we're tracking local state over here, right, right here, we're tracking
local state.
Why are we tracking local state?
Well, because this component needs to be able to track what the search keyword is
that you're filling in.
But this one only needs to know once you
submit what the keyword is going to be, right, we're going to trigger the search
function here at a certain point with a keyword from the search keyword.
And that's going to be internally then set from then on to the keyword in the
location context provider.
So we're having this back and forth
between what the component is storing, and what the location context will
eventually store, but the location context will only store that once we run
the search function.
Okay, so knowing that, what we need to do
now is we need to add some extra properties to this search bar.
And the extra properties that we're going to add is we're going to add on submit editing.
And on submit editing is a function that is going to allow us to trigger the search.
And so what we're going to do inside of here is this is where we're going to
trigger our search, and we're going to trigger it with the search keyword.
So when you submit the editing, that's when the search is going to occur.
But we still need to set the search keyword to whatever is happening inside
of here.
So let's say on change text.
And this is going to be a lifecycle method that is going to trigger every
time the text changes, we're going to say every time the text changes, we're going
to set the search keyword to text.
Now the one thing we don't want to do is,
if we don't have text, right, if the text length doesn't exist, let's just not do
anything, we don't really want to do anything.
In that case, let's just return exit early.
And so what we can see here, and let's go into our location context provider.
And let's just add a quick search keyword trigger here, let's console dot log here.
And then if we open up, we close this and we open up our terminal, but we're going
to see inside of our terminal is this search keyword updating.
So if we scroll all the way to the bottom, and then we clear this and we say
Antwerp, what we're going to see is Antwerp's coming in.
And then if we do Chicago, Chicago will come in to our search context.
And then if we do, for instance, Philadelphia, right, well, seems to be a
small bug here.
So we need to be able to figure that out
Philadelphia, what's going to happen is we'll get Philadelphia.
Okay, so now we're getting the input from the search box, right into our context.
But there's still this small little case of a bug here.
That's basically happening.
And this is because, oh, we added this.
So this is not something that we want to add, like the return case here is what's
causing this to happen.
So Philadelphia is going to happen.
One of the things that we need to be aware of here, doing checks, right, it
would stand to reason that if text didn't have a length, we wouldn't want to set
the search keyword, right?
Well, we do still want to set the search
keyword over in here.
But what we don't want to do is in the
location context.
In the location context, what we don't
want to do is we want to say if search keyword dot length, if that doesn't
exist, then we would want to, for instance, say, hey, don't do anything, right?
Don't do anything.
So here, we can do an early return.
And what that's going to do is it's going to cause us not to do like an
overabundance of API calls, right?
So for instance, if we did here, Chicago, right?
Well, I removed the console log, but that would return Chicago.
But now I can easily remove all of the text here.
And we're not sending the search keyword.
But if I hit enter, I may set the search
keyword here.
But when it comes into my context
provider, well, I'm going to bail out on my search because I don't want to search
for an empty location.
That doesn't really make sense for me.
I'm not there yet.
I like what am what am I searching for?
At this point, we don't want to trigger that API call.
Now there's a difference between doing it on the on change text versus in the
location context.
And I wanted to show that because you can
inadvertently cause bugs by doing this.
Okay, so now we've hooked up our search
component as a standalone feature.
It's interacting back and forth with the
context, it's setting the keyword and then passing it into the search function
that eventually will search for the location.
And then at the location level, we can
console dot log our results, right?
And then we'll see that we're actually
getting back the proper results that we expect.
So if we look here at Chicago, we'll see
that we're getting something if we do Toronto, we get longitude latitude, if we
do Philadelphia, what we're going to see is that we're not getting anything.
Rather, we may be getting an error.
So let's console dot log error.
And let's see what's going on in there.
And so we can see that the back and forth
is actually working as intended.
So if we do Philadelphia, it's going to
say not found.
If we do some other place, some other
place, it's going to say not found.
And so that's very important to keep in mind.
We have our end to end hookup of the flow and the search component is working.
So now what we want to do is we want to hook up what's coming back from this
location that we're passing, we're passing down.
And we want to give it to the restaurant context.
So let's look at how that would work.