OSD600 Release 0.4 Part 3

 This is the last blog for OSD600 and the last part of release 0.4! I am excited to be writing this as after this I will be done with everything I need to do for my classes this semester, and graduate! One issue I noticed while working on this is I did not fully understand what was needed to "port" a component from Gatsby to Next. At first, I thought everything you needed to do to port a component was in this migration guide posted in the issue. After talking to some people on Slack I learned we must not only follow the migration guide but also convert the JavaScript code in the components to TypeScript. I have worked with Typescript before so I had an idea of how it works/what it is (it's basically JavaScript with types), but I never knew how to convert JavaScript code to TypeScript code. After doing some research I learned this process can be broken down into two simple steps:

1. Change all the .jsx files to .tsx files.

2. Add types to all the variables made. Eg. function LogIn(style) becomes:

function LogIn({style}: {style: any})

So I started by creating a new branch, then copying the LogIn component files, contexts/ and hooks/ from the gatsby directory to the next directory. The files I needed to change where: LogIn/index.tsx, LogIn/LoggedIn.tsx LogIn/LoggedOut.tsx, LogIn/login.tsx and hooks/use-site-metadata.ts. This issue was much more challenging than I thought. First off I had a hard time understanding how the useSiteMetaData function worked and how I would need to convert it. I did a lot of research and read these docs:

  1. https://nextjs.org/docs/basic-features/data-fetching
  2. https://www.gatsbyjs.com/docs/page-query/
  3. https://nextjs.org/docs/migrating/from-gatsby 
I came out with a lot of ideas but nothing seemed to work, so I decided to ask on Slack and push to my branch so people can see the code. Cindy replied with a fix to this issue. However, after that, another issue popped up which was even more strange.

I ran npm install when I first started this, so I checked the code, but everything seemed correct. I read on stack overflow this can be caused but not having the component as a functional component, but it was... after discussing it with some people on Slack, Calvin figured out that @material-ui/core was not installed.  I didn't think of this as I thought it would already be in package.json and installed when I run npm install. On the bright side, this lead to the discovery of a new issue. However, the problems didn't end there! After I installed @material-ui/core a new issue arose!!
The first thing I tried was to just hard code colors in place of these lines... and it worked! 
Since this issue was just to port the component I left it like this. I let people know about this on Slack and in my pull request so this issue can be fixed in the future. I'd like to thank Cindy and Calvin for their guidance with this port. Overall release 0.4 was by far the hardest pull request I had to do this semester, but I see that as a good thing for two reasons:  I am continuing to push myself further and do things I would otherwise be scared to do, and now I know for sure this will satisfy the 0.4 requirements 🤣. That puts an end to release 0.4, OSD600, and my journey at Seneca. I learned a lot not only in this class but in the past six semesters! I am very grateful for the knowledge I have gained here and I am sure will be very useful in the future. I am also very grateful I had David Humphery as my professor, not just because he was a good teacher and always helped his students. More importantly, he is always pushing us to go "bigger" and challenge ourselves. He helped guide us through the world of open source development. He taught us to have confidence in ourselves. He reminds me a lot of my grade 12 Computer Science teacher who did the same. I know for a fact this will pay off later on. The future looks bright!



















 

Comments

Post a Comment

Popular posts from this blog

Release 0.3 PR2

Image
  For release 3 we have to make 2 PR's. The first one must be for the  Telesope project  and the second one must be for an external project. These PR's must "build up" from the PR's we did for release 0.2. This blog post will highlight working on the PR for Telescope. When I started this the first place I went was to the issues page on the Telescope repository. I saw there were some tests that needed to be written and were interested in taking on one of these issues. These were more complex than the test I wrote for the first part of 0.3 so  I saw it as a good opportunity to improve my skill. I asked in Slack for some advice on what to do and was given this idea from David: This seemed like a good test to write (challenging but something I can figure out) so I made an issue for it and started working! When I first wrote the test everything looked fine but it kept on failing. At first, I thought that's good, if we pass an invalid date shouldn't the test fa
Read more

OSD 600 Lab 2

I really enjoyed this lab as is helped me understand the process/workflow of contributing to open source. I wrote a separate article on that which can be found here .  During this lab, I created an issue  on the original repository saying I wish to implement additional features to the code.  Once I got approval from the original author to do this I forked and cloned the project, created a new branch called issue-2 , and uploaded the code I wrote to it. After that, I made a pull request to the original repository. For my feature, I added the v and version arguments to their command-line tool. The process of getting my work accepted was exciting as I got to hear from the person who wrote the code and learn what it is exactly they want. This a great opportunity to improve on the code you wrote. One problem I had was after I got the feedback I was not sure how to edit code on the issue-2 branch, after doing some research I learned how to switch branches via the git checkout command. I al
Read more