Modals

Search…
Modals
Modals are easy. Let us imagine the following urls:
1./seats - This shows a stadium map of available seats.
2./seats/1 - This shows the status of a single seat as a modal over the map of seats.
Visually, the only difference between the two pages is the modal. So we model our application as such.
In /seats/index.json.props
1
# Other index.json.props content here
2
...
3
​
4
json.seat_details do
5
  json.show false
6
  # empty
7
end
Copied!
In /seats/show.json.props
1
# Other index.json.props content here
2
...
3
​
4
json.seat_details do
5
  json.show true
6
​
7
  # Add additional modal content here.
8
end
Copied!
In packs/application.js, change your component mapping to use your ShowIndex component as your identifier's component:
1
const identifierToComponentMapping = {
2
  'seats/index': SeatsIndex,
3
  'seats/show': SeatsIndex,
4
};
Copied!
and in Modal component's render:
1
  if (props.show) {
2
    ....render modal with `props.seatDetails`
3
  } else {
4
    return null;
5
  }
Copied!
and add a UJS visit attribute to get the SPA modal effect with history change and back button support!
In SeatsIndex.js, change the a tags like so.
1
  <a
2
    href="/seats/1"
3
    data-bz-visit={true}
4
   > Show Seat Modal </a>
Copied!
Optimize it!
The above solution will load the entirety of the show.json.props. That may not be what we want as some parts of the template may be slow.
Instead, we can make it more efficient by loading just the modal contents.
1
  <a
2
    href="/seats/1?props_at=data.seat"
3
    data-bz-visit={true}
4
    data-bz-placeholder="/seats"
5
   > Show Seat Modal </a>
Copied!
The change above uses Superglue's copy feature to
1.Copy the current page, /seats and use it as a placeholder for /seats/1
2.Navigate to that page optimistically (as defined in our identifierToComponentMapping)
3.Query show.json.props and walk to the data node, then to the seat node, and return that.
4.Immutably graft it to the placeholder in /seats/1 in the same location.
5.React will render with the modal contents.
Loading tab content onClick
Server-Side Rendering
Last modified 16d ago
Copy link
Contents
Optimize it!