From eed82f7c4416bcfac719f2d0ecaff7569b659441 Mon Sep 17 00:00:00 2001
From: Ahmed Hussein <ahmedhussein.developer@gmail.com>
Date: Sun, 7 Jul 2024 16:58:26 +0300
Subject: [PATCH] QF-613-word-by-word-in-settings-dynamic-list (#2185)

* change static list to dynamic list

* address PR comments

* Use lodash/uniqBy

* remove util function and test cases

* fix loading and error states

* remove unused imports

---------

Co-authored-by: Osama Sayed <toto777_90@hotmail.com>
---
 src/api.ts                                    |  5 ++-
 .../SettingsDrawer/WordByWordSection.tsx      | 45 ++++++++++++-------
 types/AvailableWordByWordTranslation.ts       |  9 +++-
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/api.ts b/src/api.ts
index 010b2eaa36..3f268a0cdc 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -45,6 +45,7 @@ import {
   ReciterResponse,
   TafsirContentResponse,
   PagesLookUpResponse,
+  WordByWordTranslationsResponse,
 } from 'types/ApiResponses';
 import AudioData from 'types/AudioData';
 import { MushafLines, QuranFont } from 'types/QuranReader';
@@ -100,11 +101,11 @@ export const getAvailableTranslations = async (language: string): Promise<Transl
  *
  * @param {string} language we use this to get translated names of authors in specific the current language.
  *
- * @returns {Promise<TranslationsResponse>}
+ * @returns {Promise<WordByWordTranslationsResponse>}
  */
 export const getAvailableWordByWordTranslations = async (
   language: string,
-): Promise<TranslationsResponse> => fetcher(makeWordByWordTranslationsUrl(language));
+): Promise<WordByWordTranslationsResponse> => fetcher(makeWordByWordTranslationsUrl(language));
 
 /**
  * Get the current available languages with the name translated in the current language.
diff --git a/src/components/Navbar/SettingsDrawer/WordByWordSection.tsx b/src/components/Navbar/SettingsDrawer/WordByWordSection.tsx
index 1afd710038..b23af7c6aa 100644
--- a/src/components/Navbar/SettingsDrawer/WordByWordSection.tsx
+++ b/src/components/Navbar/SettingsDrawer/WordByWordSection.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable i18next/no-literal-string */
 /* eslint-disable max-lines */
-import React from 'react';
 
 import { Action } from '@reduxjs/toolkit';
+import uniqBy from 'lodash/uniqBy';
 import { useRouter } from 'next/router';
 import Trans from 'next-translate/Trans';
 import useTranslation from 'next-translate/useTranslation';
@@ -11,6 +11,7 @@ import { shallowEqual, useSelector } from 'react-redux';
 import Section from './Section';
 import styles from './WordByWordSection.module.scss';
 
+import DataFetcher from '@/components/DataFetcher';
 import Counter from '@/dls/Counter/Counter';
 import Checkbox from '@/dls/Forms/Checkbox/Checkbox';
 import Select, { SelectSize } from '@/dls/Forms/Select';
@@ -18,10 +19,10 @@ import Link, { LinkVariant } from '@/dls/Link/Link';
 import Separator from '@/dls/Separator/Separator';
 import usePersistPreferenceGroup from '@/hooks/auth/usePersistPreferenceGroup';
 import {
-  setSelectedWordByWordLocale,
   selectReadingPreferences,
-  setWordByWordDisplay,
+  setSelectedWordByWordLocale,
   setWordByWordContentType,
+  setWordByWordDisplay,
   setWordClickFunctionality,
 } from '@/redux/slices/QuranReader/readingPreferences';
 import {
@@ -31,19 +32,15 @@ import {
   increaseWordByWordFontScale,
   selectWordByWordFontScale,
 } from '@/redux/slices/QuranReader/styles';
+import { WordByWordTranslationsResponse } from '@/types/ApiResponses';
 import QueryParam from '@/types/QueryParam';
 import { WordByWordDisplay, WordByWordType, WordClickFunctionality } from '@/types/QuranReader';
+import { makeWordByWordTranslationsUrl } from '@/utils/apiPaths';
 import { removeItemFromArray } from '@/utils/array';
 import { logValueChange } from '@/utils/eventLogger';
 import { getLocaleName } from '@/utils/locale';
 import PreferenceGroup from 'types/auth/PreferenceGroup';
 
-export const WBW_LOCALES = ['en', 'ur', 'id', 'bn', 'tr', 'fa', 'hi', 'ta', 'inh'];
-export const WORD_BY_WORD_LOCALES_OPTIONS = WBW_LOCALES.map((locale) => ({
-  label: getLocaleName(locale),
-  value: locale,
-}));
-
 const WordByWordSection = () => {
   const { t, lang } = useTranslation('common');
   const {
@@ -218,14 +215,28 @@ const WordByWordSection = () => {
       <Separator className={styles.separator} />
       <Section.Row>
         <Section.Label>{t('trans-lang')}</Section.Label>
-        <Select
-          size={SelectSize.Small}
-          id="wordByWord"
-          name="wordByWord"
-          options={WORD_BY_WORD_LOCALES_OPTIONS}
-          value={wordByWordLocale}
-          disabled={shouldDisableLanguageSelect}
-          onChange={onWordByWordLocaleChange}
+        <DataFetcher
+          queryKey={makeWordByWordTranslationsUrl(lang)}
+          render={(data: WordByWordTranslationsResponse) => {
+            const uniqueData = uniqBy(data.wordByWordTranslations, 'isoCode');
+
+            const options = uniqueData.map(({ isoCode }) => ({
+              label: getLocaleName(isoCode),
+              value: isoCode,
+            }));
+
+            return (
+              <Select
+                size={SelectSize.Small}
+                id="wordByWord"
+                name="wordByWord"
+                options={options}
+                value={wordByWordLocale}
+                disabled={shouldDisableLanguageSelect}
+                onChange={onWordByWordLocaleChange}
+              />
+            );
+          }}
         />
       </Section.Row>
       <Section.Footer>
diff --git a/types/AvailableWordByWordTranslation.ts b/types/AvailableWordByWordTranslation.ts
index 2b81d61deb..6bf7408b73 100644
--- a/types/AvailableWordByWordTranslation.ts
+++ b/types/AvailableWordByWordTranslation.ts
@@ -1,6 +1,13 @@
 import AvailableTranslation from './AvailableTranslation';
+import TranslatedName from './TranslatedName';
 
 interface AvailableWordByWordTranslation extends AvailableTranslation {
-  isoCode?: string;
+  id: number;
+  name: string;
+  authorName: string;
+  slug: string;
+  languageName: string;
+  isoCode: string;
+  translatedName: TranslatedName;
 }
 export default AvailableWordByWordTranslation;