Make the legacy and new theme work together

InseeFrLab · Jan 28, 2021 · f8ae290 · f8ae290
1 parent 3456e5a
commit f8ae290
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 55 deletions.
diff --git a/src/js/components/LegacyThemeProvider.tsx b/src/js/components/LegacyThemeProvider.tsx
@@ -0,0 +1,25 @@
+
+import type React from "react";
+
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import createTheme from './material-ui-theme';
+
+const theme = createTheme();
+
+
+export type Props = {
+    children: React.ReactNode;
+};
+
+
+export function LegacyThemeProvider(props: Props) {
+
+    const { children } = props;
+
+    return (
+        <MuiThemeProvider theme={theme}>
+            {children}
+        </MuiThemeProvider>
+    );
+
+}
diff --git a/src/js/components/app.js b/src/js/components/app.js
@@ -1,14 +1,12 @@
 import React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import { MuiThemeProvider } from '@material-ui/core/styles';
 import {
 	BrowserRouter as Router,
 	Switch,
 	Route as NativeRoute,
 	Redirect,
 	useLocation
 } from 'react-router-dom';
-import createTheme from './material-ui-theme';
 import { createPrivateRouteComponent } from './authentication';
 import { createRouteComponent, createRouterContext } from './router-context';
 import { invalidIdep } from 'js/utils/idep';
@@ -41,7 +39,8 @@ import { themeProviderFactory } from "app/theme/ThemeProvider";
 import { MySecrets } from "app/pages/MySecrets/MySecrets";
 import { Alert } from "app/components/designSystem/Alert";
 import ReactMarkdown from 'react-markdown'
-import { css } from "app/theme/useClassNames";
+import { css } from "app/theme/useClassNames";
+import { LegacyThemeProvider } from "./LegacyThemeProvider";
 
 
 const { ThemeProvider } = themeProviderFactory(
@@ -53,7 +52,6 @@ const env = getEnv();
 
 const initialPathname = "/accueil";
 
-const theme = createTheme();
 const routerContext = createRouterContext(Home)(initialPathname);
 const Route = createRouteComponent(routerContext)(NativeRoute);
 const PrivateRoute = createPrivateRouteComponent(routerContext);
@@ -79,7 +77,7 @@ export const App = ({
 		);
 
 const App404 = () => (
-	<MuiThemeProvider theme={theme}>
+	<LegacyThemeProvider>
 		<CssBaseline />
 		<Router>
 			<div className="application">
@@ -88,7 +86,7 @@ const App404 = () => (
 				<Footer />
 			</div>
 		</Router>
-	</MuiThemeProvider>
+	</LegacyThemeProvider>
 );
 
 function AlertWrapper(props) {
@@ -112,21 +110,26 @@ function AlertWrapper(props) {
 	);
 }
 
+
+//<MuiThemeProvider theme={theme}></MuiThemeProvider>
+
 const AppFeelGood = ({ waiting, applicationResize, idep }) => {
 
 	const appConstants = useAppConstants();
 
 	const { isUserLoggedIn } = appConstants;
 
 	return (
-		<MuiThemeProvider theme={theme}>
+		<ThemeProvider isDarkModeEnabled={false}>
 			{waiting ? <Preloader /> : null}
 			<CssBaseline />
 			<Favicon />
 			<Router>
 				<>
 					<div className="application">
-						<Navbar />
+						<LegacyThemeProvider>
+							<Navbar />
+						</LegacyThemeProvider>
 						<RegionBanner />
 						{invalidIdep(idep) && (
 							<AlertWrapper severity="error">
@@ -168,18 +171,24 @@ const AppFeelGood = ({ waiting, applicationResize, idep }) => {
 									component={MyService}
 								/>
 
+
+
 								<PrivateRoute path="/mon-compte" component={MonCompte} />
+
+
 								<PrivateRoute
 									exact
 									path="/mes-fichiers"
 									component={MyBuckets}
 								/>
 
+
 								<PrivateRoute
 									path="/mes-fichiers/:bucketName"
 									exact
 									component={NavigationFile}
 								/>
+
 								<PrivateRoute
 									path="/mes-fichiers/:bucketName/*"
 									component={NavigationFile}
@@ -188,9 +197,7 @@ const AppFeelGood = ({ waiting, applicationResize, idep }) => {
 									exact
 									path="/mes-secrets"
 									component={() => (
-										<ThemeProvider isDarkModeEnabled={false}>
-											<MySecrets className="mySecrets" />
-										</ThemeProvider>
+										<MySecrets className="mySecrets" />
 									)}
 								/>
 
@@ -204,14 +211,16 @@ const AppFeelGood = ({ waiting, applicationResize, idep }) => {
 						</main>
 						<FooterCond />
 						<Notifications />
-						{isUserLoggedIn && <QuickAccess />}
+						<LegacyThemeProvider>
+							{isUserLoggedIn && <QuickAccess />}
+						</LegacyThemeProvider>
 					</div>
 					{isUserLoggedIn && <CloudShell />}
 					<VisiteGuidee />
 					<ToastContainer position="bottom-left" />
 				</>
 			</Router>
-		</MuiThemeProvider>
+		</ThemeProvider>
 	);
 
 };

diff --git a/src/js/components/commons/variable-location/createAiguilleur.tsx b/src/js/components/commons/variable-location/createAiguilleur.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { LegacyThemeProvider } from "js/components/LegacyThemeProvider";
 
 type PropsBase = { location: string; };
 
@@ -10,7 +11,7 @@ export function createAiguilleur<
 	{
 		Leaf,
 		Node,
-		Root = ()=> null,
+		Root = () => null,
 		isLeaf = () => Promise.resolve(false),
 		isRoot = () => Promise.resolve(false),
 	}: {
@@ -20,7 +21,7 @@ export function createAiguilleur<
 		isLeaf?: (location: Location) => Promise<boolean>;
 		isRoot?: (location: Location) => Promise<boolean>;
 	}
-): React.FC<Omit<LeafProps & NodeProps & RootProps, "location"> & { location: Location; } > {
+): React.FC<Omit<LeafProps & NodeProps & RootProps, "location"> & { location: Location; }> {
 
 	return (props) => {
 
@@ -57,11 +58,15 @@ export function createAiguilleur<
 		} as any;
 
 		return !init ? null : (
-			isRoot_ ?
-				<Root {...p} /> :
-				isLeaf_ ?
-					<Leaf {...p}/> :
-					<Node {...p}/>
+			<LegacyThemeProvider >
+				{
+					isRoot_ ?
+						<Root {...p} /> :
+						isLeaf_ ?
+							<Leaf {...p} /> :
+							<Node {...p} />
+				}
+			</LegacyThemeProvider>
 		);
 	};
 

diff --git a/src/js/components/mes-fichiers/MyBuckets.tsx b/src/js/components/mes-fichiers/MyBuckets.tsx
@@ -6,7 +6,7 @@ import './myBuckets.scss';
 import { Region } from 'js/model/Region';
 import { useSelector, useDispatch, useAppConstants } from "app/lib/hooks";
 import { actions as myFilesActions } from "js/redux/myFiles";
-
+import { LegacyThemeProvider } from "js/components/LegacyThemeProvider";
 
 export const MyBuckets = () => {
 	const dispatch = useDispatch();
@@ -29,7 +29,7 @@ export const MyBuckets = () => {
 	}, [idep, dispatch, buckets]);
 
 	return (
-		<>
+		<LegacyThemeProvider>
 			<div className="en-tete">
 				<Typography
 					variant="h2"
@@ -66,7 +66,7 @@ export const MyBuckets = () => {
 					</div>
 				</Paper>
 			</div>
-		</>
+		</LegacyThemeProvider>
 	);
 };
 

diff --git a/src/js/components/mes-fichiers/navigation/NavigationFile.tsx b/src/js/components/mes-fichiers/navigation/NavigationFile.tsx
@@ -3,10 +3,10 @@ import { MyFiles } from "./my-files/my-files.container";
 import { MyFile } from "./my-file/my-file.container";
 import * as minioTools from "js/minio-client/minio-tools";
 import { actions } from "js/redux/legacyActions";
-import { useDispatch, useSelector, useAppConstants } from "app/lib/hooks";
+import { useDispatch, useSelector, useAppConstants } from "app/lib/hooks";
 import { useLocation } from "react-router-dom";
 import { relative as pathRelative } from "path";
-
+import { LegacyThemeProvider } from "js/components/LegacyThemeProvider";
 
 export const NavigationFile: React.FC<{
 	match: { params: { bucketName: string; } };
@@ -17,7 +17,7 @@ export const NavigationFile: React.FC<{
 
 	//NOTE: Exactly the same as window.location.pathname but we can be sure that there is a
 	// re-render when it's changed.
-	const { pathname: window_location_pathname }= useLocation();
+	const { pathname: window_location_pathname } = useLocation();
 
 	const { userProfile: { idep } } = useAppConstants({ "assertIsUserLoggedInIs": true });
 
@@ -50,7 +50,7 @@ export const NavigationFile: React.FC<{
 
 		setPathname(where);
 
-	},[pathname, dispatch, bucketName, racine, window_location_pathname ] );
+	}, [pathname, dispatch, bucketName, racine, window_location_pathname]);
 
 	const refresh = useCallback(() => {
 
@@ -140,22 +140,27 @@ export const NavigationFile: React.FC<{
 	const here = pathRelative(racine, pathname);
 	const file = currentObjects.find(({ name }) => name === here);
 
-	return file ? (
-		<MyFile
-			fileName={decodeURI(here)}
-			bucketName={bucketName}
-			file={file}
-			path={decodeURI(pathname.replace(racine, ''))}
-		/>
-	) : (
-			<MyFiles
-				files={currentObjects}
-				directories={currentDirectories}
-				bucketName={bucketName}
-				refresh={refresh}
-				path={pathname.replace(racine, '')}
-			/>
-		);
-
+	return (
+		<LegacyThemeProvider>
+			{
+				file ? (
+					<MyFile
+						fileName={decodeURI(here)}
+						bucketName={bucketName}
+						file={file}
+						path={decodeURI(pathname.replace(racine, ''))}
+					/>
+				) : (
+						<MyFiles
+							files={currentObjects}
+							directories={currentDirectories}
+							bucketName={bucketName}
+							refresh={refresh}
+							path={pathname.replace(racine, '')}
+						/>
+					)
+			}
+		</LegacyThemeProvider>
+	);
 
 };
diff --git a/src/js/components/mon-compte/mon-compte.component.tsx b/src/js/components/mon-compte/mon-compte.component.tsx
@@ -17,6 +17,7 @@ import S3Field from './s3';
 import { thunks } from "lib/setup";
 import { useDispatch, useSelector, useIsBetaModeEnabled, useAppConstants } from "app/lib/hooks";
 import type { Props as CopyableFieldProps } from "../commons/copyable-field";
+import { LegacyThemeProvider } from "js/components/LegacyThemeProvider";
 
 export const MonCompte = () => {
 
@@ -46,7 +47,7 @@ export const MonCompte = () => {
 	const credentials = s3;
 
 	return (
-		<>
+		<LegacyThemeProvider>
 			<div className="en-tete">
 				<Typography
 					variant="h2"
@@ -194,7 +195,7 @@ export const MonCompte = () => {
 					/>
 				</Paper>
 			</div>
-		</>
+		</LegacyThemeProvider>
 	);
 };
 

diff --git a/src/js/components/my-service/home.tsx b/src/js/components/my-service/home.tsx
@@ -4,16 +4,17 @@ import Header from './header';
 import Service from './service';
 import 'js/components/app.scss';
 import { withRouter, useParams } from 'react-router-dom';
+import { LegacyThemeProvider } from "js/components/LegacyThemeProvider";
 
 const MyServiceHome = () => {
 	//TODO: Makes sure there is actually a serviceId here
 	const { serviceId } = useParams<{ serviceId: string; }>();
 	return (
-		<>
+		<LegacyThemeProvider>
 			<Header/>
 			<FilDAriane fil={fil.myService(serviceId)} />
 			<Service serviceId={`/${serviceId}`} />
-		</>
+		</LegacyThemeProvider>
 	);
 };
 

diff --git a/src/js/components/my-services/home.tsx b/src/js/components/my-services/home.tsx
@@ -4,16 +4,17 @@ import Header from 'js/components/my-services/header';
 import Services from './services';
 import 'js/components/app.scss';
 import { withRouter, useParams } from 'react-router-dom';
+import { LegacyThemeProvider } from "js/components/LegacyThemeProvider";
 
 const MyServicesHome = () => {
 	//TODO: Make sure groupId exists in URL params.
 	const { groupId } = useParams<{ groupId: string; }>();
 	return (
-		<>
+		<LegacyThemeProvider>
 			<Header />
 			<FilDAriane fil={fil.myServices(groupId)} />
 			<Services groupId={groupId} />
-		</>
+		</LegacyThemeProvider>
 	);
 };
 

diff --git a/src/js/components/services/details/details-service-async.js b/src/js/components/services/details/details-service-async.js
@@ -1,11 +1,14 @@
 import React, { Suspense, lazy } from 'react';
 import Loader from 'js/components/commons/loader';
+import { LegacyThemeProvider } from "js/components/LegacyThemeProvider";
 const OngletContent = lazy(() => import('./details-service'));
 
 const AsyncDetailsService = (props) => (
-	<Suspense fallback={<Loader em={18} />}>
-		<OngletContent {...props} />
-	</Suspense>
+	<LegacyThemeProvider>
+		<Suspense fallback={<Loader em={18} />}>
+			<OngletContent {...props} />
+		</Suspense>
+	</LegacyThemeProvider>
 );
 
 export default AsyncDetailsService;