Pagination

Complex programs can use multiple pages to group similar settings into smaller pages can improve navigation and discoverability.

Page driven navigation

In the same way that the connections and loading screens are different layouts from the template's Overview.tsx, you can create additional pages and allow navigation between them for a full view change.

Multi-page behaviour is conceptually similar to a file tree, or web-browser URLs, each page has a unique location which can be represented as a path through multiple branches.

When multiple devices are connected at once, each device represents a root node of a routing tree under the connection page, with the deviceID used as part of the path.

Adding another 'tab' to the template

First, lets create a new file which represents the page layout, /src/application/pages/ConfigurationPage.tsx and add the standard bare-bones page boilerplate.

import React from 'react'
import { RouteComponentProps } from '@reach/router'

const ConfigurationPage = (props: RouteComponentProps) => {
  return <React.Fragment>This page smells like a new car...</React.Fragment>
}
export default ConfigurationPage

Next, the router needs to be provided with the page's components. In /src/application/pages/DevicePages/index.tsx, import the page and add it to the list of children inside the <Router> block.

import { ConfigurationPage } from './ConfigurationPage'

<Router>
  <OverviewPage path="/" />
  <SecondaryPage path="secondary" />
  <ConfigurationPage path="config" />
</Router>

The page is now ready to use. Lets add it to the top navigation bar.

The template's top menu bar is in /src/application/components/Header/index.tsx. Add a button which navigates to the config page as shown below. This would make most sense placed inside the existing Navbar.Group block.

<Button
  text="Configuration"
  onClick={() => {
    navigate(`/devices/${props.deviceID}/config`)
  }}
  active={page === 'config'}
/>

Navigating from anywhere?

There's no hard limit on how page navigation is achieved. If adding navigation controls to pre-existing pages, ensure the page's exported component is passed the InjectDeviceIDFromLocation properties, as the current location path is required.

Partial 'paging' with menus

TODO

This hasn't been written yet. We're planning a section where in-page interactive menus are created.