ByteSize: Dynamic Search With Flask + React
By: Spencer Porter
Tags: React, Programming, Web Development, Flask, Python

Front End

The backend was a simple fix, but our front end is going to need a little bit of work to get it working properly.

The first step is adding an input field.

We can use Material-UI to import a styled text field for the search bar, as well as some decorations for the component. We’ll start off by importing them at the top of our InfiniteScroll file (in app\static\src\InfiniteScroll.jsx).

Since we’ll want the search bar to appear over top of the Infinite Grid, we will add a parent div containing both of them to the component. We will also need to create an input state to hold the users entry.

In order to maintain control (and avoid a scary looking error message) of the TextField, we provide a conditional for the value field as an OR statement with our input state.

We then add an ImageSearchIcon to the end of our search bar with InputProps by using the InputAdornment component. I find that this adds a little aesthetic decoration to what can be a rather boring element. We will also use handleChange to manage user input into the element and update the input state.

Debouncing

Since we don’t want a request to be firing off every time a user enters or deletes a character, we’ll need to “debounce” the input. This works by putting a timer between the entry and when the function is updated, allowing you to wait a few moments to let the user finish typing before performing the query. This prevents your server from getting overloaded in an avalanche of requests, and bogging down your users from images being continuously rendered.

We will create the debounce function as a hook, and reference it in our InfiniteScroll.jsx file to keep things clean and separated.

For this, the value is the value you are seeking to debounce, and the delay will indicate the length of time before the value is returned.

Then we’ll import useDebounce within InfiniteScroll.jsx in order to use it.

Query Function

Now we can put together the query for our backend.

First thing we’ll have to do is add the debounced query to our query string in agent.jsx (in app/static/src/agent.jsx)

While we will be able to use the fetchData function for subsequent requests (as long as we’re providing the debounced query with them), we will need to create a new function to retrieve the first request of a user query. This is because we don’t want our search to simply append to the end of the already returned image list, but rather to generate an entirely new one.

AutoFire

We will also need to make sure that our function fires once the debounced input is populated. Instead of using a clicked button to fire the event, we can simply monitor changes to debouncedQuery to trigger the query with useEffect.

Clean Slate

Now that we can search with the user input automatically, we will want to make a way that reverts our grid back. We can use a button to clear the data, however if we want to fetch the feed we will need to call either fetchData or fetchQuery, or create an entirely new function altogether. We don’t want the new feed to once again be appended to the end of the search, but be built from from scratch. As fetchQuery already provides this functionality, we can use a ternary statement in the Images.get() request using a default parameter in order to distinguish between the two uses. We just need to create our button, and trigger it with an onClick function.

For a bit of cleanup, we’ll also implement a bit of text to let our users know if there are no results found from their search.

Styling

With that, our search bar is working!

We still need to do a little bit of cleaning up for styling. The first is filling out some of our classes in the InfiniteScroll component (in app/static/src/InfiniteScroll.jsx)

Finally, we’ll change up some of our theme styles to adjust the coloring of the active TextField to something a little more subdued by using the MUI ThemeProvider (in app/static/src/App.jsx)

As one final element as well, our current site doesn’t recognize its to adjust for mobile screens. This is a remarkably simple step by adding a single meta tag to our index.html file (in app/static/templates/index.html)