Custom Layouts

You can create a custom layout for any page/route.

Create a new layout file within ‘Frontend/src/client/layouts’

Please use the template below to build your new layout. The actions being dispatched are required to ensure that each component is supplied with the users authStatus. The 'RoutesHelper' component is used to render the routes within the layout component. Feel free to build your layout around this component.

import React, {Component} from 'react';
import RoutesHelper from './../routes/routesHelper';
import classNames from 'classnames';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import {getAuthStatus, checkAuthStatus, force_noAuthStatus} from './../actions';
import * as Cookies from 'es-cookie';

class NewLayout extends Component {

    constructor(props){
        super(props);
    }

    componentDidMount(){
        let token = Cookies.get('token');
        if(token){
            this.props.checkAuthStatus(token)
        }else{
            this.props.force_noAuthStatus();
        }
    }

    render() {
        return (
            <div>
                <RoutesHelper {...this.props} authed={this.props.authStatus} authPath='/login' />
            </div>
        );  
    }

};

const mapStateToProps = (state) => ({
    authStatus: state.authStatus.status
});

export default {
    component: connect(mapStateToProps, {getAuthStatus, checkAuthStatus, force_noAuthStatus})(withRouter(NewLayout)),
    loadData: ({dispatch}) => dispatch(getAuthStatus())
};

Now you have a new layout component, lets update our routes.

Open ‘Frontend/src/client/routes/index.js’ and import your new layout

import NewLayout from './path/to/layout';

Find and update your selected page/component within the routes array

{
    path: '/some-page',
    ...NewLayout, <<-- Add your layout component here
    routes: [
        {
            ...SomePageComponent
        }
    ]
},