Skip to content

Commit

Permalink
Persist map across page loads
Browse files Browse the repository at this point in the history
For comparison [see this commit][commit]

Interestingly, Superglue doesn't have this problem. Recall earlier, that we used
the same `index.js` component for the `show` and `index` action.

```
 const identifierToComponentMapping = {
  'seats/index': SeatsIndex,
  'seats/show': SeatsIndex,
 }
```

Because of this, we can rely on React's VDOM diffing to just change the DOM
nodes that needs to change.

We do have to reset the map when ever we receive props to achieve the same
effect when switching floors. And with that we introduce the first use of
Superglue's UJS helpers, here's the relevant diff:

```
-                  <a href={path} className={className}>{name}</a>
+                  <a href={path} className={className} data-sg-visit={true}>{name}</a>
```

Superglue's UJS helpers are similar to Rails, but you must explicitly opt-in by
adding a data attribute. Options include `data-sg-remote`, and `data-sg-visit`,
the difference being that `data-sg-visit` will push history state.

These UJS helpers are convenience to using Superglue's out-of-the-box thunks:
`visit` and `remote`. If you ever need fine grain control of the way your
application fetches, these thunks are passed as props to your page
component.

[commit]: seanpdoyle@23725b6
  • Loading branch information
jho406 committed Oct 8, 2023
1 parent 965e9c2 commit 9fe1972
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 1 deletion.
2 changes: 1 addition & 1 deletion app/components/FloorSwitcher.js
Expand Up @@ -19,7 +19,7 @@ export default class extends React.Component {
{
floors.map(({path, name, className}) => (
<li className="syos-block-stack__item" key={path}>
<a href={path} className={className}>{name}</a>
<a href={path} className={className} data-sg-visit={true}>{name}</a>
</li>
))
}
Expand Down
6 changes: 6 additions & 0 deletions app/components/SeatingMap.js
Expand Up @@ -63,6 +63,12 @@ export default class extends React.Component {
this.map.destroy()
}

componentDidUpdate(prevProps) {
if (this.props.floor !== prevProps.floor) {
this.map.reset()
}
}

render() {
const { sections } = this.props
const sectionElements = buildSectionElements(sections)
Expand Down
2 changes: 2 additions & 0 deletions app/views/seats/_seating_map.json.props
@@ -1,3 +1,5 @@
json.floor floor.name

json.sections do
json.array! sections do |section|
if params.fetch(:maximum, Float::INFINITY).to_f >= section.price
Expand Down

0 comments on commit 9fe1972

Please sign in to comment.