Refactor : Restore persisted page & iteration on forms

package.json

@@ -10,7 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@craco/craco": "^6.4.0",
-    "@inseefr/lunatic": "2.4.9",
+    "@inseefr/lunatic": "2.4.7-gotopage",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
@@ -88,5 +88,8 @@
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1"
+  },
+  "volta": {
+    "node": "16.20.1"
   }
 }

public/static/questionnaire/famille/data.json

@@ -3661,6 +3661,6 @@
   "stateData": {
     "state": "INIT",
     "date": 1668677099410,
-    "currentPage": "2"
+    "currentPage": "2.1#1"
   }
 }

src/components/genericPages/end.js

@@ -22,6 +22,7 @@ import {
 import { interpret } from '@inseefr/trevas';
 import { MarkdownTypo } from 'components/designSystem';
 import { paradataHandler, SIMPLE_CLICK_EVENT } from 'utils/events';
+import { END_PAGE } from '../../utils/pagination';
 
 const useStyles = makeStyles((theme) => ({
   card: { marginLeft: '1em', marginRight: '1em' },
@@ -44,15 +45,14 @@ const EndPage = ({
   metadata: { inseeContext, variables, genericPages },
   personalization,
   stateData: { date },
-  currentPage,
 }) => {
   const classes = useStyles();
 
   const utilInfo = (type) => {
     return {
       ...SIMPLE_CLICK_EVENT,
       idParadataObject: `${type}-button`,
-      page: currentPage,
+      page: END_PAGE,
     };
   };
   const finalDate = date || 0;

src/components/genericPages/validation.js

@@ -9,6 +9,7 @@ import Send from '@material-ui/icons/Send';
 import { validationPageDictionary, buttonDictionary } from 'i18n';
 import { MarkdownTypo } from 'components/designSystem';
 import { paradataHandler, SIMPLE_CLICK_EVENT } from 'utils/events';
+import { VALIDATION_PAGE } from '../../utils/pagination';
 
 const useStyles = makeStyles((theme) => ({
   card: { marginLeft: '1em', marginRight: '1em' },
@@ -25,15 +26,14 @@ const useStyles = makeStyles((theme) => ({
 const ValidationPage = ({
   metadata: { inseeContext, genericPages },
   setValidationConfirmation,
-  currentPage,
 }) => {
   const classes = useStyles();
   const { title, body } =
     genericPages?.validation || validationPageDictionary(inseeContext);
   const utilInfo = {
     ...SIMPLE_CLICK_EVENT,
     idParadataObject: 'validate-button',
-    page: currentPage,
+    page: VALIDATION_PAGE,
   };
   return (
     <Card className={classes.card}>

src/components/modals/welcomeBack/welcomeBack.js

@@ -15,13 +15,14 @@ const utilInfo = (type) => {
   };
 };
 
-const WelcomeBack = ({ open, setOpen, goToFirstPage }) => {
+const WelcomeBack = ({ open, setOpen, goToFirstPage, goBackToSavedPage }) => {
   const goToCurrentPage = () => {
+    goBackToSavedPage?.();
     setOpen(false);
   };
 
   const goToFirst = () => {
-    goToFirstPage();
+    goToFirstPage?.();
     setOpen(false);
   };
 

src/components/orchestrator/collector/index.js

@@ -9,15 +9,15 @@ import { WelcomeBack } from 'components/modals/welcomeBack';
 import { AppBar } from 'components/navigation/appBar';
 import { BurgerMenu } from 'components/navigation/burgerMenu';
 import { LoaderSimple } from 'components/shared/loader';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { simpleLog } from 'utils/events';
 import {
   END_PAGE,
+  FORM_PAGE,
+  isLunaticPage,
   VALIDATION_PAGE,
   WELCOME_PAGE,
-  isLunaticPage,
 } from 'utils/pagination';
-import { isNewSequence } from 'utils/questionnaire';
 import { INIT, VALIDATED } from 'utils/questionnaire/stateData';
 import '../custom-lunatic.scss';
 import { ButtonsNavigation } from '../navigation';
@@ -43,59 +43,73 @@ export const Orchestrator = ({
   const [validationConfirmation, setValidationConfirmation] = useState(false);
 
   const { stateData, data, personalization } = stromaeData;
-  const [currentStateData, setCurrentStateData] = useState(stateData);
 
   const [validated, setValidated] = useState(
     stateData &&
       (stateData.state === 'VALIDATED' ||
         stateData.state === 'EXTRACTED' ||
         stateData.state === 'TOEXTRACT')
   );
-
-  const logFunction = (e) => simpleLog({ ...e, page: currentPage });
   const {
     getComponents,
     waiting,
     pageTag,
-    pager: { page },
+    goToPage,
     goNextPage,
     goPreviousPage,
     isFirstPage,
     isLastPage,
     compileControls,
     getData,
   } = lunatic.useLunatic(source, data, {
-    // ToDo : initial page
-    //initialPage,
     features,
     preferences,
     autoSuggesterLoading,
     getReferentiel,
     activeControls,
   });
 
-  const components = getComponents();
+  const logFunction = (e) => simpleLog({ ...e, page: currentPage });
+
+  // Control whether to display the modal to go back to the previous state
+  const showBackModal = !init && !validated && !!stateData?.currentPage;
 
-  const [currentPage, setCurrentPage] = useState(() => {
-    if (validated) return END_PAGE;
+  // Indicate in which state the orchestrator is, with stromae we need a welcome page before the form and an end page after
+  const [orchestratorState, setOrchestratorState] = useState(() => {
+    if (validated) {
+      return END_PAGE;
+    }
+    if (showBackModal) {
+      return WELCOME_PAGE;
+    }
     if (stateData?.currentPage) {
-      return page;
+      return FORM_PAGE;
     }
     return WELCOME_PAGE;
   });
 
-  const updateStateData = useCallback(
-    (newState) => {
-      const newStateData = {
-        state: newState ?? INIT,
-        date: new Date().getTime(),
-        currentPage: currentPage,
-      };
-      setCurrentStateData(newStateData);
-      return newStateData;
-    },
-    [currentPage]
+  const currentStateData = useMemo(
+    () => ({
+      state: orchestratorState === END_PAGE ? VALIDATED : INIT,
+      date: new Date().getTime(),
+      currentPage:
+        orchestratorState === FORM_PAGE ? pageTag : orchestratorState,
+    }),
+    [pageTag, orchestratorState]
   );
+  const currentPage =
+    orchestratorState === FORM_PAGE ? pageTag : orchestratorState;
+
+  // Persist state data on every change so the user can come back to where he was
+  useEffect(() => {
+    // Do not save before the user start the questionnaire
+    if (showBackModal) {
+      return;
+    }
+    save(currentStateData);
+  }, [currentStateData, save, showBackModal]);
+
+  const components = getComponents();
 
   const logoutAndClose = async () => {
     let dataToSave = { stateData: currentStateData, data: getData() };
@@ -105,8 +119,9 @@ export const Orchestrator = ({
     quit(dataToSave);
   };
 
+  // Scroll at the top of the form
   const goToTop = () => {
-    if (topRef && topRef.current) {
+    if (topRef.current) {
       topRef.current.tabIndex = -1;
       topRef.current.focus();
       topRef.current.blur();
@@ -116,13 +131,7 @@ export const Orchestrator = ({
   };
   const validateQuestionnaire = () => {
     setValidated(true);
-    const validateUpdateState = updateStateData(VALIDATED);
-    const dataToSave = {
-      stateData: validateUpdateState,
-      data: getData(),
-    };
-    save(dataToSave);
-    setCurrentPage(END_PAGE);
+    setOrchestratorState(END_PAGE);
   };
 
   const [errorActive, setErrorActive] = useState({});
@@ -146,52 +155,39 @@ export const Orchestrator = ({
   const onNext = useCallback(
     (event, skipValidation = false) => {
       closeErrorsModal();
-      if (currentPage === WELCOME_PAGE) setCurrentPage(page);
-      else {
-        const onNextUpdateState = updateStateData();
-        const dataToSave = {
-          stateData: onNextUpdateState,
-          data: getData(),
-        };
+      if (orchestratorState === WELCOME_PAGE) {
+        setOrchestratorState(FORM_PAGE);
+      } else {
         if (!isLastPage) {
-          if (isNewSequence(components)) {
-            save(dataToSave);
-          }
           handleGoNext(skipValidation, goNextPage);
         } else {
-          save(dataToSave);
-          handleGoNext(skipValidation, () => setCurrentPage(VALIDATION_PAGE));
+          handleGoNext(skipValidation, () =>
+            setOrchestratorState(VALIDATION_PAGE)
+          );
         }
       }
       goToTop();
     },
-    [
-      closeErrorsModal,
-      components,
-      currentPage,
-      getData,
-      goNextPage,
-      handleGoNext,
-      isLastPage,
-      page,
-      save,
-      updateStateData,
-    ]
+    [closeErrorsModal, orchestratorState, goNextPage, handleGoNext, isLastPage]
   );
 
   const onPrevious = () => {
-    if (currentPage === VALIDATION_PAGE) setCurrentPage(page);
+    if (orchestratorState === VALIDATION_PAGE) setOrchestratorState(FORM_PAGE);
     else {
       if (!isFirstPage) goPreviousPage();
-      else setCurrentPage(WELCOME_PAGE);
+      else setOrchestratorState(WELCOME_PAGE);
     }
   };
 
-  useEffect(() => {
-    if (isLunaticPage(currentPage)) {
-      setCurrentPage(page);
+  const restoreSavedPage = () => {
+    // stateData currentPage can be "welcomePage" instead of a normal page number
+    if (isLunaticPage(stateData?.currentPage)) {
+      goToPage({ page: stateData?.currentPage });
+      setOrchestratorState(FORM_PAGE);
+    } else {
+      setOrchestratorState(stateData?.currentPage);
     }
-  }, [currentPage, page]);
+  };
 
   const lunaticDisplay = () => (
     <Card
@@ -243,23 +239,28 @@ export const Orchestrator = ({
         ref={topRef}
         className={classes.root}
       >
-        {currentPage === WELCOME_PAGE && (
+        {orchestratorState === WELCOME_PAGE && (
           <WelcomePage metadata={metadata} personalization={personalization} />
         )}
-        {isLunaticPage(currentPage) && lunaticDisplay()}
-        {currentPage === VALIDATION_PAGE && (
+        {orchestratorState === FORM_PAGE && lunaticDisplay()}
+        {
+          <div>
+            <b>
+              PageTag : {pageTag} - CurrentPage : {currentPage}
+            </b>
+          </div>
+        }
+        {orchestratorState === VALIDATION_PAGE && (
           <ValidationPage
             metadata={metadata}
             setValidationConfirmation={setValidationConfirmation}
-            currentPage={currentPage}
           />
         )}
-        {currentPage === END_PAGE && (
+        {orchestratorState === END_PAGE && (
           <EndPage
             logoutAndClose={logoutAndClose}
             metadata={metadata}
             stateData={currentStateData}
-            currentPage={currentPage}
             personalization={personalization}
           />
         )}
@@ -281,11 +282,9 @@ export const Orchestrator = ({
         />
       )}
       <WelcomeBack
-        open={!init && !validated && !!stateData?.currentPage}
+        open={showBackModal}
         setOpen={(o) => setInit(!o)}
-        goToFirstPage={() => {
-          setCurrentPage(WELCOME_PAGE);
-        }}
+        goBackToSavedPage={restoreSavedPage}
       />
       <SendingConfirmation
         open={validationConfirmation}

src/utils/pagination/index.js

@@ -1,6 +1,7 @@
 export const WELCOME_PAGE = 'welcomePage';
 export const VALIDATION_PAGE = 'validationPage';
 export const END_PAGE = 'endPage';
+export const FORM_PAGE = 'formPage';
 
 export const isLunaticPage = (page) =>
-  ![WELCOME_PAGE, VALIDATION_PAGE, END_PAGE].includes(page);
+  page && ![WELCOME_PAGE, VALIDATION_PAGE, END_PAGE].includes(page);

yarn.lock

@@ -1446,10 +1446,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@inseefr/[email protected].9":
-  version "2.4.9"
-  resolved "https://registry.yarnpkg.com/@inseefr/lunatic/-/lunatic-2.4.9.tgz#788892acc94e3a52dd4f1b4a02ea702b2ab4405f"
-  integrity sha512-qQDnARkPVHjMD/xlIRVPdizTjqZKNFT9Ws4P9Yy6hfEELnOrUemMBgKqmydiHazNhYX4BN5Kdn1dn0AbfBCYjQ==
+"@inseefr/[email protected].7-gotopage":
+  version "2.4.7-gotopage"
+  resolved "https://registry.yarnpkg.com/@inseefr/lunatic/-/lunatic-2.4.7-gotopage.tgz#ec5dab8ba21a2bc59997854f53c5b56829a2f2a4"
+  integrity sha512-MmhQHVkHu50ZYoxBz+iNXvw/wfYnvpcjmOw7Su7BJZVpMS1j5p+b5t7MKuO7zIhmq4+dYE9yXfyxy5ds/FFDgA==
   dependencies:
     "@inseefr/trevas" "^0.1.17"
     "@inseefr/vtl-2.0-antlr-tools" "^0.1.0-bundle"