Week 11: Release 0.4 Part: 2

 Release 0.4 Part 2

So this is going to be my second post for my Release 0.4 giving an update on my progress and problems so far. This is going to cover what I've learned from trying to take on this issue and what I need to continue doing for my next steps.

What have I done so far?

So since I'm working on the Gatsby to NextJS conversion I thought it would be a good idea to learn more about NextJS. The first thing I did was follow Vercel's NextJS guide found here. This guide was actually pretty helpful and went in depth for concepts such as data fetching, API routes, deployment, and more.

Once this was done I started looking at how TypeScript works since I've never worked with it before. TypeScript was made to extend JavaScript by adding types. To learn more about this I read some of the guides/documents that were provided on the official TypeScript site.

After learning about NextJS and TypeScript I began working on converting the SearchBar over.

Current Progress

So far I've setup my development environment to run the new NextJS frontend on Telescope using the guides that were posted, no real issues came up with this process. After I had the basic Next template running on localhost:3000 I began my actual work.

First thing I needed to todo was install any dependencies that were used before in the Gatsby version into the new package.json. I believe this was the material-ui, typescript, and prop-types libraries. Once this was all done I restarted my environment and began work on the actual code.

Without the other components in place since they have not been developed and added to the master branch yet it was going to prove quite hard to test this newer version as I worked. 

The first thing I did was copy over the old code into the new SearchBar.tsx file and began changing how the code worked/functioned to fit the new design. So far I've adjusted quite a few things but I'm stuck on how to handle the prop types from before. Looking at a few other examples of Gatsby to NextJS conversion on Telescope I saw they have changed the Prop type definitions to interfaces, so I began tested that. A interface defines the structure that classes must follow in this case. One aspect I'm stuck on is on how to handle the functions like onSubmit, onTextChange, and onFilterChange. I've asked in the Telescope slack channel already for this but that didn't really bring me anywhere. I feel like this isn't the way I'm supposed to handle this so I'm going to look and research into more alternatives.

The interface:

interface CustomizedInputBaseProps {

  text: string | null;

  onTextChange: func;

  filter: string | null;

  onFilterChange: func;

  onSubmit: func;

}

What's next?

Overall this issue I choose had proven to be quite a learning experience as I've never worked with a lot of these technologies before, but forcing myself to jump in and learn about these will only be a benefit for me in the future. I plan on getting a PR out by the end of this weekend if not sooner so I can start getting some feedback and suggestions on my code, but first I need to figure how to handle the prop types properly.

Once my PR has been made, reviewed, and closed I well have another post talking about the overall release and my final thoughts for this course.

Thanks,

-Matt