clean up the surveycomponent and fix warning about editing state during render

survey-frontend/src/SurveyComponent.tsx

-import React from "react";
+import React, { useCallback } from "react";
 import { Question, FunctionFactory } from "survey-core";
 import { Survey } from "survey-react-ui";
 import { VerificationStatus } from './Schema';
 
-function SurveyComponent({ surveyModel, verificationStatus }) {
+
+function customDescriptionCallback(_, options) {
+    // get the customDescription for matrix rows and set it in the title
+    // attribute so that it shows up as a hover popup
+    if (options.column['indexValue'] == 0 && 'item' in options.row) {
+        const item = options.row['item'] as object;
+        if (item['customDescription'] !== undefined) {
+            options.htmlElement.parentElement?.children[0].setAttribute("title", item['customDescription']);
+        }
+    }
+}
 
 function validateWebsiteUrl(params) {
     const value = params[0];
@@ -18,16 +28,16 @@ function SurveyComponent({ surveyModel, verificationStatus }) {
     }
 }
 
-    surveyModel.css = {
-        question: {
-            title: "sv-title sv-question__title sv-header-flex",
-            titleOnError: "sv-question__title--error sv-error-color-fix"
+function hideCheckboxLabels(_, options) {
+    if (options.question.hideCheckboxLabels) {
+        const classes = options.cssClasses;
+        classes.root += " hidden-checkbox-labels";
+    }
 }
-    };
 
-    function setVerifyButton(question: Question, state: VerificationStatus) {
+function setVerifyButton(question: Question, state: VerificationStatus, surveyModel) {
 
-        verificationStatus.current.set(question.name, state);
+    surveyModel.verificationStatus.set(question.name, state);
 
     const btn = document.createElement("button");
     btn.type = "button";
@@ -42,7 +52,7 @@ function SurveyComponent({ surveyModel, verificationStatus }) {
                 return;
             }
             question.validate();
-                setVerifyButton(question, VerificationStatus.Verified);
+            setVerifyButton(question, VerificationStatus.Verified, surveyModel);
         }
     } else {
         btn.innerHTML = "Answer updated"
@@ -60,42 +70,49 @@ function SurveyComponent({ surveyModel, verificationStatus }) {
     }
 }
 
-    FunctionFactory.Instance.register("validateWebsiteUrl", validateWebsiteUrl);
 
-    surveyModel.onAfterRenderQuestion.add(function (survey, options) {
-        const status = verificationStatus.current.get(options.question.name);
+function SurveyComponent({ surveyModel }) {
+
+    const alwaysSetVerify = useCallback((_, options) => {
+        const status = surveyModel.verificationStatus.get(options.question.name);
         if (status) {
-            setVerifyButton(options.question, status);
+            setVerifyButton(options.question, status, surveyModel);
         }
-    });
+    }, [surveyModel])
 
-    surveyModel.onValueChanged.add(function (survey, options) {
-        const currentStatus = verificationStatus.current.get(options.question.name);
+    const updateFromUnverified = useCallback((_, options) => {
+        const currentStatus = surveyModel.verificationStatus.get(options.question.name);
         if (currentStatus == VerificationStatus.Unverified) {
-            setVerifyButton(options.question, VerificationStatus.Edited);
+            setVerifyButton(options.question, VerificationStatus.Edited, surveyModel);
         }
-    });
+    }, [surveyModel])
 
-    surveyModel.onUpdateQuestionCssClasses.add(function (_, options) {
-        if (options.question.hideCheckboxLabels) {
-            const classes = options.cssClasses;
-            classes.root += " hidden-checkbox-labels";
+    if (!FunctionFactory.Instance.hasFunction("validateWebsiteUrl")) {
+        FunctionFactory.Instance.register("validateWebsiteUrl", validateWebsiteUrl);
     }
-    });
 
-    surveyModel.onMatrixAfterCellRender.add((survey, options) => {
-        // get the customDescription for matrix rows and set it in the title
-        // attribute so that it shows up as a hover popup
-        // NB I would have preferred using onAfterRenderQuestion, but unfortunately that is
-        // not always triggered on re-renders (specifically when extra column become visble or invisible)
+    if (!surveyModel.css.question.title.includes("sv-header-flex")) {
+        surveyModel.css.question.title = "sv-title sv-question__title sv-header-flex";
+        surveyModel.css.question.titleOnError = "sv-question__title--error sv-error-color-fix";
+    }
 
-        if (options.column['indexValue'] == 0 && 'item' in options.row) {
-            const item = options.row['item'] as object;
-            if (item['customDescription'] !== undefined) {
-                options.htmlElement.parentElement?.children[0].setAttribute("title", item['customDescription']);
+    if (!surveyModel.onAfterRenderQuestion.hasFunc(alwaysSetVerify)) {
+        surveyModel.onAfterRenderQuestion.add(alwaysSetVerify);
     }
+
+    if (!surveyModel.onValueChanged.hasFunc(updateFromUnverified)) {
+        surveyModel.onValueChanged.add(updateFromUnverified);
+    }
+
+    if (!surveyModel.onUpdateQuestionCssClasses.hasFunc(hideCheckboxLabels)) {
+        surveyModel.onUpdateQuestionCssClasses.add(hideCheckboxLabels);
+    }
+
+    if (!surveyModel.onMatrixAfterCellRender.hasFunc(customDescriptionCallback)) {
+        // NB I would have preferred using onAfterRenderQuestion, but unfortunately that is
+        // not always triggered on re-renders (specifically when extra column become visble or invisible)
+        surveyModel.onMatrixAfterCellRender.add(customDescriptionCallback);
     }
-    });
 
     return <Survey model={surveyModel} />
 }

survey-frontend/src/SurveyContainerComponent.tsx

-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { Container } from "react-bootstrap";
 import toast, { Toaster } from "react-hot-toast";
 import { Model, Serializer } from "survey-core";
@@ -15,14 +15,9 @@ Serializer.addProperty("question", "hideCheckboxLabels:boolean");
 
 
 function SurveyContainerComponent({ loadFrom }) {
-    // NB This component should only rerender after the model is retrieved.
-    //    If you change this to rerender more often, stuff will probably break.
-
-    const [surveyModel, setSurveyModel] = useState<Model>();
-    const verificationStatus = useRef<Map<string, VerificationStatus>>(new Map());
-    const { year, nren } = useParams();  // year is always set, nren stays empty for inspect and try
+    const [surveyModel, setSurveyModel] = useState<Model>();  // note that this is never updated and we abuse that fact by adding extra state to the surveyModel
+    const { year, nren } = useParams();  // nren stays empty for inspect and try
     const [error, setError] = useState<string>('loading survey...');
-    const lockUUID = useRef<string>();
 
     const beforeUnloadListener = useCallback((event) => {
         event.preventDefault();
@@ -53,17 +48,17 @@ function SurveyContainerComponent({ loadFrom }) {
                 }
             }
 
-
-            for (const questionName in json["verification_status"]) {
-                verificationStatus.current.set(questionName, json["verification_status"][questionName]);
-            }
-
             const survey = new Model(json['model']);
             survey.setVariable('surveyyear', year);
             survey.setVariable('previousyear', parseInt(year!) - 1);
 
             survey.showNavigationButtons = false;
 
+            survey.verificationStatus = new Map<string, VerificationStatus>();
+            for (const questionName in json["verification_status"]) {
+                survey.verificationStatus.set(questionName, json["verification_status"][questionName]);
+            }
+
             survey.data = json['data'];
             survey.clearIncorrectValues(true);  // TODO test if this really removes all old values and such
             survey.currentPageNo = json['page'];
@@ -89,11 +84,11 @@ function SurveyContainerComponent({ loadFrom }) {
         }
 
         const saveData = {
-            lock_uuid: lockUUID.current,
+            lock_uuid: survey.lockUUID,
             new_state: newState,
             data: survey.data,
             page: survey.currentPageNo,
-            verification_status: Object.fromEntries(verificationStatus.current)
+            verification_status: Object.fromEntries(survey.verificationStatus)
         };
 
         try {
@@ -116,7 +111,7 @@ function SurveyContainerComponent({ loadFrom }) {
     const validateWithAnswerVerification = (validatorFunction) => {
         let firstValidationError = '';
         const verificationValidator = (survey, options) => {
-            const status = verificationStatus.current.get(options.name);
+            const status = survey.verificationStatus.get(options.name);
             if (status == VerificationStatus.Unverified) {
                 if (firstValidationError == '') {
                     firstValidationError = options.name;
@@ -180,8 +175,8 @@ function SurveyContainerComponent({ loadFrom }) {
             surveyModel.clearIncorrectValues(true);
             surveyModel.mode = json['mode'];
             surveyModel.lockedBy = json['locked_by']
+            surveyModel.lockUUID = json['lock_uuid'];
             surveyModel.status = json['status'];
-            lockUUID.current = json['lock_uuid'];
         },
         'releaseLock': async () => {
             const response = await fetch('/api/response/unlock/' + year + '/' + nren, { method: 'POST' });
@@ -207,7 +202,7 @@ 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}>
-                <SurveyComponent surveyModel={surveyModel} verificationStatus={verificationStatus} />
+                <SurveyComponent surveyModel={surveyModel} />
             </SurveyNavigationComponent>
         </Container>
     );