Hacktoberfest Week 4 PR
Tags: opensource, hacktoberfest23, hacktoberfest, hack23contributor
Published: 2023-10-31 20:45:57

---
series: Hacktoberfest 2023
---

On Week 4 of Hacktoberfest, I completed my most challenging [PR](https://github.com/mazipan/tanyaaja/pull/123) to date. I found an issue in a previous repo I worked on back in [Week 2](https://dev.to/katiel/hacktoberfest-week-2-pr-3b0f) that was tagged with `enhancement` and `intermediate-level`. The reason I chose a repo I worked with before was because I knew the repo owner had created various issues of varying difficulty, and I did not need to spend too much time searching for an issue of the difficulty I wanted, or spend too much time with the set up.

## Background on the Project

[TanyaAja](https://github.com/mazipan/tanyaaja) is an anonymous question bank platform. Once set up, you can get your own web app where others can submit questions to you. Those who post questions are authenticated via [Firebase](https://firebase.google.com/), and their questions are stored in your [Notion](https://www.notion.so/) database. It also uses [Next.js](https://nextjs.org/) and [Shadcn UI](https://ui.shadcn.com/). The default templates to set up the app is in Indonesian, but users are able to customize these templates to change the wordings.

## The Issue

{% embed https://github.com/mazipan/tanyaaja/issues/88 %}

The owner would like the homepage to display the total number of users that are registered. This means calling an API to get the number of users stored in the Notion database. The owner also asked for cache to implemented.

## Fix and Initial Pull Request

In my initial Pull Request (See commit [6e37aa](https://github.com/mazipan/tanyaaja/pull/123/commits/6e37aadbb357a5db1c6268885ffa3f1ea22f08d3)), I did the following code changes:

- wrote new API and methods to get the registered user count (used [notion search api](https://developers.notion.com/reference/post-search) to return number of users)

Here is a snippet of the code (To see the full code see commit [6e37aa](https://github.com/mazipan/tanyaaja/pull/123/commits/6e37aadbb357a5db1c6268885ffa3f1ea22f08d3)):
![api_code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhen1vu4wglhdy195a10.png)

- displayed the count in the homepage (src/app/page.tsx)
- cached the count in localStorage

![cache_code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52fyllb8ke89y7jaujes.png)

![user_count_code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kx3hu5ycpg6dvk8hvucu.png)

## Review and Updated Pull Request

I was unaware that someone else had written an [API](https://github.com/mazipan/tanyaaja/pull/121) to get the count from any Notion database, and this code was merged an hour before I created my Pull Request. Thus, the repo owner asked me to use [this API](https://github.com/mazipan/tanyaaja/pull/121) instead. (See my conversations [here](https://github.com/mazipan/tanyaaja/pull/122) - these conversations are in an older PR because I accidentally closed the PR when I forced a code merge between my branch and the main branch)

I changed my code to use the above mentioned API and removed necessary files and methods (See commit [d3ca7f](https://github.com/mazipan/tanyaaja/pull/123/commits/d3ca7fb20e77b7fc4e7444028142f2fb2ac535ce)). This brought the number of files I changed in the repo from 4 down to 2, and also made it easier for the owner to review my code.

**Files updated:**

- `src/app/page.tsx` (the homepage - added code to get user count and display and cache it)
- `src/lib/api.ts` (added a new function getUserCount, this function uses the statistics API from [#121](https://github.com/mazipan/tanyaaja/pull/121))

**Screenshot of the count displayed in homepage and cached:**

![feature_screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g73a7ooizq8v4dp6tyaf.png)

## Merge and Changes by the Owner

The owner merged my PR, and added an [additional commit](https://github.com/mazipan/tanyaaja/pull/123/commits/8f89eb00ccf8610e39570800a94caf87dff93455) of his own to refine the design. He renamed my getUserCount method to getPublicStatistics and updated it to not only return the number of users in the user database but also the number of questions in the question database. He also removed my cache implementation - perhaps this is because React Query already caches results so there is no need. Lastly, he moved the statistics for the user registration to container at the bottom of the homepage (See screenshot below). Also view a live version of the app [here](https://www.tanyaaja.in/).

![final_app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ok3bhjmhvnizzfy3jq03.png)

## Reflection

Although the original API I wrote was not merged (someone had written another one an hour before me) and my cache implementation was ultimately not used, I learned a great deal from researching and working on this enhancement. The notion [search API](https://developers.notion.com/reference/post-search) I used in my initial implementation took a lot of time and a lot of testing different parameters before I got it to work. I believe part of the difficulty was due to the unclear documentation but also part of it was my unfamiliarity with Notion.

It was also very challenging to go through another person' project code and add new methods while trying to following existing coding conventions. This was also my first time writing an API on my own and implementing cache in localStorage for a project that was not a school assignment.

In the future, I would try to have more earlier conversations with the repo owner about how I should go about implementing a new feature such as the API, or the cache. Although the owner had suggested using the search API in the issue, if I had asked he may have alerted me to the other issue in the repo where another user was writing the statistics API. Also, I would try to browse current repo issues and PRs to see if anyone is working on any code that is related to my issue. Another thing I would do in the future is to create a Draft Pull Request early on and make commits as I finish parts of the work. This gives the repo owner the opportunity to review part of the code and give feedback if I was not going in the right direction.