Properly handle language in participant interview

And ignore the reviewer's

fixes #1251

Only the participant's interview tracks language changes in the
paradata, so the `useEffect` hook is moved from the `Survey` component
to `SurveyParticipant`. This will affect both respondent and
interviewer. Reviewer's language changes will be ignored.

Set the language when the interview is activated, ie when first
activating an interview, or when the interview is opened again, but the
language is different from the previous one, the language of the
interview will be updated to the current interface's.

Author: tahini

packages/evolution-frontend/src/actions/Survey.ts

@@ -28,6 +28,7 @@ const fetch = async (url, opts) => {
     return await fetchRetry(url, Object.assign({ retry: { retries: 4 }, ...opts }));
 };
 
+import i18n from '../config/i18n.config';
 import { _isBlank } from 'chaire-lib-common/lib/utils/LodashExtensions';
 import * as surveyHelper from 'evolution-common/lib/utils/helpers';
 import { prepareSectionWidgets } from './utils';
@@ -768,6 +769,13 @@ export const startSetInterview = (
                     if (existingBrowserUa !== newBrowserUa) {
                         valuesByPath['response._browser'] = browserTechData;
                     }
+
+                    // Set or update the current language if required
+                    const previousLanguage = _get(interview, 'response._language', null);
+                    const currentLanguage = i18n.language;
+                    if (_isBlank(previousLanguage) || previousLanguage !== currentLanguage) {
+                        valuesByPath['response._language'] = currentLanguage;
+                    }
                     // Set the interview in the state first
                     dispatch(setInterviewState(interview));
 

packages/evolution-frontend/src/components/pageParts/Survey.tsx

@@ -71,16 +71,6 @@ const Survey: React.FC<SurveyProps> = (props: SurveyProps) => {
         }
     }, [i18n.language]);
 
-    React.useEffect(() => {
-        const languageChange = (language) => {
-            props.startUpdateInterview({ userAction: { type: 'languageChange', language } });
-        };
-        i18n.on('languageChanged', languageChange);
-        return () => {
-            i18n.off('languageChanged', languageChange);
-        };
-    }, [props.startUpdateInterview]);
-
     const onChangeSection = (
         targetSection: string,
         activeSection: string,

packages/evolution-frontend/src/components/pages/SurveyParticipant.tsx

@@ -31,6 +31,7 @@ import { ThunkDispatch } from 'redux-thunk';
 import { SurveyAction } from '../../store/survey';
 import Survey from '../pageParts/Survey';
 import { SurveyContext } from '../../contexts/SurveyContext';
+import { useTranslation } from 'react-i18next';
 
 type StartSetInterview = (
     activeSection: string | undefined,
@@ -46,6 +47,7 @@ const SurveyParticipant: React.FC = () => {
     const navigate = useNavigate();
     const { sectionShortname: pathSectionShortname, uuid: surveyUuid } = useParams();
     const { sections } = useContext(SurveyContext);
+    const { i18n } = useTranslation();
 
     const { state: interviewContext } = React.useContext(InterviewContext);
 
@@ -87,6 +89,16 @@ const SurveyParticipant: React.FC = () => {
         );
     }, [surveyUuid, dispatch]); // Re-run when survey uuid changes
 
+    React.useEffect(() => {
+        const languageChange = (language) => {
+            startUpdateInterviewAction({ userAction: { type: 'languageChange', language } });
+        };
+        i18n.on('languageChanged', languageChange);
+        return () => {
+            i18n.off('languageChanged', languageChange);
+        };
+    }, [startUpdateInterviewAction]);
+
     // FIXME See if we can use react Suspense instead of this logic for the loading page (https://react.dev/reference/react/Suspense)
     if (!interviewLoaded || !interview || !interview.sectionLoaded) {
         surveyHelperNew.devLog('%c rendering empty survey', 'background: rgba(0,0,0,0.1);');