3.0-alpha Autocomplete front-end

In 2.9 a few things had happened.

Authors autocomplete indexing was added in the back-end.
A new authors autocomplete query was created for Search.
Parser service booted up.

So in 3.0 alpha I had a few things I needed to deal with.

#2 and #3 I wasn't too fazed. For #3, it was basically just a copy- paste. As long as Parser was working correctly before, adding the indexing would work. For Search tests, well, at this point ES-mock and I are already quite familiar with each other, in terms of mocking the ES search query.

As for front-end. I honestly wasn't all that prepared to do it. I thought I had swore myself off of React and front-end on week 2 of this course, but I guess, since I put in the back-end, it was sort of all part of a package deal.

Front End Logic

The logic was very simple. Each time (or rather, every few seconds) the search text has changed, we get the results from our Search service API, and list the results for the user to choose from.

I'd just like to take note of a fancy trick that the OSD600 me didn't know about but had also ran into with useEffect, it looks something like this:

  useEffect(() => {
    // debounce so it searches every 0.5 seconds, instead of on every stroke
    const debounce = setTimeout(() => {
      (async () => {
        const prepareUrl = () => `${searchServiceUrl}/authors/autocomplete/?author=${text}`;
        // Do the request if there is something to search for
        const shouldFetch = () => text.length > 0;
        const data = await fetchResults(shouldFetch() ? prepareUrl() : null);
        if (data) {
          setOptions(data);
        }
      })();
    }, 500);

I mostly just want to point out the (func)(); part, which I honestly have no idea what the name of is. But back in OSD600 I had ran into a similar problem with trying to call a fetch function in useEffect. I'm just really amazed that a trick like this works.

For my version I had tried to use useSWR, cause that's what all the other components were using. But, it was acting too weird for me. For starters, it wouldn't try to get the API results on the right change. For example if I typed "Ro", it would only look for results starting with "R". There also seemed to be some weird debounce problems where deleting a search text with backspace would fire the fetch with every keystroke instead of every 0.5 seconds. So in the end, I looked for an alternative route with the old fetch and useEffect.

MUI Autocomplete Component

I chose to use this component since its supposed to be the fallback if I never got autocomplete indexing in. The original idea was we could probably feed it a static list of authors, and let it do its version of an autocomplete thing. So now it'll also serve as a fallback if one day ElasticSearch gets ripped out for some reason.

Conclusion

In all honestly, I can't decide if its front-end in general or Telescope front-end in particular that I'm not really too fond of tackling. However, besides styling, which I admit I am just horrible at, I felt my code did what it needed to do. Mostly proud that I got it working so it doesn't search on the wrong text and it also doesn't fire with every keystroke, including backspace.