Découpage du code et extraction des sourcemaps

This commit is contained in:
wpetit 2020-10-13 11:37:37 +02:00
parent 85008d3265
commit f752865d33
12 changed files with 74 additions and 49 deletions

View File

@ -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>
);
}

View File

@ -0,0 +1,7 @@
import React, { FunctionComponent } from "react";
export const AppLoader:FunctionComponent = () => {
return (
<div className="loader"></div>
)
}

View File

@ -110,6 +110,8 @@ export const ConferencePage:FunctionComponent<ConferencePageProps> = () => {
);
}
export default ConferencePage;
export interface UserCardProps {
nickname: string
email: string

View File

@ -12,4 +12,6 @@ export function DashboardPage() {
</div>
</Page>
);
}
}
export default DashboardPage;

View File

@ -159,4 +159,6 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
</div>
</Page>
);
};
};
export default DecisionSupportFilePage;

View File

@ -18,4 +18,6 @@ export function HomePage() {
<WelcomeContent />
</Page>
);
}
}
export default HomePage;

View File

@ -12,4 +12,6 @@ export const LogoutPage: FunctionComponent<LogoutPageProps> = () => {
window.location.replace(Config.logoutURL);
}, []);
return null;
};
};
export default LogoutPage;

View File

@ -39,4 +39,6 @@ export function ProfilePage() {
</div>
</Page>
);
}
}
export default ProfilePage;

View File

@ -34,4 +34,6 @@ export const UnauthorizedPage:FunctionComponent<UnauthorizedPageProps> = () => {
</div>
</Page>
);
}
}
export default UnauthorizedPage;

View File

@ -150,4 +150,6 @@ export function WorkgroupPage() {
</div>
</Page>
);
}
}
export default WorkgroupPage;

View File

@ -1,7 +1,7 @@
{
"compilerOptions": {
"target": "es5",
"module": "es6",
"module": "es2020",
"lib": ["dom", "es6"],
"moduleResolution": "node",
"jsx": "react",

View File

@ -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')