Release 0.4 Complete

    In my previous blogs, I have planned out my release 0.4 contributions, I have been reading documents and watching tutorials, communicating with the developers of the project ever since. Today, I have finished my two contributions on the qasong repository. In the previous blog, I have talked about how I fixed one of the issues, in this one, I will talk about the other.

    The second issue, which I considered to be the more challenging one, is an issue I opened in the repository myself, this is an issue I created from one of my release 0.2 contributions. The confirmation button on the clear queue section, produces a browser default confirmation window, I really should have worked with Material-UI based component to make a dialog component myself since this is the framework that the project relies on. The browser confirmation window looks ugly, but it got the job done, since I didn't know how to work with most Material-UI components back when I was working on 0.2, I gave up on the Dialog component implementation.

    Since the repository team accepted my PR for 0.2, I felt like I needed to fix this issue that I created myself, I was confident enough that I could resolve this issue this time since I have been working with React applications a lot lately. 

    While working on the project, I ran into problems like unable to run the project locally and unable to make network requests to resources within the running application, etc. They were mostly webpack related issues, and was resolved by contacting the repository owner.

    Throughout the process of working on these issues, I have enhanced my ability in working with React projects and learned a lot about functional components as well as the Material-UI framework.

Implementation Details:

    -Add [confirmDialog, setConfirmDialog] useState hook, initial value is a json object, {open: false, title: "Please confirm to clear queue", subTitle: "Can't undo operation"}.

    - Code confirmClearDialog component using Dialog, DialogTitle, DialogContent, and Dialog Actions(for the yes/no buttons)

    - This component takes a props parameter, which consist of the json object mentioned above, the current queue object and the setQueue function.

    - Add two click handlers for the yes/no buttons, handleClickNo does nothing but closing the dialog, handleClickYes removes empties the queue using the queue object and setQueue function passed down from the upper layer and then closes the dialog.

The Code could be found in the PR, which I will provide a link at the bottom.


To accomplish implementing this feature, I used the following resources:

Material-UI Documentations: https://material-ui.com/components/dialogs/

CodAffection's YouTube tutorial: https://www.youtube.com/watch?v=KOryCvYE4_s


Previous Blogs:

https://weihuangosd.blogspot.com/2020/12/contribution-plan.html

https://weihuangosd.blogspot.com/2020/12/update-on-release-04.html


qasong repo: https://github.com/IanWalston/qasong


Issues Mentioned:

https://github.com/IanWalston/qasong/issues/195

https://github.com/IanWalston/qasong/issues/186


PR: https://github.com/IanWalston/qasong/pull/213

Comments

Post a Comment

Popular posts from this blog

Working on the Telescope Project

Image
Two weeks ago, I've had my first chance of working with the Telescope project and utilized it's back-end API to work with my DLCheck Project. In the past few days, I got more involved, played around and worked with Telescope's front-end portion. One of the issues that I found in the project repository got an idea from the Node.js webpage and requested for a React Component to display the contributors' information to thank them for their effort in developing/maintaining the Telescope project. In the beginning, I was a bit lost by reading the existing code, but luckily, the telescope project was developed using the React JS library and utilizes Material-UI framework, I have worked with a project which was also developed using the same tools during my Release 0.2 assignment, therefore, I was able to understand pieces of codes fairly quick. The new Card Component was overall not that hard to implement but it still took me a quite bit of time, I was given a custom React Hook...
Read more

Hacktoberfest -1

 This week the Hacktoberfest event has finally started and I had the chance to contribute to real open source projects. Finding an issue that I can fix took way longer than I thought it would, most of the issues were either taken or they were too complicated for a first time contributor. After a while of searching around GitHub repos with "good-first-issue" labels applied, I found a couple repositories that seemed interesting to me. One of the repositories requested for a new URL redirects in their projects, I thought this was an easy fix, but that it was more complicated than I thought it would be, the original repository had no instruction on how to run and test the application, therefore, I had to leave a comment in the issue asking for instructions. As it turns out a test must be written first before adding any code to the project, and when I ran the initial test before adding anything into the project, I was already getting testing errors, it seems like a challenging one...
Read more

Hacktoberfest -2

 Hacktoberfest is still ongoing, this week I have made my second contribution to real open source projects, I have decided to go with the same method I used last time to look for issues, which was applying the "hacktoberfest" label and sorting by the issue post date. After a bit of browsing, I decided to pick up an issue from a small project. It is a weekly calendar app developed using a JavaScript front-end frame work called Svelte, the issue indicates that the project could use a clipboard icon on their web app and an click event handler to allow users to copy contents to the clipboard. This project was easy to set up and configure for testing, since I already have most of the tools required to work with it, all I had to do was to install the dependencies and get it running locally by using the "npm run dev" command. Thanks to the project owner who posted the issue, he specified the exact file to add the feature to, which was very helpful, without the instructions...
Read more