Week 12: Release 0.4 Part: 3

Release 0.4 Part 3

This is going to be my final post for this class which covers my final update on my Release 0.4. Earlier this week I made a PR that ports SearchBar to NextJS but I'm still waiting for it to be reviewed some more. I've had some feedback that I have implemented and have also requested a review again.

Overall this Release went pretty smoothly for the actually GitHub side of things like setting up the issue, making the PR, and so on. In Release 0.3 I wasn't so certain on how this process happened with Telescope, but now I never had these issues for 0.4.

Issue #1470

Fix #1470: Port SearchBar from Gatsby -> NextJS #1503

Did I Meet My Goals?

Going into this release I had two main goals:

1. Setup the Issue/PR with no issues

2. Learn about NextJS

I feel like I meet both of these goals at the end. I had no issues setting up my branch, updating my master, making the issue, making the PR, and following through on review comments so far. When it comes to learning more about NextJS I feel like I've learned a lot about it after going through its guides about migration and general learning guides. I had to learn about a little bit about Typescript as well to make this issue work out.

The Process

Here is the general layout of the process I had to do to get this done:

1. Signed up and made and issue for the section I was working on

2. Updated my master and made a new branch

3. Followed Vercel's NextJS guide along with some Typescript guides

4. Removed files no longer needed using: rm -fr src/frontend/...

5. Downloaded plugins and dependencies needed for SearchBar component

6. Moved over the old SearchBar into a new .tsx file within a new components folder

7. Struggled for a few days on how to convert the prop's to the new style

8. Figured it out and made the necessary changes

interface CustomizedInputBaseProps {

  text: string | null;

  onTextChange(): void;

  filter: string | null;

  onFilterChange(value: string): any;

  onSubmit(): any;

}

9. Added in reacts Functional Component

const CustomizedInputBase: FC<CustomizedInputBaseProps> = ({

  text,

  onTextChange,

  onFilterChange,

  filter,

  onSubmit,

}: CustomizedInputBaseProps) => {

10. Made a few minor adjustments to the page

11. Made my PR

12. Followed up on review comments

13. More to come as I wait for more review comments

Working with the Community

Over the course of this release I asked a few questions in the slack channel which for the most part pointed my in the right direction like always. It's nice to know I'm not alone when trying to solve these problems as I can always go ask in the slack when I'm stuck. Since I was working on the conversion project, there was lots of examples about different ways people were going about this which helped out a lot in the end.

What did I Learn

I learned a lot about how NextJS and Typescript work along with some detail about Gatsby. Overall this was a great learning experience since I dived into this conversion project with knowing very little about any of these technologies. Vercel's guide was actually extremely helpful in understanding the file structure and main appeal of NextJS.

Thanks,

-Matt