Custom Keyboard Shortcuts with the TALL Stack

I have been using the TALL Stack to build and application at my day job, and we came upon a really interesting use case for the Alpine.js x-on directive.

We are loading data from an external API and then serving it up to the users on the front end. We don't want to constantly hit this API for a variety of reasons, so we are caching the response for 10 minutes in our Laravel application. After 10 minutes, we go back to the API for fresh data.

This will work great for our users, who are typically using this system to check on an invoice and see how much they need to pay. Once they pay online, we update the data on the site to reflect that their payment is in progress (typically an ACH payment), and then eventually it will show as paid once the payment is resolved.

There are a few problems with this approach. First, when we are developing the app we regularly need the live data. Second, there will be times when the user will also want to see a live data update, particularly if they are on the phone with someone from our company.

How can we build the site so that either a developer or a user on the phone with us can break the cache and refresh their data from the source?

Enter the x-on directive from Alpine.

We can listen for keyup events on the window, and when we hear them, hit a method on our Livewire class to get the data without the cache. Take a look:

<div
  x-on:keyup.shift.enter.window="$wire.call('getInvoicesWithoutCache')"
>  
    Page content goes here
</div>

Using the x-on directive, we can listen for the user hitting a specific set of keys on their keyboard.

In this case, if the user holds Shift and then presses Enter, then we call a method on the backend that will get their Invoices without using the cached data.

This is useful for development (obviously), but also if we are on the phone with a customer. Say they give us payment information over the phone and when they are done, they want to see the website reflect the invoice as paid. Without this directive, we would just have to tell them to wait about 10 minutes to see it.

Now our rep can tell them to press Shift+Enter and they will see the changes reflected.

I even took this one step further and implemented the Konomi code on our site. When the Konomi code is entered successfully, your balance due immediately is set to $0. I don't think that feature is going to be deployed to production, but it was fun to implement.