In this video, we are going to be wiring our
frontend search feature component to the backend
endpoint we just built so that we can start
getting travel suggestion results.
To begin, first, let's look at what we have
going on in the frontend section of our seed
project, specifically for the search feature.
The search feature is present in the Search
by Location tab on our home page.
Here we can see our search text box, preferences
checkboxes, and submit button.
If we go back to VS Code and locate the index.html
file for our home page and scroll down to
the Input Tabs section, we can see our Search
by Location tab.
And if we scroll just a little bit further
down, we can see our request form with all
our form widgets for the location search.
We have the input text box where we can enter
in a location and get suggestions for destinations
we can travel to.
And we also have our list of travel preferences,
checkboxes for each of the options that are
available for us on this application.
Now if we still scroll further down to the
results section, let's find the results section.
Here at the results section, we can see where
our destinations are going to be displayed.
We have the main wrapper which has been given
an ID of results section and a results container
where the destinations will be dynamically
inserted.
All these containers and widgets have all
been given IDs to target them and reference
in our JavaScript code.
Now speaking of JavaScript, let's head over
to app.js,
where the real integration is going to be
taking place.
Bring up app.js,
pull this aside once again.
And now here in app.js,
we start by defining a constant
for our API endpoint.
We'll be using this in all our front-end API
requests.
And this makes it easy to switch URLs
if we need to change to a production or staging
server.
We also have our DOMELEMENTS section, where
the location form variable targets our search
form.
We also have the variables RESULTS section
and RESULTS container that help target where
we'll be displaying our search results.
To integrate our frontend with our API, we'll
be adding an event listener to handle our
form, submit it to the backend, collect the
results, and display them in our RESULTS section.
A couple of utility functions are also here
to help us with the flow.
So let us take a look at some of them.
First we have our getSelectedPreferences function.
This function helps us collect all preferences
selected by the user.
These are all the checkboxes that the user
clicks in the preferences section.
We also have the limitPreferences function.
This function ensures that the user selects
a maximum of 3 preferences and displays a
message if the user tries to go above that
threshold.
Another utility function is the displaySuggestions
function.
This function takes our destination results
from the API and displays them in our result
containers.
We also have the createDestinationCard function.
Let's go to the actual function definition.
Good.
Now, this function will create a card for
each suggested travel destination with all
the details.
As you can see, it creates a new div, attaches
a class name with our styling library which
which is bootstrap and undoes everything that
has to do with displaying what the destination
cards show to our users.
Other helpful functions in this file are functions
like showToast, equal to definition, this
simply prints out a message to the user.
We also have showLoading, showLoading helps
us to display a progress bar when we are calling
our API.
And we also have the alternate function to
that, hideLoading, which hides our progress
bar.
We'll be using these functions in our integration
flow to request for and display our travel
destinations.
Now let's get to work on our actual integration.
If we scroll down, you can see the section
that has been marked out for us to write the
code to do that.
Scroll down.
And this is our first integration task, to
undo the LocationFormSubmission.
We'll start by attaching an event handler
to our LocationFormHandle.
So here we'll say LocationForm.AddEventListener.
We'll undo the submit operation.
operation, give it an async function because
we're going to be calling an API, and open
up our function.
Inside the handler function, first, let us
prevent the default form submission behavior
and get our data from the form.
We've captured our event here as the argument
to this function, so we say e.preventDefault.
Then let us get our data.
location by saying document.getElementById
and we're going to grab our location input
which is the ID of the text box.
We call the value attribute and trim it of
white spaces.
It's good.
Now let us get our preferences.
So const preferences equals.
And we can simply use our helper function,
getSelectedPreferences.
And we can pass it the variable that we are
using
to get our preference checkboxes.
Scroll down and put it here.
Good.
The next thing we're going to do is to check
if the location is not empty.
If it's empty, we'll be showing a message
to the user
indicating that the search field is empty.
If not, we'll kick start the process of calling
our API
by showing a progress indicator.
So let's do that.
So down here, we'll say, if our location is
empty,
they will simply want to show a toast message
using our showToast
function.
And we'll say, please enter a location.
And the type of warning we want to send,
or the type of message we want to send, is
a warning message.
And we can just return from there.
Then if this does not evaluate to true,
we can kickstart our process by showing our
progress indicator.
After our progress indicator, we can then
kickstart our request.
We'll be wrapping that in a tricard block.
So let us write out the tricard block.
I'm going to say try, catch, error.
Good.
Let's give this a little space here.
Now, inside the try section, we'll now process
our request
and display the results.
So let's write the code for all that.
I'm going to come here, scroll down a little
bit into view.
And here, we'll say const response equals
await.
Then use the fetch API to call our endpoint.
That's the endpoint we created in the previous
video.
We'll then tell it to point to our API base
URL
and go to the endpoint API for slash suggest
by location.
And here, we wanted to use the POST method.
And for headers, we want to set a single header.
We'll say content type.
And that will be application for slash json.
Seeing some squiggly lines here.
Seems I'm missing something.
OK, yeah, these all need to be in a configuration
object.
Yeah, sorry about that.
Back this.
This all need to be.
OK, good.
So define our headers.
Then we can say body.
And that will be json.stringify.
And inside there, we'll simply serialize our
request.
So say location, set location, and we'll set
preferences
to preferences.
As our fetch request, let us bring this here.
So if we get a response, or if we don't get
a response,
or we get a failure, we're simply
going to throw a new exception or a new arrow
and say, failed to fetch suggestions.
However, if we do get something back,
just call this interview, and say,
countData equals awaitResponse.data.
And since we're done with our request,
we can hide our loading indicator
and call our displaySuggestions function.
And this we can pass our data.destinations
because that is the name of the data parameter
where our destinations are stored.
Perfect.
Now let's make sure that we are handling error
situations
in the catch block also.
So let's just do that quickly.
First, we want to hide loading, just in case
any loading
operation is going on.
Then we'll just print something helpful to
our console, which
is the error.
And let us show a message to our user.
Say, error, fetching travel suggestions.
Please try again.
And this message will be a danger type
to indicate that it is something very, very
serious.
Great.
Now we have completed our integration, however,
we need to test everything to make sure that
we have no errors and that it's all working
as expected.
We'll be doing that in our next video.