Skip to content

Commit

Permalink
All routes/screens are lazy loaded as seperate chunk
Browse files Browse the repository at this point in the history
  • Loading branch information
@dkhurshudian
dkhurshudian committed Oct 31, 2018
1 parent 1d49a6e commit c2c0061
Showing 1 changed file with 46 additions and 41 deletions.
87 changes: 46 additions & 41 deletions ui/src/app/Router.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
import React, { Component } from 'react';
import React, { Component, Suspense, lazy } from 'react';
import { Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import { Spinner } from '@blueprintjs/core';

import { fetchMetadata } from 'src/actions';
import { selectSession, selectMetadata } from 'src/selectors';
import NotFoundScreen from 'src/screens/NotFoundScreen/NotFoundScreen';
import OAuthScreen from "src/screens/OAuthScreen/OAuthScreen";
import LogoutScreen from 'src/screens/LogoutScreen/LogoutScreen';
import ActivateScreen from 'src/screens/ActivateScreen/ActivateScreen';
import HomeScreen from 'src/screens/HomeScreen/HomeScreen';
import SearchScreen from 'src/screens/SearchScreen/SearchScreen';
import NotificationsScreen from 'src/screens/NotificationsScreen/NotificationsScreen';
import SourcesIndexScreen from 'src/screens/SourcesIndexScreen/SourcesIndexScreen';
import CasesIndexScreen from 'src/screens/CasesIndexScreen/CasesIndexScreen';
import './Router.scss';


const NotFoundScreen = lazy(()=> import('src/screens/NotFoundScreen/NotFoundScreen'));
const OAuthScreen = lazy(()=> import("src/screens/OAuthScreen/OAuthScreen"));
const LogoutScreen = lazy(()=> import('src/screens/LogoutScreen/LogoutScreen'));
const ActivateScreen = lazy(() => import('src/screens/ActivateScreen/ActivateScreen'));
const HomeScreen = lazy(()=> import('src/screens/HomeScreen/HomeScreen'));
const SearchScreen = lazy(()=> import('src/screens/SearchScreen/SearchScreen'));
const NotificationsScreen = lazy(()=> import('src/screens/NotificationsScreen/NotificationsScreen'));
const SourcesIndexScreen = lazy(()=> import('src/screens/SourcesIndexScreen/SourcesIndexScreen'));
const CasesIndexScreen = lazy(()=> import('src/screens/CasesIndexScreen/CasesIndexScreen'));
// import CaseScreen from 'src/screens/CaseScreen/CaseScreen';
import CollectionScreen from 'src/screens/CollectionScreen/CollectionScreen';
import CollectionDocumentsScreen from 'src/screens/CollectionDocumentsScreen/CollectionDocumentsScreen';
import CollectionXrefMatchesScreen from 'src/screens/CollectionXrefMatchesScreen/CollectionXrefMatchesScreen';
import EntityScreen from 'src/screens/EntityScreen/EntityScreen';
import DocumentScreen from 'src/screens/DocumentScreen/DocumentScreen';
import DocumentRedirectScreen from 'src/screens/DocumentRedirectScreen/DocumentRedirectScreen';
const CollectionScreen = lazy(()=> import('src/screens/CollectionScreen/CollectionScreen'));
const CollectionDocumentsScreen = lazy(()=> import('src/screens/CollectionDocumentsScreen/CollectionDocumentsScreen'));
const CollectionXrefMatchesScreen = lazy(()=> import('src/screens/CollectionXrefMatchesScreen/CollectionXrefMatchesScreen'));
const EntityScreen = lazy(()=> import('src/screens/EntityScreen/EntityScreen'));
const DocumentScreen = lazy(()=> import('src/screens/DocumentScreen/DocumentScreen'));
const DocumentRedirectScreen = lazy(()=> import('src/screens/DocumentRedirectScreen/DocumentRedirectScreen'));

import './Router.css';


class Router extends Component {
Expand All @@ -38,34 +40,37 @@ class Router extends Component {
const { metadata, session } = this.props;
const isLoaded = metadata && metadata.app && session;

const Loading = (
<div className="RouterLoading">
<div className="spinner"><Spinner className="bp3-large"/></div>
</div>
);
if (!isLoaded) {
return (
<div className="RouterLoading">
<div className="spinner"><Spinner className="bp3-large"/></div>
</div>
)
return Loading;
}

return (
<Switch>
<Route path="/oauth" exact component={OAuthScreen}/>
<Route path="/logout" exact component={LogoutScreen}/>
<Route path="/activate/:code" exact component={ActivateScreen}/>
<Route path="/entities/:entityId" exact component={EntityScreen}/>
<Route path="/documents/:documentId" exact component={DocumentScreen}/>
<Route path="/text/:documentId" exact component={DocumentRedirectScreen}/>
<Route path="/tabular/:documentId/:sheet" exact component={DocumentRedirectScreen}/>
<Route path="/sources" exact component={SourcesIndexScreen}/>
<Route path="/cases" exact component={CasesIndexScreen}/>
{/*<Route path="/cases/:collectionId" exact component={CaseScreen}/>*/}
<Route path="/collections/:collectionId/documents" exact component={CollectionDocumentsScreen}/>
<Route path="/collections/:collectionId" exact component={CollectionScreen}/>
<Route path="/collections/:collectionId/xref/:otherId" exact component={CollectionXrefMatchesScreen}/>
<Route path="/search" exact component={SearchScreen}/>
<Route path="/notifications" exact component={NotificationsScreen}/>
<Route path="/" exact component={HomeScreen}/>
<Route component={NotFoundScreen}/>
</Switch>
<Suspense fallback={Loading}>
<Switch>
<Route path="/oauth" exact component={OAuthScreen}/>
<Route path="/logout" exact component={LogoutScreen}/>
<Route path="/activate/:code" exact component={ActivateScreen}/>
<Route path="/entities/:entityId" exact component={EntityScreen}/>
<Route path="/documents/:documentId" exact component={DocumentScreen}/>
<Route path="/text/:documentId" exact component={DocumentRedirectScreen}/>
<Route path="/tabular/:documentId/:sheet" exact component={DocumentRedirectScreen}/>
<Route path="/sources" exact component={SourcesIndexScreen}/>
<Route path="/cases" exact component={CasesIndexScreen}/>
{/*<Route path="/cases/:collectionId" exact component={CaseScreen}/>*/}
<Route path="/collections/:collectionId/documents" exact component={CollectionDocumentsScreen}/>
<Route path="/collections/:collectionId" exact component={CollectionScreen}/>
<Route path="/collections/:collectionId/xref/:otherId" exact component={CollectionXrefMatchesScreen}/>
<Route path="/search" exact component={SearchScreen}/>
<Route path="/notifications" exact component={NotificationsScreen}/>
<Route path="/" exact component={HomeScreen}/>
<Route component={NotFoundScreen}/>
</Switch>
</Suspense>
);
}
}
Expand Down

0 comments on commit c2c0061

Please sign in to comment.