So now that we know the majority of how the context works, how the service works and how it all inter
operates, we can clean up our code here.
So let's remove our control 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 features.
So we're going to do search that component.
Dargis.
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 consed 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 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.
OK.
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 consed 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 U.S. 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 that.
That's all that's left our thoughts.
And then we're going to go into services.
We're going to go in the location and we're going to grab location, the context.
And so by doing that, what we're going to grab is the location context.
So if we console that log location context, where 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 both components 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 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 you state.
Now we want to move this line down because what we want to do is we want a 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?
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 key word is going to be.
Right.
We're going to trigger the search function here at a certain point with a key word 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 complex will only store that once we run the search function.
OK, 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 that log here.
And then if we open up, we closed 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.
OK, so now we're getting the input from this 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, Filla Delphia.
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 could 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 hear Chicago.
Right, well, I removed the console log, but I 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 and 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.
OK, 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 that log our result.
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 along attitude, 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 that 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 you 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 hook up 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.