Add routes

packages/concordia-app/package.json

@@ -28,7 +28,6 @@
     "@ezerous/drizzle": "~0.4.0",
     "@reduxjs/toolkit": "~1.4.0",
     "concordia-contracts": "~0.1.0",
-    "history": "^5.0.0",
     "i18next": "^19.8.3",
     "i18next-browser-languagedetector": "^6.0.1",
     "i18next-http-backend": "^1.0.21",

packages/concordia-app/src/App.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import LoadingContainer from './components/LoadingContainer';
+import Routes from './Routes';
+
+// CSS
+import './assets/css/app.css';
+
+const App = ({ store }) => (
+    <Provider store={store}>
+        <LoadingContainer>
+            <Router>
+                <Routes />
+            </Router>
+        </LoadingContainer>
+    </Provider>
+);
+
+App.propTypes = {
+  store: PropTypes.object.isRequired,
+};
+
+export default App;

packages/concordia-app/src/Routes.jsx

@@ -0,0 +1,59 @@
+import React, { Fragment, lazy, Suspense } from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import CoreLayoutContainer from './layout/CoreLayoutContainer';
+import LoadingScreen from './components/LoadingScreen';
+
+const routesConfig = [
+  {
+    exact: true,
+    path: '/404',
+    component: lazy(() => import('./components/NotFound')),
+  },
+  {
+    path: '*',
+    layout: CoreLayoutContainer,
+    routes: [
+      {
+        exact: true,
+        path: '/',
+        component: lazy(() => import('./components/HomeContainer')),
+      },
+      {
+        component: () => <Redirect to="/404" />,
+      },
+    ],
+  },
+];
+
+const renderRoutes = (routes) => (routes ? (
+    <Suspense fallback={<LoadingScreen />}>
+        <Switch>
+            {routes.map((route, i) => {
+              const Layout = route.layout || Fragment;
+              const Component = route.component;
+
+              const key = route.path ? route.path.concat(i) : ''.concat(i);
+              return (
+                  <Route
+                    key={key}
+                    path={route.path}
+                    exact={route.exact}
+                    render={(props) => (
+                        <Layout>
+                            {route.routes
+                              ? renderRoutes(route.routes)
+                              : <Component {...props} />}
+                        </Layout>
+                    )}
+                  />
+              );
+            })}
+        </Switch>
+    </Suspense>
+) : null);
+
+function Routes() {
+  return renderRoutes(routesConfig);
+}
+
+export default Routes;

packages/concordia-app/src/components/App.jsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import LoadingContainer from './LoadingContainer';
-
-// CSS
-import '../assets/css/app.css';
-
-import CoreLayoutContainer from './CoreLayoutContainer';
-import HomeContainer from './HomeContainer';
-import NotFound from './NotFound';
-
-const App = ({ store }) => (
-    <Provider store={store}>
-        <LoadingContainer>
-            <Router>
-                <CoreLayoutContainer>
-                    <Switch>
-                        <Route exact path="/" component={HomeContainer} />
-                        <Route component={NotFound} />
-                    </Switch>
-                </CoreLayoutContainer>
-            </Router>
-        </LoadingContainer>
-    </Provider>
-);
-
-App.propTypes = {
-  store: PropTypes.object.isRequired,
-};
-
-export default App;

packages/concordia-app/src/components/LoadingScreen.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const LoadingScreen = () => (
+    <div>
+        Loading
+    </div>
+);
+
+export default LoadingScreen;

packages/concordia-app/src/index.jsx

@@ -1,25 +1,25 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { render } from 'react-dom';
 import { Drizzle } from '@ezerous/drizzle';
 import { Breeze } from '@ezerous/breeze';
-import App from './components/App';
+import App from './App';
 import store from './redux/store';
-
 import AppContext from './components/AppContext';
-
 import drizzleOptions from './options/drizzleOptions';
+import breezeOptions from './options/breezeOptions';
 import * as serviceWorker from './utils/serviceWorker';
-
 import './assets/css/index.css';
-import breezeOptions from './options/breezeOptions';
+import LoadingScreen from './components/LoadingScreen';
 
 const drizzle = new Drizzle(drizzleOptions, store);
 const breeze = new Breeze(breezeOptions, store);
 
 render(
-    <AppContext.Provider drizzle={drizzle} breeze={breeze}>
+    <Suspense fallback={<LoadingScreen />}>
-        <App store={store} />
+        <AppContext.Provider drizzle={drizzle} breeze={breeze}>
-    </AppContext.Provider>,
+            <App store={store} />
+        </AppContext.Provider>
+    </Suspense>,
     document.getElementById('root'),
 );
 

packages/concordia-app/src/components/CoreLayoutContainer.jsx → packages/concordia-app/src/layout/CoreLayoutContainer.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import MenuComponent from './MenuComponent';
+import MenuComponent from '../components/MenuComponent';
 
 const CoreLayout = (props) => {
   const { children } = props;