Fix: autofocus (#66)

* fix: service-worker * Remove focus ref * fix: autoFocus feature * bumb: queenV2 et drama-queen-container
InseeFr · Nov 7, 2023 · f97a46a · f97a46a
1 parent e7c1571
commit f97a46a
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 89 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "drama-queen-container",
   "private": true,
-  "version": "1.3.12",
+  "version": "1.3.13",
   "workspaces": [
     "drama-queen",
     "queen-v2",

diff --git a/queen-v2/package.json b/queen-v2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "queen-v2",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Web application for the management of questionnaires powered by Lunatic",
   "repository": {
     "type": "git",

diff --git a/queen-v2/src/components/lightOrchestrator/header/header.js b/queen-v2/src/components/lightOrchestrator/header/header.js
@@ -1,5 +1,4 @@
 import { ButtonBase, IconButton } from '@material-ui/core';
-import { useRef } from 'react';
 import { SIMPLE_CLICK_EVENT, paradataHandler } from 'utils/events';
 
 import { ExitToApp } from '@material-ui/icons';
@@ -25,7 +24,6 @@ const Header = ({
 }) => {
   const classes = useStyles({ standalone });
   const setToFirstPage = useConstCallback(() => setPage('1'));
-  const quitButtonRef = useRef();
 
   const utilInfo = type => {
     return {
@@ -37,7 +35,6 @@ const Header = ({
   const { sequence, subSequence } = hierarchy;
 
   const quitShortCut = () => {
-    if (quitButtonRef && quitButtonRef.current) quitButtonRef.current.focus();
     quit();
   };
 
@@ -78,7 +75,6 @@ const Header = ({
         <>
           <div className={classes.headerClose}>
             <IconButton
-              ref={quitButtonRef}
               title={D.simpleQuit}
               className={classes.closeIcon}
               onClick={paradataHandler(quit)(utilInfo('end-survey'))}

diff --git a/queen-v2/src/components/lightOrchestrator/lightOrchestrator.js b/queen-v2/src/components/lightOrchestrator/lightOrchestrator.js
@@ -1,6 +1,6 @@
 import { useLunatic } from '@inseefr/lunatic';
 
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import ButtonContinue from './buttons/continue/index';
 
 import D from 'i18n';
@@ -13,10 +13,6 @@ import Header from './header';
 import { useStyles } from './lightOrchestrator.style';
 import NavBar from './navBar';
 
-function onLogChange(response, value, args) {
-  console.log('onChange', { response, value, args });
-}
-
 function noDataChange() {
   /**/
 }
@@ -27,6 +23,9 @@ const features = ['VTL'];
 
 const missingShortcut = { dontKnow: 'f2', refused: 'f4' };
 
+const dontKnowButton = D.doesntKnowButton;
+const refusedButton = D.refusalButton;
+
 function LightOrchestrator({
   surveyUnit,
   standalone,
@@ -38,15 +37,14 @@ function LightOrchestrator({
   shortcut = true,
   autoSuggesterLoading,
   allData,
-  filterDescription,
-  onChange = onLogChange,
+  // onChange = onLogChange,
   onDataChange = noDataChange,
   save,
   quit,
   definitiveQuit,
 }) {
-  const { data, stateData } = surveyUnit;
   const classes = useStyles();
+
   const lunaticStateRef = useRef();
 
   const lightCustomHandleChange = useConstCallback(valueChange => {
@@ -70,14 +68,8 @@ function LightOrchestrator({
     goNextPage();
   });
 
-  // TODO restore when lunatic handle object in missingButtons properties
-  // const dontKnowButton = <MissingButton shortcutLabel="F2" buttonLabel={D.doesntKnowButton} />;
-  // const refusedButton = <MissingButton shortcutLabel="F4" buttonLabel={D.refusalButton} />;
-  const dontKnowButton = D.doesntKnowButton;
-  const refusedButton = D.refusalButton;
-
-  lunaticStateRef.current = useLunatic(source, data, {
-    lastReachedPage: stateData?.currentPage ?? '1',
+  lunaticStateRef.current = useLunatic(source, surveyUnit?.data, {
+    lastReachedPage: surveyUnit?.stateData?.currentPage ?? '1',
     features,
     pagination,
     onChange: lightCustomHandleChange,
@@ -110,55 +102,31 @@ function LightOrchestrator({
     // getModalErrors,
     // getCurrentErrors,
     // getData,
-    // getChangedData,
+    getChangedData,
     loopVariables = [],
     Provider,
     pageTag,
   } = lunaticStateRef.current;
 
-  const previousPageTag = useRef();
+  const components = getComponents();
 
+  const previousPageTag = useRef();
   // page change : update pager and save data
   useEffect(() => {
     const savingTask = async () => {
-      if (lunaticStateRef.current === undefined) return;
-      const { getChangedData: freshGetChangedData, pageTag, pager } = lunaticStateRef.current;
       if (previousPageTag.current === undefined) {
         previousPageTag.current = pageTag;
         return;
       }
       if (pageTag !== previousPageTag.current) {
         previousPageTag.current = pageTag;
-        const partialData = freshGetChangedData(true);
+        const partialData = getChangedData(true);
         onDataChange(partialData);
         save(undefined, partialData, pager.lastReachedPage);
       }
     };
     savingTask();
-  }, [save, pager, onDataChange]);
-
-  const memoQuit = useConstCallback(() => {
-    const { getChangedData: freshGetChangedData, pager: freshPager } = lunaticStateRef.current;
-    quit(freshPager, freshGetChangedData);
-  });
-
-  const memoDefinitiveQuit = useConstCallback(() => {
-    const { getChangedData: freshGetChangedData, pager: freshPager } = lunaticStateRef.current;
-    definitiveQuit(freshPager, freshGetChangedData);
-  });
-
-  const [components, setComponents] = useState([]);
-
-  // persist components independently from Lunatic state
-  useEffect(() => {
-    if (typeof getComponents === 'function') {
-      setComponents(getComponents);
-    }
-  }, [getComponents]);
-
-  // const errors = getErrors();
-  // const modalErrors = getModalErrors();
-  // const currentErrors = typeof getCurrentErrors === 'function' ? getCurrentErrors() : [];
+  }, [save, pager, onDataChange, pageTag, getChangedData]);
 
   const trueGoToPage = useConstCallback(targetPage => {
     if (typeof targetPage === 'string') {
@@ -168,28 +136,18 @@ function LightOrchestrator({
       goToPage({ page: page, iteration: iteration, subPage: subPage });
     }
   });
-
   const goToLastReachedPage = useConstCallback(() => {
-    if (lunaticStateRef.current === undefined) return;
-    const { pager } = lunaticStateRef.current;
     trueGoToPage(pager.lastReachedPage);
   });
 
-  const firstComponent = useMemo(() => [...components]?.[0], [components]);
-  const hasResponse = componentHasResponse(firstComponent);
-
-  const hierarchy = firstComponent?.hierarchy ?? {
-    sequence: { label: 'There is no sequence', page: '1' },
-  };
-
-  // directly from source, could be in raw VTL in future versions
-  const {
-    label: { value: questionnaireTitle },
-  } = source;
+  const memoQuit = useConstCallback(() => {
+    quit(pager, getChangedData);
+  });
 
-  if (previousPageTag === undefined) return null;
+  const memoDefinitiveQuit = useConstCallback(() => {
+    definitiveQuit(pager, getChangedData);
+  });
 
-  // lastReachedpage can have values like "35" or like "35.1#1"
   const checkIfLastReachedPage = () => {
     if (pager === undefined || pager.lastReachedPage === undefined) {
       return false;
@@ -205,9 +163,21 @@ function LightOrchestrator({
       pager.subPage === lastSubPage - 1
     );
   };
+
+  const firstComponent = useMemo(() => [...components]?.[0], [components]);
+  const hasResponse = componentHasResponse(firstComponent);
+
   const isLastReachedPage = pager !== undefined ? checkIfLastReachedPage() : false;
   const { maxPage, page, subPage, nbSubPages, iteration, nbIterations } = pager;
 
+  const hierarchy = firstComponent?.hierarchy ?? {
+    sequence: { label: 'There is no sequence', page: '1' },
+  };
+  // directly from source, could be in raw VTL in future versions
+  const {
+    label: { value: questionnaireTitle },
+  } = source;
+
   return (
     <div className={classes.root}>
       <Header
@@ -225,7 +195,7 @@ function LightOrchestrator({
         <div className={classes.mainTile}>
           <div className={classes.activeView}>
             <Provider>
-              <ComponentDisplayer components={components} readonly={readonly} pageTag={pageTag} />
+              <ComponentDisplayer components={components} pageTag={pageTag} readonly={readonly} />
             </Provider>
             <LoopPanel
               loopVariables={loopVariables}
@@ -244,7 +214,7 @@ function LightOrchestrator({
             isLastReachedPage={isLastReachedPage}
             componentHasResponse={hasResponse}
             goToLastReachedPage={goToLastReachedPage}
-          ></ButtonContinue>
+          />
         </div>
         <NavBar
           page={page}

diff --git a/queen-v2/src/service-worker.js b/queen-v2/src/service-worker.js
@@ -7,12 +7,12 @@
 // You can also remove this file if you'd prefer not to use a
 // service worker, and the Workbox build step will be skipped.
 
+import { CacheableResponsePlugin } from 'workbox-cacheable-response';
 import { clientsClaim } from 'workbox-core';
 import { ExpirationPlugin } from 'workbox-expiration';
-import { CacheableResponsePlugin } from 'workbox-cacheable-response';
-import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';
 import { registerRoute } from 'workbox-routing';
-import { StaleWhileRevalidate, NetworkFirst, CacheFirst } from 'workbox-strategies';
+import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
 
 clientsClaim();
 
@@ -98,13 +98,9 @@ registerRoute(
 const queenPrecacheController = async () => {
   const responseFromQueen = await fetch('/manifest.json');
   const { icons } = await responseFromQueen.json();
-  const urlsToPrecache = [
-    `/manifest.json`,
-    `/configuration.json`,
-    process.env.REACT_APP_LUNATIC_LOADER_WORKER_PATH,
-    process.env.REACT_APP_LUNATIC_SEARCH_WORKER_PATH,
-    process.env.REACT_APP_LUNATIC_LABEL_WORKER_PATH,
-  ].concat(icons.map(({ src }) => src));
+  const urlsToPrecache = [`/manifest.json`, `/configuration.json`].concat(
+    icons.map(({ src }) => src)
+  );
   const cache = await self.caches.open(configurationCacheName);
   await cache.addAll(urlsToPrecache);
   cache

diff --git a/queen-v2/src/utils/index.js b/queen-v2/src/utils/index.js
@@ -1,12 +1,2 @@
 export { default as addOnlineStatusObserver } from './online-status-observer';
 export const getPercent = (n, length) => Math.round((100 * n) / length);
-
-export const goToTopPage = topRef => {
-  if (topRef && topRef.current) {
-    topRef.current.tabIndex = -1;
-    topRef.current.focus();
-    topRef.current.blur();
-    window.scrollTo({ top: 0 });
-    topRef.current.removeAttribute('tabindex');
-  }
-};