Add lazy routes + refactoring

ui/src/Pages/LoginPage/InitialSetupPage.js

@@ -3,7 +3,8 @@ import gql from 'graphql-tag'
 import { Mutation, Query } from 'react-apollo'
 import { Redirect } from 'react-router-dom'
 import { Button, Form, Message, Container, Header } from 'semantic-ui-react'
-import { login, checkInitialSetupQuery } from './LoginPage'
+
+import { checkInitialSetupQuery, login } from './loginUtilFunctions'
 
 const initialSetupMutation = gql`
   mutation InitialSetup(

ui/src/Pages/LoginPage/LoginPage.js

@@ -3,6 +3,7 @@ import gql from 'graphql-tag'
 import { Mutation, Query } from 'react-apollo'
 import { Redirect } from 'react-router-dom'
 import { Button, Form, Message, Container, Header } from 'semantic-ui-react'
+import { checkInitialSetupQuery, login } from './loginUtilFunctions'
 
 const authorizeMutation = gql`
   mutation Authorize($username: String!, $password: String!) {
@@ -14,27 +15,6 @@ const authorizeMutation = gql`
   }
 `
 
-export const checkInitialSetupQuery = gql`
-  query CheckInitialSetup {
-    siteInfo {
-      initialSetup
-    }
-  }
-`
-
-function setCookie(cname, cvalue, exdays) {
-  var d = new Date()
-  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)
-  var expires = 'expires=' + d.toUTCString()
-  document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/'
-}
-
-export function login(token) {
-  localStorage.setItem('token', token)
-  setCookie('token', token, 360)
-  window.location = '/'
-}
-
 class LoginPage extends Component {
   constructor(props) {
     super(props)

ui/src/Pages/LoginPage/loginUtilFunctions.js

@@ -0,0 +1,22 @@
+import gql from 'graphql-tag'
+
+export const checkInitialSetupQuery = gql`
+  query CheckInitialSetup {
+    siteInfo {
+      initialSetup
+    }
+  }
+`
+
+export function setCookie(cname, cvalue, exdays) {
+  var d = new Date()
+  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)
+  var expires = 'expires=' + d.toUTCString()
+  document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/'
+}
+
+export function login(token) {
+  localStorage.setItem('token', token)
+  setCookie('token', token, 360)
+  window.location = '/'
+}

ui/src/Routes.js

@@ -1,25 +1,32 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Route, Switch, Redirect } from 'react-router-dom'
 
-import LoginPage from './Pages/LoginPage'
+import { Loader } from 'semantic-ui-react'
-import AlbumsPage from './Pages/AllAlbumsPage/AlbumsPage'
-import AlbumPage from './Pages/AlbumPage/AlbumPage'
-import AuthorizedRoute from './AuthorizedRoute'
-import PhotosPage from './Pages/PhotosPage/PhotosPage'
-import InitialSetupPage from './Pages/InitialSetupPage'
 
-class Routes extends Component {
+const AlbumsPage = React.lazy(() => import('./Pages/AllAlbumsPage/AlbumsPage'))
+const AlbumPage = React.lazy(() => import('./Pages/AlbumPage/AlbumPage'))
+const AuthorizedRoute = React.lazy(() => import('./AuthorizedRoute'))
+const PhotosPage = React.lazy(() => import('./Pages/PhotosPage/PhotosPage'))
+
+const LoginPage = React.lazy(() => import('./Pages/LoginPage/LoginPage'))
+const InitialSetupPage = React.lazy(() =>
+  import('./Pages/LoginPage/InitialSetupPage')
+)
+
+class Routes extends React.Component {
   render() {
     return (
-      <Switch>
+      <React.Suspense fallback={<Loader active>Loading page</Loader>}>
-        <Route path="/login" component={LoginPage} />
+        <Switch>
-        <Route path="/initialSetup" component={InitialSetupPage} />
+          <Route path="/login" component={LoginPage} />
-        <AuthorizedRoute exact path="/albums" component={AlbumsPage} />
+          <Route path="/initialSetup" component={InitialSetupPage} />
-        <AuthorizedRoute path="/album/:id" component={AlbumPage} />
+          <AuthorizedRoute exact path="/albums" component={AlbumsPage} />
-        <AuthorizedRoute path="/photos" component={PhotosPage} />
+          <AuthorizedRoute path="/album/:id" component={AlbumPage} />
-        <Route path="/" exact render={() => <Redirect to="photos" />} />
+          <AuthorizedRoute path="/photos" component={PhotosPage} />
-        <Route render={() => <div>Page not found</div>} />
+          <Route path="/" exact render={() => <Redirect to="photos" />} />
-      </Switch>
+          <Route render={() => <div>Page not found</div>} />
+        </Switch>
+      </React.Suspense>
     )
   }
 }