This time, I picked the game-knight repository to work on. This is an interesting project to easily record the result of any games we play with our friends and family.
In the previous issues that I took on, I did fix a bug raised by others and also fixed a bug that I raised myself. For this one, I decided to try something new - contributing a brand new feature

The new feature

The application currently allowed users to record games played within the day. The project owner wanted to add a date picker to make it flexible to record games on any days (issue #30).

The implementation

The first thing I did was to look for a date picker library. There were a lot to choose from but I needed one that would look most similar to the theme of the application so my choice went to react-day-picker. The UI looks simple and would be the best fit for Game-night.

I read through the documents to understand how this component works and also went through the examples as I tried to implement it. There was no problem with the functionality of the date picker but I had to struggle with the styling. The download link for the stylesheet provided in react-day-picker documentation was broken so I had to use the browser's inspector to find out the class names to overwrite the default styling. After doing some more research on similar problems, I was able to create a date picker that matches the theme of the app.

After looking at my pull request, the owner suggested that we could use an input field instead of a calendar so that the date-picker won't take up too much space. The full calendar should only be expanded if the users need to change the date. I also shared my opinion that users should only able to select date in the past. We both agreed with each other's ideas so I went on to update the feature.

{/* Date Picker */}
<div className="flex flex-col gap-3">
   <label className=" text-lg text-left" htmlFor="winners">
      Please select a day
   </label
   <DayPickerInput 
      format='YYYY/MM/DD'
      value={date}
      placeholder={date}
      onDayChange={day => {setDate(day)}}
      dayPickerProps={{
         disabledDays:{after: new Date()}
      }}
   />
</div>

Before finalizing the feature, I found that the owner was using variables for color so I decided to update the colors in dayPicker.css file with those variables to maintain the consistency.

It took me longer than expected to resolve the issue but I am very happy and satisfied with the final outcome.

Issue-3 link: https://github.com/tyler-morales/game-night/issues/30
PR-3 link: https://github.com/tyler-morales/game-night/pull/50