Using Metamatic Framework With React Router

The Metamatic™ framework sits very well together with React routing scheme. The following
example of a React main class implementing both React-Routes and Metamatic-based state container would look somewhat like this:

import React from 'react';
import './App.css';
import {Management} from './component/Management.js';
import Login from './component/Login.js';
import {connectToStore, disconnectFromStores} from 'metamatic';
import {STORE_AUTHORIZATION} from './config/stores';
import {CarFilterList} from './component/CarFilterList';
import {CarDetails} from './component/CarDetails';
import {Route} from 'react-router-dom';
import {Header} from './component/layout/header/Header';
import BrowserRouter from 'react-router-dom/es/BrowserRouter';

export class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount = () => 
    connectToStore(
      this, 
      STORE_AUTHORIZATION, 
      (incomingStore) => this.setState(incomingStore)
    );

  componentWillUnmount = () => disconnectFromStores(this);

  isLoggedIn = () => this.state.loggedIn === true;

  renderAuthorizedContent = () => (
    <div className="container-fluid">
      <Route path='/' component={Header}/>
      <Route exact path='/cars' component={CarFilterList}/>
      <Route exact path='/cars/:carId' component={CarDetails}/>
    </div>
  )

  renderUnauthorizedContent = () => (
    <div className="container-fluid">
      <Route path='/' component={Header}/>
      <Login/>
    </div>
  )

  renderContent = () => this.isLoggedIn() ? 
    this.renderAuthorizedContent() : this.renderUnauthorizedContent();

  render = () => (
    <BrowserRouter>
      {this.renderContent()}
    </BrowserRouter>
  )
}

In the example above, a React app’s main class connects to a store ‘STORE_AUTHORIZATION’ from which it obtains an important information, namely, whether the user is loggedIn or not. Based on that info, it then renders two exclusive routing strategies. One which is for a user that is not logged in and another for someone who is logged in. Certainly, for those who are not logged in, it’s only meaningful to show a “Log In” view but those who are in will be provided the full scale of navigation urls inside the App.

Please check the complete example in the Github repository.