Hacktoverfest

This final merge was definitely my biggest one yet and I am proud that I got to finish on it.

Sneaky tactics

For this final issue I actually ended up looking through my classmates previous blog posts to see if they have worked on any cool repositories because I am absolutely exhausted of scrolling through issues, it has been a month of hundreds of pages of tens of issues. I got very lucky that one of the repositories that I found pretty quickly had 2 open issues, one of which had been up and unclaimed for a while but that I believed I could do.

The repository is reddit-image-viewer and it is exactly what you expect from the name, it is a website that allows you to search by subreddit and it retrieves the images associated with the subreddit of choice.

I might need a tissue

The issue was to add an enhancement to the search bar feature which I initially thought was going to be easier than it turned out to be. At the time of starting on the issue the site gave you a "nothing found try searching" type of text when you first clicked on the search bar to type in a subreddit query, the intended addition to the functionality was to replace that message with the top 5 most popular subreddits at the time as an autocomplete.

I did not wait for permission from the maintainer this time, I added a comment to the issue that I would like to work on it but I recognized it would take some time so got to work right away, hoping that the maintainer would be ok with me working on it.

Getting started

I forked the repository and immediately met my first road block in running the application, I had to have a reddit dev client id and client secret. To get those I created an app on https://www.reddit.com/prefs/apps which gives you both, afterwards I followed the example .env and added them where they should be. Build and start. Tada, we're online.

Next I begin to struggle a bit. I look at the examples for the previous API calls to model my own off of and I make the mistake of assuming the SWR hook is referring to an external url somehow:

const {data: results} = useSWR(`/api/search?term=${debounced}`, fetcher, {
    revalidateIfStale: true,
    revalidateOnFocus: false,
    revalidateOnMount: false
  })

Turns out after pulling my hair for a few hours that slapping in /subrredits/popular in the place of that string would do absolutely nothing because I didn't understand that was actually referring to the API folder within the application I was working on and not the external reddit API.

I took a look at what SWR is and took a look at the fetcher which was, I concluded after staring at it too long, perfectly fine since it had to be to have worked for the other API call in the first place.

Beginner Breakthrough

Once I finally figured out what SWR is and what it was calling I took a look at the API folder and the search one in particular to use it as a model for what I wanted to do.

Similar to the way that we were passing a term to search for in the query params of the previous API call I wanted to pass a limit to the number of most popular subreddits to retrieve, it was pretty much the same thing to my mind and I soon found out in practice as well.

For reference this is the reddit api I wanted to consume: https://www.reddit.com/dev/api#GET_subreddits_{where}

So I got to work copying code.

I created an 'API' folder file called preSearch.ts and found that everything else kind of worked once I replaced the API that was being called after the token logic.

The filter even works the same since the data in the response is structured the same for retrieving the subreddits, the important keys of over18, url and value are all under sub.data.

Filter in question:

// Filter uneeded data to keep the payload small.
    const filtered = subs.data.children.map(
      (sub: {data: {over18?: string; url?: string; display_name?: string}}) => {
        return {
          over_18: sub.data.over18 ? true : false,
          url: sub.data.url ? sub.data.url : '',
          value: sub.data.display_name ? sub.data.display_name : ''
        }
      }
    )

Now it was a matter of displaying the results in the right place.

At first I thought I would replace the nothingFound prop for the Autocomplete component which is obviously wrong, I ended up leaving it as is in the end. What really interested me was to pass something else into 'data' depending on whether or not there was anything that came back as a result of the previously implemented SWR. I came up with this conditional:
data={results ? results : beforeSearch ? beforeSearch : []}

And there you have it, upon initially clicking on the search bar it autocompletes with the newly retrieved data that is associated with the response from my SWR which is calling the preSearch file wich is doing a little token dance with reddit and hitting the /subreddits/popular?limit={whatever-limit-in-our-case-5-for-now} endpoint.

Fin

I am really proud of this one, even though it is largely based in existing code. This was a good one to end it on.

The next day after I created my PR it was accepted by the maintainer :D

Curtains Close on this month. It's all Hacktover now!

Issue: https://github.com/gregrickaby/reddit-image-viewer/issues/410
PR: https://github.com/gregrickaby/reddit-image-viewer/pull/414