The All-React App

App features

Here are the features which we’ve created in our app:

• The initial data for the page comes from an API call to the server that returns JSON.

• Clicking a date in the calendar filter at the top of the page makes that date visible and other dates invisible, with the same logic and the same “Show All” button as before.

• The search bar calls the server for search results and displays them in a modal window.

• Clicking the “Make Favorites” button adds a concert to the list of favorites, clicking “Remove Favorites” takes it out of the list, and favorites animate in and out of that list.

• The schedule page can receive ActionCable broadcasts when the user changes favorites in a different browser or with updates to the number of tickets remaining in a concert.

React page

In creating the React page, we made a few starting decisions:

• We didn’t need styled-components because the CSS already existed.

• We didn’t try to make a React route bridge between the two React pages. Instead, the schedule page still uses the Rails server to route between the two pages.

• There’s some minor date parsing and formatting on this page. Rather than introduce a new JavaScript library to manage this, we did it on the server side and had the formatted and parsed data made part of the data sent to React.

• We decided to maintain our CSS implementation ofthe show/hide behavior, even though React makes it relatively easy to simply remove and reinsert the DOM elements. This was to keep from also having to rewrite the tests and to avoid more complicated conditional logic in the React components.

We have to roll the markup up into React components and then make those components communicate with and receive data from the reducers. Let’s start on the Rails side.

The controller changes slightly to allow for a JSON call: