Modern Front-end Development for Rails/

...

/

The All-React App

The All-React App

Look at what the Stimulus page looks like in React in this lesson.

We'll cover the following...

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

  • We didn’t need styled components, because the CSS already existed.
  • We did not 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 keep the show/hide behavior via CSS classes, even though React makes it relatively easy to just remove and reinsert the DOM elements. This was to keep from also having to rewrite the tests and to avoid more complicated logic in the React components.

We also decided that we couldn’t quite use the existing filter reducer (app/javascript/src/calendar_filter_store.ts) as is, although we did adapt the logic into a Redux reducer.

The only other real design decision was how to break up the components. We made individual calendar days at the top components, individual schedule days, and individual concerts, with some grouping components to manage the lists.

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

The controller doesn’t actually have to change, but we do reduce the view file to just this:

Press + to interact
<div id="schedule-react-element"
     data-schedule="<%= @schedule.days_hash.to_json %>"
     data-sold-out-concert-ids="<%= @concerts.select(&:sold_out?)
                                             .map(&:id).to_json %>">
</div>

Very similar to the other React app, we’re creating a div element with a known ID that we’ll use to attach the React app, and we’re passing it elements that will become React props. These props are a list of the IDs of sold out concerts and the schedule data as a hash.

The schedule.to_hash method is new. Here’s the whole file:

Press + to interact
#---
# Excerpted from "Modern Front-End Development for Rails",
# published by The Pragmatic Bookshelf.
# Copyrights apply to this code. It may not be used to create training material,
# courses, books, articles, and the like. Contact us if you are in doubt.
# We make no guarantees that this code is fit for any purpose.
# Visit http://www.pragmaticprogrammer.com/titles/nrclient for more book information.
#---
class Schedule
  attr_accessor :schedule_days
  def self.from_concerts(all_concerts)
    schedule = Schedule.new
    all_concerts.group_by(&:start_day).each do |day, concerts|
      schedule.schedule_days << ScheduleDay.new(day, concerts)
      schedule.schedule_days.sort_by!(&:day)
    end
    schedule
  end
  def initialize
    @schedule_days = []
  end
  def days_hash
    schedule_days.sort_by(&:day).map(&:to_h)
  end
end

A schedule is a dictionary in which the keys are the days in the schedule, and the values are a list of concerts. The ScheduleDay class also grows to a hash method:

Press + to interact
#---
# Excerpted from "Modern Front-End Development for Rails",
# published by The Pragmatic Bookshelf.
# Copyrights apply to this code. It may not be used to create training material,
# courses, books, articles, and the like. Contact us if you are in doubt.
# We make no guarantees that this code is fit for any purpose.
# Visit http://www.pragmaticprogrammer.com/titles/nrclient for more book information.
#---
class ScheduleDay
  attr_accessor :day, :concerts
  def initialize(day, concerts)
    @day = day
    @concerts = concerts
  end
  def day_to_h
    {month: day.by_example("Jan"),
      date: day.by_example("02"),
      year: day.by_example("2006"),
      weekday: day.by_example("Monday"),
      key: day.by_example("2006-01-02")}
  end
  def to_h
    {
      id: day.by_example("2006-01-02"),
      day: day_to_h,
      concerts: concerts.sort_by(&:start_time).map(&:to_h)
    }
  end
end

Here you see some of the data massaging we’ve decided to do server-side rather than deal with it client-side. In particular, the ...