Views

View Component

Gravity has a custom <View> component that serves two purposes:

  1. Houses global components that are common to all views (notification, modal)
  2. Handles errors

When creating a new <Route>, your view is passed as a child prop to the <View> component and rendered inside the ViewContext. This means that you can show a modal, create a notification or handle an error from anywhere in your application.

<PrivateRoute exact path='/signup' permission='user'
 render={() => <View display={ Dashboard } layout='app'
 title='Dashboard' />}/>

Creating New Views

To add a new view to your application, you add a new file to the /client/src/views folder and create the <Route> in app.js.

Inside the views folder, you'll find a file called template.js that you can use to generate new views quickly.

The basic premise for the view template is:

  1. Make an API call to get the data inside componentDidMount() and then update the state
  2. This will trigger the render() method and render your components with the data returned from the server.