Fix duplicated translations languge name

quran · Sep 9, 2024 · 792d1f5 · 792d1f5
1 parent 24c38e5
commit 792d1f5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/components/MediaMaker/Settings/TranslationSetting.tsx b/src/components/MediaMaker/Settings/TranslationSetting.tsx
@@ -14,7 +14,7 @@ import IconCancel from '@/icons/cancel.svg';
 import IconSearch from '@/icons/search.svg';
 import { MediaSettingsProps } from '@/types/Media/MediaSettings';
 import { makeTranslationsUrl } from '@/utils/apiPaths';
-import filterTranslations from '@/utils/filter-translations';
+import filterTranslations, { getTranslations } from '@/utils/filter-translations';
 import { getLocaleName } from '@/utils/locale';
 import { TranslationsResponse } from 'types/ApiResponses';
 import AvailableTranslation from 'types/AvailableTranslation';
@@ -107,7 +107,10 @@ const TranslationSelectionBody: React.FC<Props> = ({ selectedTranslations, onSet
             ? filterTranslations(data.translations, searchQuery)
             : data.translations;
 
-          const translationByLanguages = groupBy(filteredTranslations, 'languageName');
+          const translationByLanguages = groupBy(
+            getTranslations(filteredTranslations),
+            'languageName',
+          );
           const selectedTranslationLanguage = getLocaleName(lang).toLowerCase();
           const selectedTranslationGroup = translationByLanguages[selectedTranslationLanguage];
           const translationByLanguagesWithoutSelectedLanguage = omit(translationByLanguages, [

diff --git a/src/components/Navbar/SettingsDrawer/TranslationSelectionBody.tsx b/src/components/Navbar/SettingsDrawer/TranslationSelectionBody.tsx
@@ -24,7 +24,7 @@ import {
 import SearchQuerySource from '@/types/SearchQuerySource';
 import { makeTranslationsUrl } from '@/utils/apiPaths';
 import { logValueChange, logItemSelectionChange, logEmptySearchResults } from '@/utils/eventLogger';
-import filterTranslations from '@/utils/filter-translations';
+import filterTranslations, { getTranslations } from '@/utils/filter-translations';
 import { getLocaleName } from '@/utils/locale';
 import { TranslationsResponse } from 'types/ApiResponses';
 import PreferenceGroup from 'types/auth/PreferenceGroup';
@@ -147,7 +147,10 @@ const TranslationSelectionBody = () => {
             });
           }
 
-          const translationByLanguages = groupBy(filteredTranslations, 'languageName');
+          const translationByLanguages = groupBy(
+            getTranslations(filteredTranslations),
+            'languageName',
+          );
           const selectedTranslationLanguage = getLocaleName(lang).toLowerCase();
           const selectedTranslationGroup = translationByLanguages[selectedTranslationLanguage];
           const translationByLanguagesWithoutSelectedLanguage = omit(translationByLanguages, [

diff --git a/src/utils/filter-translations.ts b/src/utils/filter-translations.ts
@@ -15,4 +15,19 @@ const filterTranslations = (
   return filteredTranslations;
 };
 
+/**
+ * Transforms an array of translations by converting the language name to lowercase.
+ * This is to temporarily fix the issue when BE returns the same language names
+ * but in different cases (e.g. 'Dutch' and 'dutch').
+ *
+ * @param {AvailableTranslation[]} translations - The array of translations to be transformed.
+ * @returns {AvailableTranslation[]} The transformed array of translations with language names in lowercase.
+ */
+export const getTranslations = (translations: AvailableTranslation[]): AvailableTranslation[] => {
+  return translations.map((translation) => ({
+    ...translation,
+    languageName: translation.languageName.toLowerCase(),
+  }));
+};
+
 export default filterTranslations;