Create the main "Play" layout

[antw]

Creating the main layout requires that we bring together many of the components created earlier in the projects, add some new components, and combine with the state management.

The main play page consists of two separate tasks: the play page layout itself, and the play area (better names are needed!). The layout combines the site header, scenario navigation, sidebar, and the content area:

The contents of the content area are determined by the current route, visualised by the sidebar item. Each sidebar may load different content within the play area, though most will likely stick with the sliders/charts content.

This task focuses on creating the layout of the play page, without regard to the features needed by the content area. For the default content area, see #30.

New features

Routing

Routing is required so that we can map the URL to the page which should be loaded, and which content should be active within that page. The route consists of the prefix "/scenario" followed by one or more path segments which determine the active sidebar item and content of the play area. The final optional path segment is used to determine state within the play area, for example to tell it which accordion item is open.

/scenario/demand/households/insulation
          ^---------------^ ^--------^
                   |             |
            Sidebar state        |
                                 |
                   Play area state (e.g. accordion item)

It remains to be seen whether the Next router will be compatible with this behaviour (check out connected-next-router).

The routing information likely needs to be part of the application state so that changes in the route have the desired effect on the sidebar, accordion, and other page content.

UI state persistence

Some aspects of the UI state need to be persisted. For example:

• We should persist the current route, so that when the user navigates away then resumes their scenario later, they arrive at the same page they left.
• The editor content (Create the default editor content area #30) will require some aspects of it state to be persisted on the server.

Therefore, we need to be able to send these user settings back to the ETModel API when they change in the front-end store.

Tasks

• Create a page and route in the React app for the play page.
• Adds the header, scenario nav, and sidebar components.
• Connect the sidebar component to the store so that the store and sidebar remain in sync.
• Load an empty content area when the route changes.
• Handle persistence of the UI state to the server.