Correctly handle the language in the exercise edit page 🙄

Fixes wger-project/wger/issues/1742
wger-project · Dec 12, 2024 · 371b168 · 371b168
1 parent dc270ed
commit 371b168
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/src/components/Exercises/Detail/ExerciseDetails.tsx b/src/components/Exercises/Detail/ExerciseDetails.tsx
@@ -4,24 +4,21 @@ import { LoadingWidget } from "components/Core/LoadingWidget/LoadingWidget";
 import { ExerciseDetailEdit } from "components/Exercises/Detail/ExerciseDetailEdit";
 import { ExerciseDetailView } from "components/Exercises/Detail/ExerciseDetailView";
 import { Language } from "components/Exercises/models/language";
-import { Translation } from "components/Exercises/models/translation";
 import { useLanguageQuery } from "components/Exercises/queries";
 import { parseInt } from "lodash";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { getExercise, getExercisesForVariation, getLanguageByShortName, } from "services";
-import { QUERY_EXERCISE_DETAIL, QUERY_EXERCISE_VARIATIONS, } from "utils/consts";
-import { boolean } from "yup";
+import { ENGLISH_LANGUAGE_OBJ, QUERY_EXERCISE_DETAIL, QUERY_EXERCISE_VARIATIONS, } from "utils/consts";
 import { Head } from "./Head";
 
 export const PaddingBox = () => {
     return <Box sx={{ height: 40 }} />;
 };
 
 export const ExerciseDetails = () => {
-    const [language, setLanguage] = useState<Language>();
-    const [currentTranslation, setCurrentTranslation] = useState<Translation>();
+    const [language, setLanguage] = useState<Language>(ENGLISH_LANGUAGE_OBJ);
     const [editMode, setEditMode] = useState<boolean>(false);
 
     const params = useParams<{ baseID: string }>();
@@ -35,21 +32,6 @@ export const ExerciseDetails = () => {
         queryKey: [QUERY_EXERCISE_DETAIL, exerciseId],
         queryFn: () => getExercise(exerciseId),
         enabled: languageQuery.isSuccess,
-
-
-        // onSuccess: (exercise: Exercise) => {
-        //     const currentUserLanguage = getLanguageByShortName(
-        //         i18n.language,
-        //         languageQuery.data!
-        //     );
-        //
-        //     // get exercise translation from received exercise and set it
-        //     if (currentUserLanguage) {
-        //         const translation = exercise.getTranslation(currentUserLanguage);
-        //         setCurrentTranslation(translation);
-        //     }
-        //     setLanguage(currentUserLanguage);
-        // }
     });
 
     const variationsQuery = useQuery({
@@ -58,11 +40,20 @@ export const ExerciseDetails = () => {
         enabled: exerciseQuery.isSuccess
     });
 
-    if (
-        exerciseQuery.isError ||
-        languageQuery.isError ||
-        variationsQuery.isError
-    ) {
+    React.useEffect(() => {
+        if (languageQuery.data === undefined) {
+            return;
+        }
+
+        // Set the currently selected language
+        const currentUserLanguage = getLanguageByShortName(
+            i18n.language,
+            languageQuery.data!
+        );
+        setLanguage(currentUserLanguage!);
+    }, [languageQuery.data]);
+
+    if (exerciseQuery.isError || languageQuery.isError || variationsQuery.isError) {
         navigate("/not-found");
         return null;
     }
@@ -72,8 +63,9 @@ export const ExerciseDetails = () => {
             lang.nameShort,
             languageQuery.data!
         );
-        setLanguage(language);
-        setCurrentTranslation(exerciseQuery.data?.getTranslation(lang));
+        if (language !== undefined) {
+            setLanguage(language);
+        }
     };
 
     const variations = variationsQuery.isSuccess

diff --git a/src/utils/consts.ts b/src/utils/consts.ts
@@ -1,7 +1,9 @@
+import { Language } from "components/Exercises/models/language";
 import { MIN_ACCOUNT_AGE_TO_TRUST, TIME_ZONE } from "config";
 
 export const ENGLISH_LANGUAGE_ID = 2;
 export const ENGLISH_LANGUAGE_CODE = 'en';
+export const ENGLISH_LANGUAGE_OBJ = new Language(ENGLISH_LANGUAGE_ID, ENGLISH_LANGUAGE_CODE, 'English');
 
 export const MIN_ACCOUNT_AGE = MIN_ACCOUNT_AGE_TO_TRUST || 21;