The All-Hotwire App

Features replicated in Hotwire

The list of features on the venue page which will be replicated in Hotwire are:

• Unroll the markup from the React components and go back to an ERB template.

• Add the interaction for changing the number of tickets to buy, which also changes the status of seats from valid to invalid and vice versa, including communication with the server.

• Add the interaction for clicking on a seat, which updates the status of that seat, the seats to its left and right (which might be purchased or become invalid), and the subtotal, including communication with the server.

• Add the interaction for the “Clear All” button

• Add ActionCable functionality for communicating between multiple browsers.

We had a couple of design decisions to make. Our goal here was to make this app as Hotwire-forward as we could, leaving state and logic on the server to the extent possible.

Both the ticket to buy and the seat button press could be modeled as HTTP form requests with Turbo Stream responses.

The tricky bit is the last one, where browsers are communicating ticket purchases. The reason this might be complicated is that it’s the one place where the client-side state matters. As currently written, the server can’t correctly send the new state of the client as pure HTML to all browsers because the other browsers might have a different “Tickets to Buy” set, and therefore would send different HTML based on a client-side value that the server doesn’t know about.

Converting JSX to ERB

The place to start here is to show the ERB files converted from React. The structure is quite similar.

Here’s part of the concert show page itself: