It's been 3 weeks since I join this telescope team. In this blog post, I want to talk about the 2 PRs that I sent (and both got merged!! Ya!!).
As mentioned in the previous posts, I want to focus on front-end frameworks in this term. In this telescope project, we're using React for front-end implementation, moreover, we're moving our front-end component from Gatsby to NextJs, which provides many chances for us to practice.
The first PR I want to discuss is related to css styling. This was an extended PR from another developer's merged PR. One element in his component was missing a style setting, which made the element had block instead of inline value.
At first, I simply just put back what was missing in this ported nextjs component. However, I received an typescript error saying that No overload matches this call, on my newly added variant="p" style setting. This is an error that I understand what it means literally, but doesn't understand why is this error applies to my case.
I dig into this error and found out that the <Typography> element in React actually has its own setting about the styling. In this case, you can only assign the variant to a limited of type such as h1, h2, title, subtitle. I didn't know how to make this overload legit, therefore, I chose one variant type, caption, to make the typography element inline with appropriate font size.
However, after I sent this PR, other experienced developer (Thank you, Pedro!) in the team told me that this error exists in the Gatsby version of component as well, which is okay to let it be there since typescript can still compile perfectly. But, I'm happy that I spent some time on this error instead of just copy and paste the old missing part back to this new component. By the way, this can also be fixed by changing the inline/block setting in its class in makeStyles that we use for setting the css for elements in the component.
The next PR is to port the AdminButtons component from Gatsby to Nextjs. This is a simple porting PR, but it requires admin credential to test the component. Thanks for a group of developer's help, I quickly learned how to do that. However, this component also use a new component called UserProvider which just got merged recently. This UserProvider supposes to return a user interface if the user is logged in, which I was, but, I didn't get the user interface and the user object is empty.
After talking with professor Dave, we found this bug that the UserProvider is not returning the user object that it is supposed to be. This is the interesting thing about working as a team, you'll always need to communicate and make sure you're up to date with your team members in order to solve the issues.
Looking forward to embracing the upcoming challenges in next week!
Top comments (0)