Update on Release 0.4

December 11, 2020

In this blog, I will provide updates on my previous post, in the previous blog, I have set my plans and goals for 2 of my release 0.4 open source project contributions. Since then I have been working on those issues and have done a good amount of work.

I started with the issue which I thought would be easier to solve, that is to add a Material-UI based component to alert the user that the song queue has been saved once they click the save queue button. This issue itself didn't seem too challenging in the beginning, but in the middle of implementing this, I was able to find many parts of the code that is some-what related to this feature that needs improvements or some debugging, therefore, aside from implementing the save alert, I also fixed those issues. The list of issues that I fixed could be found in my PR.

After I requested for the issue mentioned above, one of the the qasong team member sent me a document on Material-UI Alert component, this was exactly what I need. To implement this, I had to work with QueueSection(Parent) component and QueueSaveButton component(child), I created a new state variable for the QueueSection component "displaySaved" by using a react useState hook, the initial value it holds is false. I then added a onClick event on the grid component which is where the QueueSaveButton is placed within, once this grid is clicked, it will use the setDisplaySaved function coming from the useState hook to change displaySaved's value to true, then in the same click handler function, I used setTimeout function and passed in setDisplaySaved(false) and 3000ms as parameters, in other words, this event handler will change the DisplaySaved's state to true then to false 3 seconds after. Using this logic, I now can use the value that DisplaySaved holds in the return of QueueSection component, if the user clicks on the SaveQueue button, the value turns to true, which produces an alert and informs the user that the queue has been successfully saved, 3 seconds after, the alert will disappear since the value is false again.

The implementation has been done, now what? On PC, this component renders fine beside the buttons, however, it is important to make this component responsive, on a mobile view, the current setting might look horrible, therefore I made the alert component to take up an entire row on the screen to display if a user is on mobile or other devices with small screens.

After I finished implementing this feature, I contacted the developers in the qasong discord channel, we talked about the design and chose the colors that would fit the theme of the project(in both white and dark mode).

Since this issue took me longer than I thought due to the family bugs I needed to fix, I haven't done much for the other issue. I have looked up for tutorials on how to make pop up confirmation windows using Material-UI, but yet to complete implementing it, hopefully I can figure something out soon.

Partial Code for 1st Issue:

const [displaySaved, setDisplaySaved] = useState(false);