fix: improves form timer (old)

components/clientComponents/forms/Form/Form.tsx

@@ -16,7 +16,7 @@ import { submitForm } from "app/(gcforms)/[locale]/(form filler)/id/[...props]/a
 import useFormTimer from "@lib/hooks/useFormTimer";
 import { useFormValuesChanged } from "@lib/hooks/useValueChanged";
 import { useGCFormsContext } from "@lib/hooks/useGCFormContext";
-import { Review } from "../Review/Review";
+import { getReviewItemElements, Review } from "../Review/Review";
 import { LockedSections } from "@formBuilder/components/shared/right-panel/treeview/types";
 import { BackButton } from "@formBuilder/[id]/preview/BackButton";
 import { Language } from "@lib/types/form-builder-types";
@@ -25,17 +25,17 @@ import {
   removeFormContextValues,
   getInputHistoryValues,
 } from "@lib/utils/form-builder/groupsHistory";
-import { filterShownElements, filterValuesByShownElements } from "@lib/formContext";
+import { filterShownElements, filterValuesByShownElements, Group } from "@lib/formContext";
 import { formHasGroups } from "@lib/utils/form-builder/formHasGroups";
 import { showReviewPage } from "@lib/utils/form-builder/showReviewPage";
 
 interface SubmitButtonProps {
-  numberOfRequiredQuestions: number;
+  getNumberOfRequiredQuestions: () => number;
   formID: string;
   formTitle: string;
 }
 const SubmitButton: React.FC<SubmitButtonProps> = ({
-  numberOfRequiredQuestions,
+  getNumberOfRequiredQuestions,
   formID,
   formTitle,
 }) => {
@@ -44,15 +44,28 @@ const SubmitButton: React.FC<SubmitButtonProps> = ({
   const [submitTooEarly, setSubmitTooEarly] = useState(false);
   const screenReaderRemainingTime = useRef(formTimerState.remainingTime);
 
+  // TODO: may want to consider a maximum delay
+
   // calculate initial delay for submit timer
   const secondsBaseDelay = 2;
   const secondsPerFormElement = 2;
-  const submitDelaySeconds = secondsBaseDelay + numberOfRequiredQuestions * secondsPerFormElement;
 
   const formTimerEnabled = process.env.NEXT_PUBLIC_APP_ENV !== "test";
 
   // If the timer hasn't started yet, start the timer
-  if (!formTimerState.timerDelay && formTimerEnabled) startTimer(submitDelaySeconds);
+  if (!formTimerState.timerDelay && formTimerEnabled) {
+    // Calculated here to avoid being called on each checkTimer interval (every second)
+    const submitDelaySeconds =
+      secondsBaseDelay + getNumberOfRequiredQuestions() * secondsPerFormElement;
+
+    // TEMP START: For easier testing, to be removed before merge
+    logMessage.info(
+      `Submit delay, Number of Required Questions=${getNumberOfRequiredQuestions()}. Total delay=${submitDelaySeconds} seconds`
+    );
+    // TEMP END: For easier testing, to be removed before merge
+
+    startTimer(submitDelaySeconds);
+  }
 
   useEffect(() => {
     if (!formTimerEnabled && !formTimerState.canSubmit) {
@@ -155,7 +168,15 @@ const InnerForm: React.FC<InnerFormProps> = (props) => {
   const [canFocusOnError, setCanFocusOnError] = useState(false);
   const [lastSubmitCount, setLastSubmitCount] = useState(-1);
 
-  const { currentGroup, groupsCheck, getGroupTitle } = useGCFormsContext();
+  const {
+    currentGroup,
+    groupsCheck,
+    getGroupTitle,
+    matchedIds,
+    getGroupHistory,
+    getValues,
+    groups,
+  } = useGCFormsContext();
   const isGroupsCheck = groupsCheck(props.allowGrouping);
   const isShowReviewPage = showReviewPage(form);
   const showIntro = isGroupsCheck ? currentGroup === LockedSections.START : true;
@@ -189,9 +210,39 @@ const InnerForm: React.FC<InnerFormProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [formStatusError, errorList, lastSubmitCount, canFocusOnError]);
 
-  const numberOfRequiredQuestions = form.elements.filter(
-    (element) => element.properties.validation?.required === true
-  ).length;
+  // Done in a callback to allow calling when the submit button is clicked. Otherwise the block
+  // below would be called very time the form values change. Similar reason why useMemo is not used.
+  const getNumberOfRequriedQuestions = () => {
+    const FALLBACK_QUESTIONS_COUNT = 4;
+    try {
+      const hasGroups = formHasGroups(form) && props.allowGrouping;
+      const formValues = getValues() || {};
+      const groupHistory = getGroupHistory();
+      const groupHistoryElements = groupHistory
+        .map((groupId) => {
+          if (!groups) return [];
+          const group: Group = groups[groupId as keyof typeof groups] || {};
+          const reviewElements = getReviewItemElements(
+            group.elements,
+            form.elements,
+            matchedIds,
+            formValues,
+            language
+          );
+          return reviewElements.map((reviewElement) => reviewElement.element);
+        })
+        .flat();
+
+      const filterByTheseElements = hasGroups ? groupHistoryElements : form.elements;
+      return (
+        filterByTheseElements.filter((element) => element?.properties.validation?.required === true)
+          .length || FALLBACK_QUESTIONS_COUNT
+      );
+    } catch (err) {
+      // This should never happen
+      return FALLBACK_QUESTIONS_COUNT;
+    }
+  };
 
   return status === "submitting" ? (
     <>
@@ -299,7 +350,7 @@ const InnerForm: React.FC<InnerFormProps> = (props) => {
                           )}
                         <div className="inline-block">
                           <SubmitButton
-                            numberOfRequiredQuestions={numberOfRequiredQuestions}
+                            getNumberOfRequiredQuestions={getNumberOfRequriedQuestions}
                             formID={formID}
                             formTitle={form.titleEn}
                           />
@@ -310,7 +361,7 @@ const InnerForm: React.FC<InnerFormProps> = (props) => {
                 })
               ) : (
                 <SubmitButton
-                  numberOfRequiredQuestions={numberOfRequiredQuestions}
+                  getNumberOfRequiredQuestions={getNumberOfRequriedQuestions}
                   formID={formID}
                   formTitle={form.titleEn}
                 />

components/clientComponents/forms/Review/Review.tsx

@@ -61,7 +61,8 @@ function formatElementValues(element: ReviewElement) {
   return String(element.values);
 }
 
-function getReviewItemElements(
+// TODO: move into a helper file?
+export function getReviewItemElements(
   groupElements: string[],
   formElements: FormElement[],
   matchedIds: string[],