Building a Search Feature3:52 with Guil Hernandez
In this video, we'll use Giphy API's search endpoint to add a Gif search feature to our app.
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