Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll use Giphy API's search endpoint to add a Gif search feature to our app.
Search Endpoint
http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC
Resources
-
Search Endpoint – Giphy API
- Note: The Giphy docs have been improved and relocated to a new website since this video was recorded, so what you'll see at this URL will look a little different than what's shown in the video, though the information is still valid.
- Introducing Template Literals – Treehouse workshop
The Giphy API also provides a search
endpoint that lets you search for
0:00
GIFs using a word or phrase.
0:03
So in this video, we'll use this endpoint
to create a search feature for our app.
0:05
Users will be able to search for
GIFs by typing into this text field, and
0:10
the search results will be returned and
displayed in the list of GIFs when you hit
0:15
the Enter key or
click the search icon next to the field.
0:18
So first, back in the App Component,
let's create a function
0:22
that fetches the data and
updates the GIF state when called.
0:26
I'll name the function performSearch.
0:29
Now we already wrote all the code that
does this here in componentDidMount.
0:36
So I'll cut this code block
out of componentDidMount and
0:41
paste it inside the new
performSearch function.
0:45
Next, I need to change
the URL in the get method
0:49
to the endpoint that
returns a search query.
0:51
So I'll copy this URL
from the Giphy docs and
0:54
replace the trending endpoint
with this new endpoint.
0:58
And this endpoint offers several
parameters you can use to search query
1:03
a term or a phrase,
limit the number of results return,
1:07
offset the result and more.
1:09
Now the parameter we need in our
URL is the q or query parameter.
1:11
And as you can see,
there's already a q parameter and
1:17
value in the URL we just copied.
1:19
But the value needs to be dynamic,
1:22
q should be equal to the text a user
typed into the search result.
1:24
So let's have performSearch
accept the parameter query,
1:27
then in the get method we'll change the
URL from a string to a template literal so
1:31
that we're able to embed the value of
query into the URL using interpolation.
1:37
So let's replace the provided
query value with a dollar sign and
1:43
curly braces,
then inside the curly braces, type query.
1:47
And I also want to limit the search
results to 24 GIFs just to give the layout
1:52
some balance.
1:56
So in the URL, I'll add the parameter
limit with ampersand limit and
1:57
set it equal to 24 GIFs.
2:02
All right, so now we need to wire this
function up to the search form component.
2:05
In apps return method let's give the
SearchForm component the prop onSearch.
2:11
Passing it this.performSearch.
2:17
This passes the performSearch function we
just wrote to the SearchForm component and
2:21
invokes it whenever
the onSearch prop is called.
2:28
So let's give this file a save and
2:33
have a look at the SearchForm
component in SearchForm.js.
2:35
So this component has a searchText
state that's specific to the component.
2:39
It gets updated and
2:44
this onSearchChange function with
the text users type into the input field.
2:45
And below that, the handlesubmit function
is called when the form is submitted here
2:50
in the onSubmit handler given to the form.
2:54
Now currently,
handleSubmit just calls preventDefault and
2:57
resets the input field onSubmit,
with currentTarget.reset.
3:00
So inside this function is where we'll
need to invoke the performSearch
3:04
function that fetches our data.
3:09
So we'll call the function,
with this.props.onSearch,
3:10
followed by a set of parentheses.
3:13
Remember, performSearch takes one
argument, the search query, but
3:17
how do we pass the query value
back up to the function?
3:21
Well, the easiest way is to pass the
searchText state to the onSearch function
3:26
call back with this.state.searchText.
3:31
So let's give this a save and
test our app in the browser.
3:38
In the search field,
I'll type cats, hit Enter.
3:43
And it works.
3:47
The query returns 24 awesome cat GIFs.
3:48
You need to sign up for Treehouse in order to download course files.
Sign up