fix: data sync at the end of an activity + refactor useless functions

InseeFrLab · Jul 9, 2024 · 34defab · 34defab
1 parent c73fe04
commit 34defab
Show file tree

Hide file tree

Showing 14 changed files with 150 additions and 139 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,7 +6,7 @@ import { EdtUserRightsEnum } from "enumerations/EdtUserRightsEnum";
 import { ErrorCodeEnum } from "enumerations/ErrorCodeEnum";
 import "i18n/i18n";
 import { User, useAuth } from "oidc-react";
-import ErrorPage from "pages/error/Error";
+import ErrorPage from "pages/error/ErrorPage";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { EdtRoutes } from "routes/EdtRoutes";
@@ -106,6 +106,7 @@ const App = () => {
             Promise.all(promisesToWait);
         } else if (!navigator.onLine) {
             getAuthCache().then(auth => {
+                console.log(auth);
                 if (auth?.data.userData?.access_token) {
                     const user: User = {
                         access_token: auth.data.userData?.access_token,
@@ -152,7 +153,13 @@ const App = () => {
         );
     };
 
-    return <>{initialized && !error ? <EdtRoutes /> : errorOrLoadingPage()}</>;
+    const loadingPage = () => {
+        return <LoadingFull message={t("page.home.loading.message")} />;
+    };
+
+    // return <>{initialized && !error ? <EdtRoutes /> : errorOrLoadingPage()}</>;
+
+    return <>{initialized ? <EdtRoutes /> : loadingPage()}</>;
 };
 
 export default App;
diff --git a/src/components/commons/LoadingFull/LoadingFull.tsx b/src/components/commons/LoadingFull/LoadingFull.tsx
@@ -1,9 +1,13 @@
-import { CircularProgress } from "@mui/material";
+import { Button, CircularProgress } from "@mui/material";
 import ReminderNoteImg from "assets/illustration/reminder-note.svg";
 import FlexCenter from "components/commons/FlexCenter/FlexCenter";
 import PageIcon from "components/commons/PageIcon/PageIcon";
 import { useTranslation } from "react-i18next";
 import { makeStyles } from "tss-react/mui";
+import { ReactComponent as PowerSettingsIcon } from "assets/illustration/mui-icon/power-settings.svg";
+import { useCallback } from "react";
+import { lunaticDatabase } from "service/lunatic-database";
+import { logout } from "service/api-service";
 
 interface LoadingFullProps {
     message: string;
@@ -15,6 +19,11 @@ const LoadingFull = (props: LoadingFullProps) => {
     const { t } = useTranslation();
     const { classes } = useStyles({});
 
+    const disconnect = useCallback(() => {
+        window.localStorage.clear();
+        lunaticDatabase.clear().then(() => logout());
+    }, []);
+
     return (
         <>
             <FlexCenter>
@@ -31,6 +40,21 @@ const LoadingFull = (props: LoadingFullProps) => {
                 <h2 className={classes.centerMobile}>{message}</h2>
             </FlexCenter>
             <FlexCenter>{thanking ? <h3>{thanking}</h3> : <></>}</FlexCenter>
+
+            <FlexCenter>
+                <Button
+                    color="secondary"
+                    startIcon={
+                        <PowerSettingsIcon
+                            aria-label={t("accessibility.asset.mui-icon.power-settings")}
+                        />
+                    }
+                    onClick={disconnect}
+                    id={"button-logout"}
+                >
+                    {t("page.home.navigation.logout")}
+                </Button>
+            </FlexCenter>
         </>
     );
 };

diff --git a/src/index.tsx b/src/index.tsx
@@ -8,8 +8,6 @@ import App from "./App";
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
-import { ErrorBoundary } from "react-error-boundary";
-import ErrorProvider from "pages/error/ErrorProvider";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
@@ -66,9 +64,7 @@ root.render(
             <StyledEngineProvider injectFirst>
                 <ThemeProvider theme={theme}>
                     <CssBaseline enableColorScheme />
-                    <ErrorBoundary FallbackComponent={ErrorProvider}>
-                        <App />
-                    </ErrorBoundary>
+                    <App />
                 </ThemeProvider>
             </StyledEngineProvider>
         </React.StrictMode>

diff --git a/src/pages/activity/activity-or-route-planner/ActivityOrRoutePlanner.tsx b/src/pages/activity/activity-or-route-planner/ActivityOrRoutePlanner.tsx
@@ -28,7 +28,7 @@ import { SourcesEnum } from "enumerations/SourcesEnum";
 import { ActivityRouteOrGap } from "interface/entity/ActivityRouteOrGap";
 import { LunaticData, LunaticModel, OrchestratorContext } from "interface/lunatic/Lunatic";
 import { callbackHolder } from "orchestrator/Orchestrator";
-import ErrorPage from "pages/error/Error";
+import ErrorPage from "pages/error/ErrorPage";
 import React, { useCallback, useEffect, useState } from "react";
 import { isAndroid, isIOS, isMobile } from "react-device-detect";
 import { TFunction, useTranslation } from "react-i18next";

diff --git a/src/pages/activity/activity-or-route-planner/with-screen/WithScreen.tsx b/src/pages/activity/activity-or-route-planner/with-screen/WithScreen.tsx
@@ -21,8 +21,8 @@ import {
     onClose,
     onNext,
     onPrevious,
-    saveAndLoopNavigateLocally,
-    saveAndNavLocally,
+    saveAndLoopNavigate,
+    saveAndNav,
     setEnviro,
     validateLocally,
 } from "service/navigation-service";
@@ -54,7 +54,7 @@ const WithScreenPage = () => {
         backClickEvent: backClickEvent,
         nextClickEvent: nextClickEvent,
         backClickCallback: () => {
-            saveAndLoopNavigateLocally(
+            saveAndLoopNavigate(
                 idSurvey,
                 context.source,
                 EdtRoutesNameEnum.WITH_SOMEONE_SELECTION,
@@ -65,7 +65,7 @@ const WithScreenPage = () => {
             );
         },
         nextClickCallback: () => {
-            saveAndNavLocally(
+            saveAndNav(
                 idSurvey,
                 isCloture
                     ? summaryRoutePath
@@ -79,7 +79,7 @@ const WithScreenPage = () => {
         },
         onSelectValue: () => {
             validateLocally(idSurvey).then(() => {
-                saveAndNavLocally(
+                saveAndNav(
                     idSurvey,
                     isCloture
                         ? summaryRoutePath

diff --git a/src/pages/error/Error.tsx → src/pages/error/ErrorPage.tsx b/src/pages/error/Error.tsx → src/pages/error/ErrorPage.tsx
@@ -26,11 +26,10 @@ import { getData, getSurveyRights, surveysIds } from "service/survey-service";
 export type ErrorPageProps = {
     errorCode?: ErrorCodeEnum;
     atInit?: boolean;
-    atBoundary?: boolean;
 };
 
 const ErrorPage = (props: ErrorPageProps) => {
-    const { errorCode, atInit = false, atBoundary = false } = props;
+    const { errorCode, atInit = false } = props;
     const { t } = useTranslation();
     const { classes } = useStyles();
     const auth = useAuth();
@@ -166,25 +165,23 @@ const ErrorPage = (props: ErrorPageProps) => {
                     {t("common.error.error-user-info") + auth.userData?.profile?.preferred_username}
                 </Typography>
             </Box>
-            {!atBoundary && (
-                <FlexCenter>
-                    <Box className={classes.buttonBox}>
-                        {getErrorActionButton(errorCode)}
-                        <Button
-                            className={classes.button}
-                            variant="contained"
-                            startIcon={
-                                <PowerSettingsIcon
-                                    aria-label={t("accessibility.asset.mui-icon.power-settings")}
-                                />
-                            }
-                            onClick={onDisconnect}
-                        >
-                            {t("page.home.navigation.logout")}
-                        </Button>
-                    </Box>
-                </FlexCenter>
-            )}
+            <FlexCenter>
+                <Box className={classes.buttonBox}>
+                    {getErrorActionButton(errorCode)}
+                    <Button
+                        className={classes.button}
+                        variant="contained"
+                        startIcon={
+                            <PowerSettingsIcon
+                                aria-label={t("accessibility.asset.mui-icon.power-settings")}
+                            />
+                        }
+                        onClick={onDisconnect}
+                    >
+                        {t("page.home.navigation.logout")}
+                    </Button>
+                </Box>
+            </FlexCenter>
         </>
     );
 };

diff --git a/src/pages/error/ErrorProvider.tsx b/src/pages/error/ErrorProvider.tsx
@@ -1,66 +1,85 @@
 import { ErrorCodeEnum } from "enumerations/ErrorCodeEnum";
-import ErrorPage from "./Error";
+import ErrorPage from "./ErrorPage";
 import FlexCenter from "components/commons/FlexCenter/FlexCenter";
 import { Box, Button, Typography } from "@mui/material";
 import { ReactComponent as HomeIcon } from "assets/illustration/mui-icon/home.svg";
 import { useTranslation } from "react-i18next";
 import { ReactComponent as DefaultErrorIcon } from "assets/illustration/error/error.svg";
+import { ReactComponent as PowerSettingsIcon } from "assets/illustration/mui-icon/power-settings-white.svg";
 import PageIcon from "components/commons/PageIcon/PageIcon";
 import { makeStylesEdt } from "@inseefrlab/lunatic-edt";
 import { useAuth } from "oidc-react";
+import { useCallback } from "react";
+import { lunaticDatabase } from "service/lunatic-database";
+import { navToHome } from "service/navigation-service";
 
 export type ErrorProviderProps = {
     errorCode?: ErrorCodeEnum;
     error?: Error;
     resetErrorBoundary?: () => void;
 };
-const navToHome = () => {
-    window.location.href = "/";
-};
 
 const ErrorProvider = ({ errorCode, error }: ErrorProviderProps) => {
     const { t } = useTranslation();
     const { classes } = useStyles();
     const auth = useAuth();
 
+    const disconnect = useCallback(() => {
+        auth.userManager.signoutRedirect({
+            id_token_hint: localStorage.getItem("id_token") ?? undefined,
+        });
+        auth.userManager.clearStaleState();
+        auth.userManager.signoutRedirectCallback().then(() => {
+            localStorage.clear();
+            lunaticDatabase.clear();
+            setTimeout(() => {
+                window.location.replace(process.env.REACT_APP_PUBLIC_URL || "");
+                auth.userManager.clearStaleState();
+            }, 200);
+        });
+    }, []);
+
     return (
         <>
-            {error ? (
-                <>
-                    <PageIcon
-                        icon={<DefaultErrorIcon aria-label={t("accessibility.asset.error.default")} />}
-                    />
-                    <Box className={classes.textBox}>
-                        <Typography>{t("common.error.error-default-title")}</Typography>
-                        <br />
-                        <Typography>{t("common.error.error-default")}</Typography>
-                        <br />
-                        <Typography>
-                            {t("common.error.error-user-info") +
-                                auth.userData?.profile?.preferred_username}
-                        </Typography>
-                    </Box>
+            <PageIcon icon={<DefaultErrorIcon aria-label={t("accessibility.asset.error.default")} />} />
+            <Box className={classes.textBox}>
+                <Typography>{t("common.error.error-default-title")}</Typography>
+                <br />
+                <Typography>{t("common.error.error-default")}</Typography>
+                <br />
+                <Typography>
+                    {t("common.error.error-user-info") + auth.userData?.profile?.preferred_username}
+                </Typography>
+            </Box>
 
-                    <FlexCenter>
-                        <Box className={classes.buttonBox}>
-                            <Button
-                                className={classes.button}
-                                variant="contained"
-                                startIcon={
-                                    <HomeIcon
-                                        aria-label={t("accessibility.asset.mui-icon.power-settings")}
-                                    />
-                                }
-                                onClick={navToHome}
-                            >
-                                {t("common.navigation.back-to-home")}
-                            </Button>
-                        </Box>
-                    </FlexCenter>
-                </>
-            ) : (
-                <ErrorPage errorCode={errorCode || ErrorCodeEnum.COMMON} atBoundary={true} />
-            )}
+            <FlexCenter>
+                <Box className={classes.buttonBox}>
+                    <Button
+                        className={classes.button}
+                        variant="contained"
+                        startIcon={
+                            <HomeIcon aria-label={t("accessibility.asset.mui-icon.power-settings")} />
+                        }
+                        onClick={navToHome}
+                    >
+                        {t("common.navigation.back-to-home")}
+                    </Button>
+                </Box>
+                <Box className={classes.buttonBox}>
+                    <Button
+                        className={classes.button}
+                        variant="contained"
+                        startIcon={
+                            <PowerSettingsIcon
+                                aria-label={t("accessibility.asset.mui-icon.power-settings")}
+                            />
+                        }
+                        onClick={disconnect}
+                    >
+                        {t("page.home.navigation.logout")}
+                    </Button>
+                </Box>
+            </FlexCenter>
         </>
     );
 };

diff --git a/src/pages/home-surveyed/HomeSurveyed.tsx b/src/pages/home-surveyed/HomeSurveyed.tsx
@@ -22,8 +22,10 @@ import { SurveysIdsEnum } from "enumerations/SurveysIdsEnum";
 import { Person } from "interface/entity/Person";
 import { LunaticData, OrchestratorContext } from "interface/lunatic/Lunatic";
 import { callbackHolder } from "orchestrator/Orchestrator";
-import ErrorPage from "pages/error/Error";
+import ErrorPage from "pages/error/ErrorPage";
+import ErrorProvider from "pages/error/ErrorProvider";
 import React, { useCallback, useEffect } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { logout } from "service/api-service";
@@ -330,7 +332,7 @@ const HomeSurveyedPage = () => {
         let userDatas = groupBy(userDatasMap(), nameSurveyData => nameSurveyData.num);
         let groups = Object.keys(userDatas);
         return renderPageOrLoadingOrError(
-            <>
+            <ErrorBoundary FallbackComponent={ErrorProvider}>
                 {renderReminderNote()}
 
                 <Box className={classes.groupCardBox}>
@@ -372,7 +374,7 @@ const HomeSurveyedPage = () => {
                         </Button>
                     </FlexCenter>
                 </Box>
-            </>,
+            </ErrorBoundary>,
         );
     };
 

diff --git a/src/pages/not-found/NotFound.tsx b/src/pages/not-found/NotFound.tsx
@@ -2,7 +2,7 @@ import { makeStylesEdt } from "@inseefrlab/lunatic-edt";
 import { Box, Typography } from "@mui/material";
 import PageIcon from "components/commons/PageIcon/PageIcon";
 import { ReactComponent as DefaultErrorIcon } from "assets/illustration/error/error.svg";
-import ErrorPage from "pages/error/Error";
+import ErrorPage from "pages/error/ErrorPage";
 import { useTranslation } from "react-i18next";
 
 const NotFoundPage = () => {

diff --git a/src/pages/surveys-overview/SurveysOverview.tsx b/src/pages/surveys-overview/SurveysOverview.tsx
@@ -23,7 +23,7 @@ import HouseholdCard from "components/edt/HouseholdCard/HouseholdCard";
 import { EdtRoutesNameEnum } from "enumerations/EdtRoutesNameEnum";
 import { ErrorCodeEnum } from "enumerations/ErrorCodeEnum";
 import { Household } from "interface/entity/Household";
-import ErrorPage from "pages/error/Error";
+import ErrorPage from "pages/error/ErrorPage";
 import React, { useCallback, useEffect } from "react";
 import { TFunction, useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";

diff --git a/src/routes/EdtRoutes.tsx b/src/routes/EdtRoutes.tsx
@@ -29,7 +29,7 @@ import WorstActivityDayPage from "pages/activity/worst-activity-day/WorstActivit
 import DayOfSurveyPage from "pages/day-of-survey/DayOfSurvey";
 import EditGlobalInformationPage from "pages/edit-global-information/EditGlobalInformation";
 import EndSurveyPage from "pages/end-survey/EndSurvey";
-import ErrorPage from "pages/error/Error";
+import ErrorPage from "pages/error/ErrorPage";
 import HelpPage from "pages/help/Help";
 import ContactPage from "pages/help/contact/ContactPage";
 import InstallPage from "pages/help/install/InstallPage";