It's Happy New Year Eve by the time I started writing this. It was 19.02 WITA (which is GMT +8), and I'm pretty sure that this won't out until tomorrow. But hey, If I don't start it, it will never finish, right?

Previously, in Netfl--

I do want to make something like Netflix as an experiment, but eh, resources haha.

So in previous post, I've talked about my approach for the backend of the tag autosuggestion system. Most of it covers about my approach in doing the data modeling, and several mongoDb stuffs. The moment I jumped into the frontend implementation, it just went overdrive as I only mentioned about Material UI Autocomplete component. Although the examples provided already kinda enough for you to start, I think it needs proper walkthrough as there was several few parts that required me to look in depth on the component's API.

This page is a good starting point for you, with prerequisite you've known about Material UI and how to use React.

Using the component

I'll just skim through this since the examples already there, so you can actually go there and read the components details, how it works, yada yada yada. I'll focus on which part of the "tutorial" I used and how I combined different examples provided to build my tag autosuggestion system.

Async options

We'll start with the fact that the options are not static in which they will vary based from the user's input. The goal to this is to create API call for every value change event on the input field. So, the obvious step is to create handler for API call, to retrieve the tags based from similarity of user's input.

I'm using Axios to do HTTP requests because I'm too fond of it, and you definitely can use other packages, or the native Fetch API or even XMLHttpRequest API. I started with creating a state to hold the current options, with initial state of empty array.

const [options, setOptions] = useState([]);

Then create a handler for the API call

const handleFetchOptions = async (inputValue: string) => {
    try {
        const { data } = await axios.get('/api/tags/similar', { params: { tag: inputValue } });
        setOptions(data.data);
    } catch (error) {
        // handle HTTP error here
    }
}

My API request will return JSON with shape

{
  status: string,
  data: Option[]
}

interface Option {
  name: string;
  count: number;
}

So the value that we will render needs extra handling on the Autocomplete component.

We can start using the options by using it as the props for Autocomplete, under the "options" props. To display the tag name with the count number, we will use the "getOptionLabel" prop.

getOptionLabel = {(option) => { `${option.name} | ${option.count} results` }}

When we select an option, the default is to return the object used, which in this case is an object with two values (shown above). I just want to use the "name" attribute, so "getOptionSelected" used to set the selected value.

getOptionSelected = {(option, value) => option.name === value.name}

The next thing is to actually respond to user's input. We can do this by using "onInputChange" props, in which we're going to assign our handler before.

onInputChange = {(event, inputValue) => handleFetchOptions(inputValue)}

Now, this should work where when we typed through the input field, the options going to change accordingly with the result of the API. But the API request will be fired for every single changes to the input field, which includes adding/removing a single character. This is very expensive, as this is close to brute-forcing. We'll need to limit the amount of API calls.

Debouncing

The term "debouncing" can be explained like a falling ball. When you invoke a function, think of the ball starts falling and will hit the ground at a certain interval. When the ball hits the ground, the function is actually called and executed. So by means, we're adding a slight delay before we actually execute the function. What "debouncing" means which that on every event which this function is called, we're restarting the ball position to the first.

Lets say we're calling the function at timestamp 0ms, and the ball will hit the ground after falling for 500ms. The ball starts falling at 0ms. At 400ms, there's still 100ms until the actual function going to be invoked, but then the function is called again. This restarts the timer as the ball is set to the beginning of the falling. We need 500ms again, so we'll expect the ball will hit the ground at 900ms timestamp.

In short, debouncing is to delay the execution of a function, and wait for a certain millisecond before firing. If there is nothing "happened" during that time delay, then invoke the function. If there is, then we'll just start from beginning and wait until there is "silence" for the set amount of delay.

Okay, that's a pretty long explanation haha. You can implement your own debouncer by using "setTimeout" method, but I'll just use lodash 's library. We'll modify the handleFetchOptions above

import _ from 'lodash'

const handleFetchOptions = _.debounce(async (inputValue) => {
    try {
        const { data } = await axios.get('/api/tags/similar', { params: { tag: inputValue } });
        setOptions(data.data);
    } catch (error) {
        // handle HTTP error here
    }
}, 500);

This will create a debouncer with time delay 500ms.

Handling New Tags

We can now select the tags that we want to use, but it's now limited to the existing tags on the server. Adding new tags is not possible for now because there is no option to add new tags. So what to do?

Well, we add the option to add new tags :D

Adding option can be done by using "filterOptions" props. We need to create filter options first to handle extra attribute "inputValue" that's going to hold the currently typed input.

Filtering is done using the function "createFilterOptions" imported from Autocomplete function. And we're going to create an interface to make our data type consistent (and for the sweet Typescript hinting mmhhh)

import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';

interface TagOption {
  inputValue?: string;
  name: string;
  count: number;
}

const filter = createFilterOptions<TagOption>();

We're going to use this filter on "filterOptions" props.

filterOptions={(options, params) => {
  const filtered = filter(option, params);
  if (params.inputValue !== '') {
    const newOption: TagOption = {
      inputValue = params.inputValue,
      name: `Add "${params.inputValue}"`,
      count: 0,
    }
    filtered.push(newOption);
  }
  return filtered;
}

What this does is simply to add new option if our input field is not an empty string. Adding option is as straightforward as pushing new values to the object.

The next is to modify "getOptionLabel". This is optional because we're going to use "renderOptions" props to render our option, so this is a "just in case" prevention (although I need to read more on this).

getOptionLabel = {(option) => {
  if (typeof option === 'string') return option;
  if (option.inputValue) return option.inputValue;
  return option.name;
}}

Now, to actually display the label with the count number, we're going to use "renderOptions" props. This property should return ReactNode instance, which means that we can basically add anything that is a React Node.

renderOptions = {(option) => {
  return (
    <div style={{ display: 'flex', flexDirection: 'row' }}>
      <p>`${option.name} | ${option.count} results`</p>
    </div>
  );
}}

By now, we should have a proper, working tag autosuggestion with the capability to add new tag.

(note to self : add more images)

By this, you can basically add anything you want. You can process your input by using "onChange" props, handle to other events, and many more stuffs. You can always read the API for Autocomplete component for further references.

Summary

At first I was very overwhelmed by the stuffs that I need to make beforehand. My frontend skill isn't that good, especially in creating good looking UI, so by discovering Autocomplete component from Material UI, I can focus more on developing the UX, flows, interactions. I still need to make the rendered options looks better tho...

So yeah, it's been a pretty nice exploration for me, and I encourage you to also explore, and "Don't re-invent the wheel" if you're looking for speedy yet nice result.

Until next time, see ya!

Log-0x12 - Material UI's Autocomplete Component