Update references to new container object to trigger re-renders

compendium-frontend/src/survey/SurveyComponent.tsx

@@ -143,7 +143,8 @@ function setVerifyButton(question: Question, state: VerificationStatus, surveyMo
     }
 }
 
-function SurveyComponent({ surveyModel }) {
+function SurveyComponent({ surveyModelContainer }) {
+    const { surveyModel } = surveyModelContainer;
     
     useEffect(() => {
         const updateFromUnverified = (_, options) => {

compendium-frontend/src/survey/SurveyContainerComponent.tsx

+/* eslint-disable react-compiler/react-compiler */
 import { useEffect, useState, useCallback, useContext } from "react";
 import { Container } from "react-bootstrap";
 import toast, { Toaster } from "react-hot-toast";
@@ -18,20 +19,13 @@ import { userContext } from "compendium/providers/UserProvider";
 Serializer.addProperty("itemvalue", "customDescription:text");
 Serializer.addProperty("question", "hideCheckboxLabels:boolean");
 
-function modifyModel(surveyModel: Model) {
-    // Used to create a new reference to the survey model to force a rerender.
-    // This is a hack to get around the fact that the survey model state is not part of the react state.
-    const newModel = Object.create(surveyModel);
-
-    if (!newModel.css.question.title.includes("sv-header-flex")) {
-        newModel.css.question.title = "sv-title sv-question__title sv-header-flex";
-        newModel.css.question.titleOnError = "sv-question__title--error sv-error-color-fix";
-    }
-    return newModel
+type surveyModelContainer = {
+    surveyModel: Model;
 }
 
 function SurveyContainerComponent({ loadFrom }) {
-    const [surveyModel, setSurveyModel] = useState<Model>();  // note that this is never updated and we abuse that fact by adding extra state to the surveyModel
+    const [surveyModelContainer, setSurveyModel] = useState<surveyModelContainer>();  // note that this is never updated and we abuse that fact by adding extra state to the surveyModel
+    const surveyModel = surveyModelContainer?.surveyModel;
     const { year, nren } = useParams();  // nren stays empty for inspect and try
     const [error, setError] = useState<string>('loading survey...');
     const { user } = useContext(userContext);
@@ -96,11 +90,11 @@ function SurveyContainerComponent({ loadFrom }) {
             // setPageNo(json['page']);
             survey.mode = json['mode'];
 
-            survey['lockedBy'] = json['locked_by'];
-            survey['status'] = json['status'];
-            survey['editAllowed'] = json['edit_allowed'];
+            survey.lockedBy = json['locked_by'];
+            survey.status = json['status'];
+            survey.editAllowed = json['edit_allowed'];
 
-            setSurveyModel(survey);
+            setSurveyModel({ surveyModel: survey });
         }
 
         getModel().catch(error => setError('Error when loading survey: ' + error.message)).then(() => {
@@ -134,11 +128,11 @@ function SurveyContainerComponent({ loadFrom }) {
             if (!response.ok) {
                 return json['message'];
             }
-            const newModel = modifyModel(survey);
-            newModel.mode = json['mode'];
-            newModel['lockedBy'] = json['locked_by'];
-            newModel['status'] = json['status'];
-            setSurveyModel(newModel);
+
+            surveyModel.mode = json['mode'];
+            surveyModel.lockedBy = json['locked_by'];
+            surveyModel.status = json['status'];
+            setSurveyModel({ surveyModel: surveyModel });
         } catch (e) {
             return "Unknown Error: " + (e as Error).message;
         }
@@ -218,14 +212,13 @@ function SurveyContainerComponent({ loadFrom }) {
             for (const questionName in json["verification_status"]) {
                 surveyModel['verificationStatus'].set(questionName, json["verification_status"][questionName]);
             }
-            const newModel = modifyModel(surveyModel);
-            newModel.data = json['data'];
-            newModel.clearIncorrectValues(true);
-            newModel.mode = json['mode'];
-            newModel['lockedBy'] = json['locked_by']
-            newModel['lockUUID'] = json['lock_uuid'];
-            newModel['status'] = json['status'];
-            setSurveyModel(newModel);
+            surveyModel.data = json['data'];
+            surveyModel.clearIncorrectValues(true);
+            surveyModel.mode = json['mode'];
+            surveyModel.lockedBy = json['locked_by']
+            surveyModel.lockUUID = json['lock_uuid'];
+            surveyModel.status = json['status'];
+            setSurveyModel({ surveyModel: surveyModel });
             // Validate when we start editing to ensure invalid fields are corrected by the user
             const allFieldsValid = validateWithAnswerVerification(surveyModel.validate.bind(surveyModel, true, true), false);
             if (!allFieldsValid) {
@@ -241,11 +234,10 @@ function SurveyContainerComponent({ loadFrom }) {
                 toast("Failed releasing lock: " + json['message']);
                 return;
             }
-            const newModel = modifyModel(surveyModel);
-            newModel.mode = json['mode'];
-            newModel['lockedBy'] = json['locked_by'];
-            newModel['status'] = json['status'];
-            setSurveyModel(newModel);
+            surveyModel.mode = json['mode'];
+            surveyModel.lockedBy = json['locked_by'];
+            surveyModel.status = json['status'];
+            setSurveyModel({ surveyModel: surveyModel });
         },
         'validatePage': () => {
             const validSurvey = validateWithAnswerVerification(surveyModel.validatePage.bind(surveyModel));
@@ -257,9 +249,8 @@ function SurveyContainerComponent({ loadFrom }) {
 
     const onPageChange = (page) => {
         if (!surveyModel) return;
-        const newModel = modifyModel(surveyModel);
-        newModel.currentPageNo = page;
-        setSurveyModel(newModel);
+        surveyModel.currentPageNo = page;
+        setSurveyModel({ surveyModel: surveyModel });
     }
 
     return (
@@ -269,8 +260,8 @@ function SurveyContainerComponent({ loadFrom }) {
                 <Toaster />
                 <Prompt message="Are you sure you want to leave this page? Information you've entered may not be saved."
                     when={() => { return surveyModel.mode == 'edit' && !!nren; }} onPageExit={onPageExitThroughRouter} />
-                <SurveyNavigationComponent surveyModel={surveyModel} surveyActions={surveyActions} year={year} nren={nren} onPageChange={onPageChange}>
-                    <SurveyComponent surveyModel={surveyModel} />
+                <SurveyNavigationComponent surveyModelContainer={surveyModelContainer} surveyActions={surveyActions} year={year} nren={nren} onPageChange={onPageChange}>
+                    <SurveyComponent surveyModelContainer={surveyModelContainer} />
                 </SurveyNavigationComponent>
             </Container>
         </>

compendium-frontend/src/survey/SurveyNavigationComponent.tsx

@@ -3,8 +3,9 @@ import ProgressBar from 'compendium/survey/ProgressBar';
 import { Container, Row } from "react-bootstrap";
 import { userContext } from "compendium/providers/UserProvider";
 
-function SurveyNavigationComponent({ surveyModel, surveyActions, year, nren, children, onPageChange
- }) {   
+function SurveyNavigationComponent({ surveyModelContainer, surveyActions, year, nren, children, onPageChange
+ }) {
+    const { surveyModel } = surveyModelContainer;
     const { user: loggedInUser } = useContext(userContext);
     const pageNo = surveyModel?.currentPageNo ?? 0;
     const editing = surveyModel?.mode === 'edit';
@@ -15,8 +16,6 @@ function SurveyNavigationComponent({ surveyModel, surveyActions, year, nren, chi
 
     const doSurveyAction = async (action) => {
         await surveyActions[action]();
-        // onPageChange triggers a re-render, just keep the same page number
-        onPageChange(surveyModel.currentPageNo);
     }
 
     const renderButton = (text, action) => {