Part 3(a)— Search Functionality
We are building a local business search directory so the search bar will need to have quite a bit of functionality. I’ll split this part into three sub parts because it’s a lot of information!
As an overview, here’s what we want to happen: The user will type in a keyword and a zip code and select a category from the dropdown menu. When the user clicks submit, results will render based on the info they’ve provided and selected.
We will be querying data for the results from an API and we’ll query data to populate the category drop down menu from local storage. I will be using a free, public API from Soleo.com. You can use any API you choose.
Before we get started let’s discuss what an API actually is. API stands for Application Programming Interface. An API is a software intermediary that allows two applications to talk to each other. In other words, an API is the messenger that delivers our request (the users search) to the provider that we’re requesting it from (Soleo) and then delivers the response (search results) back to us.
Now we can get started! First, we need to create our component. Declare a class component called SearchBar that, for now, renders a div with four elements: 2 input boxes, a dropdown menu, and a submit button. You can also add a header tag to give the page a title.
Before we can add functionality to render results to the page, we need to create the results components. Create a new file in the components folder called “ResultsPage.jsx”. ResultsPage.jsx will use two child components: one to iterate through the search results and one to create boxes for each result. In the components folder, create two more files called “ResultsContainer.jsx” and “Results.jsx”.
In each of these files declare a class component and return a div with the title of the component as placeholder text.
ResultsPage.jsx will be the parent component. It will use the 2 child components to sort and display the results the way we want. It is helpful to split this functionality into three files to make a habit of modularizing your React components; keeping each component as reusable as possible.
Next, we need to store the values the user provides in state. In Searchbar.jsx, declare keys in state for each input box element and the dropdown element. Assign them to empty strings.
We’ll need a way to reference the values of each of those three elements. To do this, give each element an id.
Then create a new function called “getUserInput” that will update state whenever a user types or selects from the dropdown. In this function, use “document.getElementById(‘id_Name’).value” to grab the info from the user. You can console these values to be sure you’re grabbing the correct info. It is good practice to give the parent divs id names as well, this comes in handy when adding styling.
When a user clicks the submit we want to render the results which will happen in ReultsPage.jsx. We can use React-Routers “Link” to render the ResultsPage component and pass our stateful info as props. You will need to add a path for the ResultsPage component in the index.js file using React Router.
We also need to add “onChange” methods to the input and select tags so we can invoke our “getUserInput” function.
Next, in ResultsPage.jsx, create a function — we’ll call it “getResults”. This function will query the Soleo API with the user’s input, filter through the response from the Soleo API and save that response in state under the key “data”.
In our getResults function, declare three variables to store the values we passed as props from Searchbar.jsx state (keyword, category, postalCode).
Now we can connect our API to our app. Declare a variable to store the query string — we’ll call it “url”.
**Note: It is always a good idea to paste your query string into your browser and take a look at how the response object is formatted. This will help when manipulating your API response. View my query string below to get a better of understanding of the code in the getResults function.**
Then, using axios, create a GET request with “url” passed in as the parameter. Using promises, we’ll filter through the response we get back and update state with that response.
When I view the response for this query in my browser I can see which parts of a response I want to use in my app. For the purpose of this search bar, I want to use the info stored under the “business” key of my response. As such, declare a variable inside of a promise called “data” to store the values of the business key from the response.
Within our new variable “data”, there are multiple key/value pairs, I only want to use a few of these. So declare a variable assigned to an array and push only the values you want to use — the values you want to display to your users (business name, address, etc.).
Some of these values may be undefined. Meaning, not every search result will have a website, or address listed. To filter out “undefined” results so they don’t throw errors or render to the page use the javascript “filter” method and save its results to a new variable called “filteredDatum”.
This new “filteredDatum” variable now has the most updated version of our response. Save this version of the response to state and we’ll use it later to render results to the page.
Now, we need to add the users input to our query string. We can do this using template literals.
First, wrap the entire GET request in a function — we’ll call it “fetching”. Give that function three parameters, one for each element we’re waiting for the user to define. Then invoke fetching with the three variables you declared earlier (the variables that store the values give by the user).
Next, edit the query string url by adding template literals for each parameter you gave to the function “fetching”. Ex:
becomes —>
Invoke getResults using Reacts “componentWillMount” function so it happens as soon as ResultsPage.jsx is rendered.
Now, you have connected your API and created a GET request to query your API!
The next 2 things we have to do is add functionality to populate the category dropdown with data from local storage and render results of a query to the page when a user clicks the submit button.
We’ll do this in Part 3(b). For now give yourself a round of applause, you’re halfway there!
