Merge pull request #67 from laurentC35/improve-sync

Improve synchronization

package.json

@@ -1,17 +1,16 @@
 {
   "name": "pearl",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^11.2.5",
     "@date-io/date-fns": "1.x",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
-    "@material-ui/pickers": "^3.2.10",
-    "axios": "^0.19.2",
+    "@material-ui/pickers": "^3.3.10",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^11.2.5",
     "clsx": "^1.1.1",
     "date-fns": "^2.18.0",
     "dexie": "^2.0.4",
@@ -95,7 +94,6 @@
     ]
   },
   "devDependencies": {
-
     "@types/react": "^16.9.23",
     "@types/react-router-dom": "^5.1.3",
     "copy-and-watch": "^0.1.4",
@@ -107,8 +105,8 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.16.0",
-    "jest-sonar-reporter": "^2.0.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "jest-sonar-reporter": "^2.0.0",
     "prettier": "^1.19.1"
   }
 }

src/App.js

@@ -1,32 +1,42 @@
-import { useAuth } from 'common-tools/auth/initAuth';
-import useServiceWorker from 'common-tools/hooks/useServiceWorker';
+import { useAuth } from 'utils/auth/initAuth';
+import { useServiceWorker } from 'utils/hooks/useServiceWorker';
 import Preloader from 'components/common/loader';
 import Notification from 'components/common/Notification';
+import { ThemeProvider, CssBaseline } from '@material-ui/core';
+import theme from './theme';
 import Palette from 'components/common/palette';
 import Home from 'components/panel-body/home';
-import TrainingPage from 'components/panel-body/training';
 import D from 'i18n';
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, useLocation } from 'react-router-dom';
+import SynchronizeWrapper from 'components/sychronizeWrapper';
+import { NotificationWrapper } from 'components/notificationWrapper';
+import { ResetData } from 'components/panel-body/resetData';
 
 function App() {
+  const { pathname } = useLocation();
   const { authenticated } = useAuth();
   const serviceWorkerInfo = useServiceWorker(authenticated);
 
   return (
-    <>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
       <Notification serviceWorkerInfo={serviceWorkerInfo} />
       <div>
         {!authenticated && <Preloader message={D.pleaseWait} />}
         {authenticated && (
-          <>
-            <Route path="/" render={routeProps => <Home {...routeProps} />} />
-            <Route path="/training" component={TrainingPage} />
-            <Route path="/palette" component={Palette} />
-          </>
+          <SynchronizeWrapper>
+            <NotificationWrapper>
+              {!pathname.startsWith('/support') && (
+                <Route path="/" render={routeProps => <Home {...routeProps} />} />
+              )}
+              <Route path="/support/palette" component={Palette} />
+              <Route path="/support/reset-data" component={ResetData} />
+            </NotificationWrapper>
+          </SynchronizeWrapper>
         )}
       </div>
-    </>
+    </ThemeProvider>
   );
 }
 

src/AppRooter.js

@@ -0,0 +1,17 @@
+import App from 'App';
+import QueenContainer from 'components/panel-body/queen-container';
+import React from 'react';
+import { Route, Switch, useLocation } from 'react-router-dom';
+
+function AppRooter() {
+  const { pathname } = useLocation();
+
+  return (
+    <Switch>
+      <Route path="/queen" component={routeProps => <QueenContainer {...routeProps} />} />
+      {!pathname.startsWith('/queen') && <Route path="/" component={App} />}
+    </Switch>
+  );
+}
+
+export default AppRooter;

src/Root.js

@@ -1,23 +1,36 @@
-import { CssBaseline, ThemeProvider } from '@material-ui/core';
-import App from 'App';
-import { useQueenFromConfig } from 'common-tools/hooks/useQueenFromConfig';
-import QueenContainer from 'components/panel-body/queen-container';
-import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import theme from './theme';
+import { useQueenFromConfig } from 'utils/hooks/useQueenFromConfig';
+import React, { useEffect, useState } from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { useConfiguration } from 'utils/hooks/configuration';
+import { addOnlineStatusObserver } from 'utils';
+import AppRouter from 'AppRooter';
+
+export const AppContext = React.createContext();
 
 function Root() {
-  useQueenFromConfig(`${window.location.origin}/configuration.json`);
+  const { configuration } = useConfiguration();
+  useQueenFromConfig(configuration);
+
+  const [online, setOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    addOnlineStatusObserver(s => {
+      setOnline(s);
+    });
+  }, []);
+
+  const context = { ...configuration, online };
+
   return (
-    <Router>
-      <Switch>
-        <Route path="/queen" component={routeProps => <QueenContainer {...routeProps} />} />
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <Route path="/" component={App} />
-        </ThemeProvider>
-      </Switch>
-    </Router>
+    <>
+      {configuration && (
+        <Router>
+          <AppContext.Provider value={context}>
+            <AppRouter />
+          </AppContext.Provider>
+        </Router>
+      )}
+    </>
   );
 }