Reinforcing my ReactJS Knowledge

Hi everyone, this should be a much shorter post, but I just want to talk about the recent contribution I made to the Calculator for Everything repo. This contribution is very much like the one I made in my last blog post titled, Expanding on My ReactJS Knowledge. So most of this blog post won't be as detailed as the previous one. However, I'll talk about what I did below.

What was the Issue I Worked on?

The issue I created was to update another calculator that I made for the repo. The difference being that this time instead of updating my momentum calculator, I was updating the density calculator that I made for Hacktoberfest.

Going into this issue, I already knew what had to be done. I had to create a dropdown menu using the <InputLabel>, <Select> and <MenuItem> tags. As well as a new functions and variables to track the selected unit of measurement for both mass and volume. If you are interested in having a more comprehensive explanation of what I did, I highly suggest that you read my previous blog post. Since this contribution and the previous one as pretty much identical. That being said, I will briefly describe how I used these tags with the example below.

<InputLabel style={{ position: 'absolute', top: -20 }}>Unit</InputLabel>
<Select
label="Mass Unit"
value={massUnit}
onChange={handleMassUnitChange}
fullWidth
>
    <MenuItem value="kg">Kilograms (kg)</MenuItem>
    <MenuItem value="g">Grams (g)</MenuItem>
    <MenuItem value="mg">Milligram (mg)</MenuItem>
    <MenuItem value="oz">Ounces (oz)</MenuItem>
    <MenuItem value="lb">Pounds (lb)</MenuItem>
    <MenuItem value="t">Metric Tons (t)</MenuItem>
</Select>

As you can see above, I used <InputLabel> to name the menu, While I used <Select> to create it, and <MenuItem> to give the menu options. With this, I was able to use the onChange={handleMassUnitChange} to track the unit of measurement selected by the user. I also had a similar setup for my volume. This would allow me to then convert the provided input back into kilograms (kg) or cubic meters (m³).

After I created the menu, and updated my functions to support converting mass and volume back to kg and m³. I got to testing my code. To do this, I compared my results with an online calculator. I saw that the results were the same, which allowed me to push this and create a pull request (pr) on the repo. This pr was tested by the continuous integration (ci) set up by the owner, which basically made sure my code would work when deployed and there were no errors. If you would like a more in depth explanation of the ci, I would suggest to read my previous blog post. Moving on, my code passed these tests just fine, and it allowed for the repo owner to merge it. This contribution allowed me to reinforce some of my ReactJS knowledge, as well as test my memory on how drop down menus are made.

The Honest Truth

There is something I must tell you about my actual plans for this blog post. Truth is, I didn't really plan on contributing to this repo again. I did some searching yesterday and came across this really interesting repo called OpenComic. OpenComic is essentially a JavaScript app designed to run on your computer to read comics, manga and graphic novels. I was actually thrilled by the idea of contributing to this repo, because if you remember from some older blog posts, I use an open source Android app called Tachiyomi which works in a similar way, except instead of just reading the files locally, it also pulls them from websites. I thought that by contributing to this I may have a good start on contributing to Tachiyomi in the future, despite me not knowing Kotlin.

Moving back to OpenComic, I came across an issue created by a Mac user. Basically, when a Mac user would go the about section of the app, it would open an alert window with no buttons to close the window causing the user to be stuck on the screen. This seemed like a pretty easy bug fix, as I have had experience with alerts in both JavaFx and Java for Android so I was expecting it to be similar for JavaScript. My main idea was to create the buttons to close a window, instead of the 'x' that would be present at the top of it, like in most OSs. I had this idea, because since I'm not a Mac user there's no actual way for me to be 100% sure that on Mac the x button would appear above the alert window. With this idea in mind, I left a comment on the issue. While I did see that this was already self-assigned to the repo owner, I also saw a lot of other issues that were self-assigned. So I was hoping that I could lighten the load for the owner. Unfortunately, when the owner responded to me, they said that they already took care of the issue. Fortunately for me, they said that this feature would be in the next beta version of the app, and invited me to test it and make sure it was working. At the time of writing this, that beta version has already been released. So I might try to go through it and see if I can find any bugs.

Anyways, that is the honest truth, I was hoping that I could have had the chance to contribute to OpenComic instead of to Calculator for Everything.

What's my Plan Moving Forward?

Moving forward, I'm planning to potentially test the OpenComic
v1.0.0-beta.5 and see if I can spot any bugs. If I don't find any bugs then I'll take a look at the issues that occasionally come into the repo. That's not all, I'm also planning to teach myself the basics of Kotlin in the coming days. I'm hoping that with my Android development experience in Java, I can quickly grasp the fundamentals of Kotlin Android development and possibly make my first ever contribution to Tachiyomi.

That concludes my blog post for now. Thank you to everyone who continues to read and follow my story through the open source world. I'll catch you all in the next post, where I possibly make my first release of my Text to HTML Converter! Take care!