No-Brainer HTML, JS, CSS and cypress.io testing starter tutorial — Part 5

This tutorial series is aimed as notes for participants of workshop which will be held in OKE Software Poland. It assumes that participants have very basic understanding of HTML, CSS and JS technology. It doesn’t provide complex overview of current frontend state of the art, but rather should be treated as encouragement to further pursue the knowledge needed to become frontend dev or automated tester.

My Tickets — Event Handlers

In the last part we were able to render My Tickets view. Yet, we didn’t make it fully functional, so there’s still some buttons that we’d like to connect. Let’s get right to it!

Ok let’s start with something simple. When user clicks on PAY button we’d like to change the status of given ticket to PAYED and change the PAY button to WITHDRAW, meaning that the user can resign from going to the concert and get full money refund. We can also take into consideration that there’s a button saying Pay For All and design our function accordingly. Let’s head into our ticketService.js and write our changeTicketStatus function:

https://gist.github.com/wojciech-bilicki/1b7f4ace2f7f8a960c3b97aeb954d8f5

It’s rather easy. We pass the status that we’d like to change to and an id of the ticket. If the id isn’t passed we change the status of all the tickets and than override the localStorage key with tickets with updated status.

Ok so now let’s update our createActionButtons function. There’s few things that we need to consider here. We need to pass ticket object to that function so that we can style our button accordingly changin it looks and functionality from pay to withdraw. We’d also like to add proper event listener and when user clicks call the proper function with correct arguments, but this time instead of using anonymous function we’d like to specify the function in the same object with set of arguments. We can do this using .bind function, to provide correct this.

Great we can decide what arguments to pass to our onPayWithdrawClick based on current ticket status as well as text, class of the button. Be careful to remember that when using bind you are passing function arguments as an array. Thanks to this we can write our onPayWithdrawClick as:

We pass the arguments from an array to function that we wrote in ticketService. Remember that this function updates our data in localStorage, so we need to rerender our table with fillMyTicketsTable function. Great, but the thing is now it simply add new nodes to our table, but what we need exactly is to get rid of old nodes and input new ones with updated data.

Next let’s add our Pay for all button to the mix. At the bottom of the ticketList.js file we can simply add the event listener that will fire a function changing the style and text of the clicked button and update the status of our tickets in localStorage accordingly:

Since we don’t pass an id of the ticket to ticketService function, we simply fire it for all of the items in localStorage. Ok this leaves us with the implementation of delete and delete all buttons. Let’s start with button that will delete single entry. That should be rather easy. In place where we create delete button for given row we’ll write:

This looks similiar to what we had for our pay/withdraw button. And there’s of course our function for handling the click itself:

https://gist.github.com/wojciech-bilicki/4c1c84f70086773d421c26576e0fe250

The last piece missing that we need to add is the function for removing the given item in ticketService.js:

It’s similiar to the once we used to change the status of our ticket. Based upon whether the id is passed to the function we delete all item using removeItem function or simply removing just designated one by using splice function from an array. Splice takes two arguments:

• index from two which start deleting the items in an array
• count of items to delete

This is good! Great so the very function that is missing is the one for our delete all button. At the very bottom of ticketList we can add:

This is working-ish. If we hit the deleteAllButton it will remove the items from localStorage, but we’ll get problems rerendering out table. Why? If you check our getTickets function, we use map function to create myTickets, but since we deleted them all we are trying to call map on null. As logic dictates, you can’t call a function of something that doesn’t exist, thus the error. We can fix it simply, by returning an empty array if there’s no stuff in localStorage:

This finishes this part of the tutorial. In the next part we’ll build the artist/concert details page. Cheers and see you in next one!