From f752865d3317329a6b279b6de93ef34a7f03d32e Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Tue, 13 Oct 2020 11:37:37 +0200
Subject: [PATCH] =?UTF-8?q?D=C3=A9coupage=20du=20code=20et=20extraction=20?=
 =?UTF-8?q?des=20sourcemaps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/App.tsx                 | 82 ++++++++++---------
 client/src/components/AppLoader.tsx           |  7 ++
 .../ConferencePage/ConferencePage.tsx         |  2 +
 .../DashboardPage/DashboardPage.tsx           |  4 +-
 .../DecisionSupportFilePage.tsx               |  4 +-
 client/src/components/HomePage/HomePage.tsx   |  4 +-
 client/src/components/LogoutPage.tsx          |  4 +-
 .../components/ProfilePage/ProfilePage.tsx    |  4 +-
 .../UnauthorizedPage/UnauthorizedPage.tsx     |  4 +-
 .../WorkgroupPage/WorkgroupPage.tsx           |  4 +-
 client/tsconfig.json                          |  2 +-
 client/webpack.config.js                      |  2 +-
 12 files changed, 74 insertions(+), 49 deletions(-)
 create mode 100644 client/src/components/AppLoader.tsx

diff --git a/client/src/components/App.tsx b/client/src/components/App.tsx
index 147d692..09495f3 100644
--- a/client/src/components/App.tsx
+++ b/client/src/components/App.tsx
@@ -1,10 +1,5 @@
-import React, { FunctionComponent, useState, useEffect } from 'react';
+import React, { FunctionComponent, useState, useEffect, Suspense } from 'react';
 import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
-import { HomePage } from './HomePage/HomePage';
-import { ProfilePage } from './ProfilePage/ProfilePage';
-import { WorkgroupPage } from './WorkgroupPage/WorkgroupPage';
-import { DecisionSupportFilePage } from './DecisionSupportFilePage/DecisionSupportFilePage';
-import { DashboardPage } from './DashboardPage/DashboardPage';
 import { useUserProfile } from '../gql/queries/profile';
 import { LoggedInContext, getSavedLoggedIn, saveLoggedIn } from '../hooks/useLoggedIn';
 import { PrivateRoute } from './PrivateRoute';
@@ -12,16 +7,21 @@ import { useKonamiCode } from '../hooks/useKonamiCode';
 import { Modal } from './Modal';
 import { createClient } from '../util/apollo';
 import { ApolloProvider } from '@apollo/client';
-import { LogoutPage } from './LogoutPage';
-import { UnauthorizedPage } from './UnauthorizedPage/UnauthorizedPage';
-import { ConferencePage } from './ConferencePage/ConferencePage';
+import { AppLoader } from './AppLoader';
+
+const LazyHomePage = React.lazy(() => import('./HomePage/HomePage'));
+const LazyDashboardPage = React.lazy(() => import('./DashboardPage/DashboardPage'));
+const LazyUnauthorizedPage = React.lazy(() => import('./UnauthorizedPage/UnauthorizedPage'));
+const LazyConferencePage = React.lazy(() => import('./ConferencePage/ConferencePage'));
+const LazyDecisionSupportFilePage = React.lazy(() => import('./DecisionSupportFilePage/DecisionSupportFilePage'));
+const LazyProfilePage = React.lazy(() => import('./ProfilePage/ProfilePage'));
+const LazyWorkgroupPage = React.lazy(() => import('./WorkgroupPage/WorkgroupPage'));
+const LazyLogoutPage = React.lazy(() => import('./LogoutPage'));
 
 export interface AppProps {
 
 }
 
-
-
 export const App: FunctionComponent<AppProps> = () => {
   const [ loggedIn, setLoggedIn ] = useState(getSavedLoggedIn());
 
@@ -37,35 +37,37 @@ export const App: FunctionComponent<AppProps> = () => {
   useKonamiCode(() => setShowBoneyM(true));
 
   return (
-    <ApolloProvider client={client}>
-      <LoggedInContext.Provider value={loggedIn}>
-        <UserSessionCheck setLoggedIn={setLoggedIn} />
-        <BrowserRouter>
-          <Switch>
-            <Route path="/" exact component={HomePage} />
-            <Route path="/unauthorized" exact component={UnauthorizedPage} />
-            <PrivateRoute path="/profile" exact component={ProfilePage} />
-            <PrivateRoute path="/conference" exact component={ConferencePage} />
-            <PrivateRoute path="/workgroups/:id" exact component={WorkgroupPage} />
-            <PrivateRoute path="/decisions/:id" component={DecisionSupportFilePage} />
-            <PrivateRoute path="/dashboard" exact component={DashboardPage} />
-            <PrivateRoute path="/logout" exact component={LogoutPage} />
-            <Route component={() => <Redirect to="/" />} />
-          </Switch>
-        </BrowserRouter>
-        {
-          showBoneyM ?
-          <Modal active={true} showCloseButton={true} onClose={() => setShowBoneyM(false)}>
-            <iframe width={560} height={315}
-              frameBorder={0}
-              allowFullScreen={true}
-              src="https://www.youtube.com/embed/uVzT5QEEQ2c?autoplay=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
-            </iframe>
-          </Modal> :
-          null
-        }
-      </LoggedInContext.Provider>
-    </ApolloProvider>
+    <Suspense fallback={<AppLoader />}>
+      <ApolloProvider client={client}>
+        <LoggedInContext.Provider value={loggedIn}>
+          <UserSessionCheck setLoggedIn={setLoggedIn} />
+          <BrowserRouter>
+            <Switch>
+              <Route path="/" exact component={LazyHomePage} />
+              <Route path="/unauthorized" exact component={LazyUnauthorizedPage} />
+              <PrivateRoute path="/profile" exact component={LazyProfilePage} />
+              <PrivateRoute path="/conference" exact component={LazyConferencePage} />
+              <PrivateRoute path="/workgroups/:id" exact component={LazyWorkgroupPage} />
+              <PrivateRoute path="/decisions/:id" component={LazyDecisionSupportFilePage} />
+              <PrivateRoute path="/dashboard" exact component={LazyDashboardPage} />
+              <PrivateRoute path="/logout" exact component={LazyLogoutPage} />
+              <Route component={() => <Redirect to="/" />} />
+            </Switch>
+          </BrowserRouter>
+          {
+            showBoneyM ?
+            <Modal active={true} showCloseButton={true} onClose={() => setShowBoneyM(false)}>
+              <iframe width={560} height={315}
+                frameBorder={0}
+                allowFullScreen={true}
+                src="https://www.youtube.com/embed/uVzT5QEEQ2c?autoplay=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
+              </iframe>
+            </Modal> :
+            null
+          }
+        </LoggedInContext.Provider>
+      </ApolloProvider>
+    </Suspense>
   );
 }
 
diff --git a/client/src/components/AppLoader.tsx b/client/src/components/AppLoader.tsx
new file mode 100644
index 0000000..aabcc47
--- /dev/null
+++ b/client/src/components/AppLoader.tsx
@@ -0,0 +1,7 @@
+import React, { FunctionComponent } from "react";
+
+export const AppLoader:FunctionComponent = () => {
+  return (
+    <div className="loader"></div>
+  )
+}
\ No newline at end of file
diff --git a/client/src/components/ConferencePage/ConferencePage.tsx b/client/src/components/ConferencePage/ConferencePage.tsx
index 38fcc9a..c628b1a 100644
--- a/client/src/components/ConferencePage/ConferencePage.tsx
+++ b/client/src/components/ConferencePage/ConferencePage.tsx
@@ -110,6 +110,8 @@ export const ConferencePage:FunctionComponent<ConferencePageProps> = () => {
   );
 }
 
+export default ConferencePage;
+
 export interface UserCardProps {
   nickname: string
   email: string
diff --git a/client/src/components/DashboardPage/DashboardPage.tsx b/client/src/components/DashboardPage/DashboardPage.tsx
index 55726c6..6fad864 100644
--- a/client/src/components/DashboardPage/DashboardPage.tsx
+++ b/client/src/components/DashboardPage/DashboardPage.tsx
@@ -12,4 +12,6 @@ export function DashboardPage() {
       </div>
     </Page>
   );
-}
\ No newline at end of file
+}
+
+export default DashboardPage;
\ No newline at end of file
diff --git a/client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx b/client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx
index a4c6962..1328285 100644
--- a/client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx
+++ b/client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx
@@ -159,4 +159,6 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
       </div>
     </Page>
   );
-};
\ No newline at end of file
+};
+
+export default DecisionSupportFilePage;
\ No newline at end of file
diff --git a/client/src/components/HomePage/HomePage.tsx b/client/src/components/HomePage/HomePage.tsx
index a3af9ff..d099b10 100644
--- a/client/src/components/HomePage/HomePage.tsx
+++ b/client/src/components/HomePage/HomePage.tsx
@@ -18,4 +18,6 @@ export function HomePage() {
       <WelcomeContent />
     </Page>
   );
-}
\ No newline at end of file
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/client/src/components/LogoutPage.tsx b/client/src/components/LogoutPage.tsx
index 56cd70a..c563f3d 100644
--- a/client/src/components/LogoutPage.tsx
+++ b/client/src/components/LogoutPage.tsx
@@ -12,4 +12,6 @@ export const LogoutPage: FunctionComponent<LogoutPageProps> = () => {
     window.location.replace(Config.logoutURL);
   }, []);
   return null;
-};
\ No newline at end of file
+};
+
+export default LogoutPage;
\ No newline at end of file
diff --git a/client/src/components/ProfilePage/ProfilePage.tsx b/client/src/components/ProfilePage/ProfilePage.tsx
index 2d442eb..2475ee2 100644
--- a/client/src/components/ProfilePage/ProfilePage.tsx
+++ b/client/src/components/ProfilePage/ProfilePage.tsx
@@ -39,4 +39,6 @@ export function ProfilePage() {
       </div>
     </Page>
   );
-}
\ No newline at end of file
+}
+
+export default ProfilePage;
\ No newline at end of file
diff --git a/client/src/components/UnauthorizedPage/UnauthorizedPage.tsx b/client/src/components/UnauthorizedPage/UnauthorizedPage.tsx
index 4ad4db2..06aa4e8 100644
--- a/client/src/components/UnauthorizedPage/UnauthorizedPage.tsx
+++ b/client/src/components/UnauthorizedPage/UnauthorizedPage.tsx
@@ -34,4 +34,6 @@ export const UnauthorizedPage:FunctionComponent<UnauthorizedPageProps> = () => {
       </div>
     </Page>
   );
-}
\ No newline at end of file
+}
+
+export default UnauthorizedPage;
\ No newline at end of file
diff --git a/client/src/components/WorkgroupPage/WorkgroupPage.tsx b/client/src/components/WorkgroupPage/WorkgroupPage.tsx
index 530f452..0be8dfd 100644
--- a/client/src/components/WorkgroupPage/WorkgroupPage.tsx
+++ b/client/src/components/WorkgroupPage/WorkgroupPage.tsx
@@ -150,4 +150,6 @@ export function WorkgroupPage() {
       </div>
     </Page>
   );
-}
\ No newline at end of file
+}
+
+export default WorkgroupPage;
\ No newline at end of file
diff --git a/client/tsconfig.json b/client/tsconfig.json
index f554cea..f4be687 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "es6",
+    "module": "es2020",
     "lib": ["dom", "es6"],
     "moduleResolution": "node",
     "jsx": "react",
diff --git a/client/webpack.config.js b/client/webpack.config.js
index be40da5..c16524c 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -11,7 +11,7 @@ const env = process.env;
 module.exports = {
   mode: `${env.NODE_ENV ? env.NODE_ENV : 'production'}`,
   entry: './src/index.tsx',
-  devtool: 'inline-source-map',
+  devtool: env.NODE_ENV ===  'production' ? 'source-map' : 'eval-source-map',
   output: {
     filename: '[name].[contenthash].js',
     path: path.join(__dirname, 'dist')