From 34defab577c485c7728d4570c01a173c1ad946d0 Mon Sep 17 00:00:00 2001 From: MailineN Date: Tue, 9 Jul 2024 10:38:26 +0200 Subject: [PATCH] fix: data sync at the end of an activity + refactor useless functions --- src/App.tsx | 11 ++- .../commons/LoadingFull/LoadingFull.tsx | 26 ++++- src/index.tsx | 6 +- .../ActivityOrRoutePlanner.tsx | 2 +- .../with-screen/WithScreen.tsx | 10 +- src/pages/error/{Error.tsx => ErrorPage.tsx} | 39 ++++---- src/pages/error/ErrorProvider.tsx | 97 +++++++++++-------- src/pages/home-surveyed/HomeSurveyed.tsx | 8 +- src/pages/not-found/NotFound.tsx | 2 +- .../surveys-overview/SurveysOverview.tsx | 2 +- src/routes/EdtRoutes.tsx | 2 +- src/service/api-service.ts | 11 ++- src/service/navigation-service.ts | 3 - src/service/survey-service.ts | 70 ++++--------- 14 files changed, 150 insertions(+), 139 deletions(-) rename src/pages/error/{Error.tsx => ErrorPage.tsx} (89%) diff --git a/src/App.tsx b/src/App.tsx index 7ad92a48..ea5bbbee 100644 --- 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 ? : errorOrLoadingPage()}; + const loadingPage = () => { + return ; + }; + + // return <>{initialized && !error ? : errorOrLoadingPage()}; + + return <>{initialized ? : loadingPage()}; }; export default App; diff --git a/src/components/commons/LoadingFull/LoadingFull.tsx b/src/components/commons/LoadingFull/LoadingFull.tsx index 2a3dbb00..d8acf695 100644 --- 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 ( <> @@ -31,6 +40,21 @@ const LoadingFull = (props: LoadingFullProps) => {

{message}

 {thanking ?

{thanking}

: <>} + + + + ); }; diff --git a/src/index.tsx b/src/index.tsx index e57e6d81..4b56358b 100644 --- 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( - - - + diff --git a/src/pages/activity/activity-or-route-planner/ActivityOrRoutePlanner.tsx b/src/pages/activity/activity-or-route-planner/ActivityOrRoutePlanner.tsx index 2b537e4d..5137ebdb 100644 --- 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 index 08bdb982..21c92caf 100644 --- 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 b/src/pages/error/ErrorPage.tsx similarity index 89% rename from src/pages/error/Error.tsx rename to src/pages/error/ErrorPage.tsx index 4ef47904..08894b21 100644 --- a/src/pages/error/Error.tsx +++ b/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} - {!atBoundary && ( - - - {getErrorActionButton(errorCode)} - - - - )} + + + {getErrorActionButton(errorCode)} + + + ); }; diff --git a/src/pages/error/ErrorProvider.tsx b/src/pages/error/ErrorProvider.tsx index 50db5154..cfc4894a 100644 --- 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 ? ( - <> - } - /> - - {t("common.error.error-default-title")} -
- {t("common.error.error-default")} -
- - {t("common.error.error-user-info") + - auth.userData?.profile?.preferred_username} - - + } /> + + {t("common.error.error-default-title")} +
+ {t("common.error.error-default")} +
+ + {t("common.error.error-user-info") + auth.userData?.profile?.preferred_username} + + - - - - - - - ) : ( - - )} + + + + + + + + ); }; diff --git a/src/pages/home-surveyed/HomeSurveyed.tsx b/src/pages/home-surveyed/HomeSurveyed.tsx index a920ed00..b6f8e908 100644 --- 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( - <> + {renderReminderNote()} @@ -372,7 +374,7 @@ const HomeSurveyedPage = () => { - , + , ); }; diff --git a/src/pages/not-found/NotFound.tsx b/src/pages/not-found/NotFound.tsx index 963d2602..847e1730 100644 --- 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 index 9bd98841..6e3de40d 100644 --- 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 index 201ecc72..8066e39b 100644 --- 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"; diff --git a/src/service/api-service.ts b/src/service/api-service.ts index 0c0ce918..1b18f345 100644 --- a/src/service/api-service.ts +++ b/src/service/api-service.ts @@ -54,7 +54,7 @@ const revertTransformedArray = (dataAct: any) => { const collected = dataAct[key]?.COLLECTED; if (Array.isArray(collected)) { dataAct[key].COLLECTED = collected.map((item: string) => { - if (item && typeof item === "string" && item.startsWith("S")) { + if (item && typeof item === "string" && /^S\d/.test(item)) { console.log("item to be reverted", item); return item.substring(1); } @@ -212,10 +212,11 @@ const requestPutSurveyData = ( token?: string, ): Promise => { //console.log("data", data); - const collectedData = token ? transformCollectedArray(data.data?.COLLECTED) : data.data?.COLLECTED; - if (data.data) { - data.data.COLLECTED = collectedData; - } + //const collectedData = transformCollectedArray(data?.data?.COLLECTED) + // const collectedData = data?.data?.COLLECTED; + // if (data.data) { + // data.data.COLLECTED = collectedData; + // } const stateData = data.stateData; const putLunaticData = axios.put( `${stromaeBackOfficeApiBaseUrl}api/survey-unit/${idSurvey}/data`, diff --git a/src/service/navigation-service.ts b/src/service/navigation-service.ts index d4c85f3a..5aa43bcf 100644 --- a/src/service/navigation-service.ts +++ b/src/service/navigation-service.ts @@ -208,7 +208,6 @@ const saveAndNav = ( currentIteration?: number, ): void => { saveData(idSurvey, _callbackHolder.getData() ?? getData(idSurvey)).then(() => { - console.log("Save And Nav"); navToRouteOrRouteNotSelection(idSurvey, route, value, routeNotSelection, currentIteration); }); }; @@ -221,7 +220,6 @@ const saveAndNavLocally = ( currentIteration?: number, ): void => { saveDataLocally(idSurvey, _callbackHolder.getData() ?? getData(idSurvey)).then(() => { - console.log("Save And Nav Locally"); navToRouteOrRouteNotSelection(idSurvey, route, value, routeNotSelection, currentIteration); }); }; @@ -585,7 +583,6 @@ const saveAndNextStep = ( rootPage: EdtRoutesNameEnum, currentPage: EdtRoutesNameEnum, ) => { - console.log("Save and Next Step"); saveAndNavLocally( idSurvey ?? "", getCurrentNavigatePath( diff --git a/src/service/survey-service.ts b/src/service/survey-service.ts index b840d145..42f388a2 100644 --- a/src/service/survey-service.ts +++ b/src/service/survey-service.ts @@ -21,6 +21,7 @@ import { StateHouseholdEnum } from "enumerations/StateHouseholdEnum"; import { StateSurveyEnum } from "enumerations/StateSurveyEnum"; import { SurveysIdsEnum } from "enumerations/SurveysIdsEnum"; import { t } from "i18next"; +import _ from "lodash"; import { TabData } from "interface/component/Component"; import { StateData, SurveyData, UserSurveys } from "interface/entity/Api"; import { Household } from "interface/entity/Household"; @@ -537,12 +538,7 @@ const getRemoteSavedSurveysDatas = ( lastLocalSaveDate <= remoteStateData)) // local date moins recent que remote date ) { const stateData = getSurveyStateData(surveyData, surveyId); - setLocalOrRemoteData( - surveyId, - remoteSurveyData, - surveyData, - stateData, - ); + setLocalDatabase(stateData, surveyData, surveyId); return lunaticDatabase.save(surveyId, surveyData); } } @@ -799,33 +795,18 @@ const getIfArrayIsChange = ( return isChangeArray; }; -const dataIsChange = (idSurvey: string, dataAct: LunaticData, lastData: LunaticData) => { - const currentDataSurvey = lastData; - const currentDataCollected = currentDataSurvey?.COLLECTED; +const dataIsChange = (idSurvey: string, dataAct: LunaticData, lastData: LunaticData): boolean => { const dataCollected = dataAct?.COLLECTED; - let isChange = false; - if (dataCollected && currentDataCollected) { - const keys = Object.keys(dataCollected); - - keys?.forEach(key => { - const data = getValueOfData(dataAct, key) ?? []; - const currentData = getValueOfData(currentDataSurvey, key) ?? []; - if (data != currentData) { - if (Array.isArray(data)) { - isChange = getIfArrayIsChange(currentData, data, isChange); - } else { - isChange = true; - } - } - }); - if (surveysIds[SurveysIdsEnum.WORK_TIME_SURVEYS_IDS].includes(idSurvey)) { - isChange = true; - } - } else { - isChange = true; + const currentDataCollected = lastData?.COLLECTED; + if (surveysIds[SurveysIdsEnum.WORK_TIME_SURVEYS_IDS].includes(idSurvey)) { + return true; } - return isChange; + if (!dataCollected || !currentDataCollected) { + return true; + } + + return !_.isEqual(dataCollected, currentDataCollected); }; const getVarBooleanModepersistance = ( @@ -1016,14 +997,14 @@ const saveData = ( data = saveQualityScore(idSurvey, data); if (!isDemoMode && isReviewerMode && !localSaveOnly && navigator.onLine) { stateData = getSurveyStateData(data, idSurvey); - return remotePutSurveyDataReviewer(idSurvey, stateData, data).then(remoteData => { + return remotePutSurveyDataReviewer(idSurvey, stateData, data).then(() => { stateData.date = stateData.date < (data.lastLocalSaveDate ?? 0) ? data.lastLocalSaveDate ?? 0 : stateData.date; data.stateData = stateData; data.lastRemoteSaveDate = stateData.date; - return setLocalOrRemoteData(idSurvey, remoteData, data, stateData); + return setLocalDatabase(stateData, data, idSurvey); }); } //We try to submit each time the local database is updated if the user is online @@ -1035,24 +1016,24 @@ const saveData = ( data: data, }; data.lastRemoteSaveDate = stateData.date; - return remotePutSurveyData(idSurvey, surveyData).then(remoteData => { + return remotePutSurveyData(idSurvey, surveyData).then(() => { data.stateData = stateData; - return setLocalOrRemoteData(idSurvey, remoteData, data, stateData); + return setLocalDatabase(stateData, data, idSurvey); }); } else if (isDemoMode || localSaveOnly || !navigator.onLine) { //offline, always prio local, pour ça stateData 0 stateData = getSurveyStateData(data, idSurvey); stateData.date = 0; data.stateData = stateData; - return setLocalOrRemoteData(idSurvey, { data: data }, data, stateData); + return setLocalDatabase(stateData, data, idSurvey); } else { //jamais data.stateData = stateData; - return setLocalOrRemoteData(idSurvey, { data: data }, data, stateData); + return setLocalDatabase(stateData, data, idSurvey); } } else { data.stateData = stateData; - return setLocalOrRemoteData(idSurvey, { data: data }, data, stateData); + return setLocalDatabase(stateData, data, idSurvey); } }; @@ -1085,20 +1066,7 @@ const saveDataLocally = ( data = saveQualityScore(idSurvey, data); } data.stateData = stateData; - return setLocalOrRemoteData(idSurvey, { data: data }, data, stateData); -}; - -const setLocalOrRemoteData = ( - idSurvey: string, - dataRemote: SurveyData, - data: LunaticData, - stateData: StateData, -) => { - if (dataRemote != data && (data == null || data.COLLECTED == undefined)) { - return setLocalDatabase(stateData, data, idSurvey); - } else { - return setLocalDatabase(stateData, data, idSurvey); - } + return setLocalDatabase(stateData, data, idSurvey); }; const setLocalDatabase = (stateData: StateData, data: LunaticData, idSurvey: string) => {