feat(speech): update speech with language change

src/pages/Settings/SettingSpeechItems.tsx

@@ -6,17 +6,31 @@ import {
   IonRadioGroup,
   IonRadio,
 } from '@ionic/react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectCurrentSpeech } from '../../data/user/user.selector';
 import { setCurrentSpeechName } from '../../data/user/user.slice';
-import { SPEECH_LANGUAGES_SUPPORTED } from '../../data/speech/speech.constants';
+import {
+  SPEECH_LANGUAGES_SUPPORTED,
+  SPEECH_LANGUAGE_DEFAULT,
+} from '../../data/speech/speech.constants';
 
 export const SettingsSpeechItems: React.FC = () => {
-  const { t } = useTranslation();
+  const { i18n, t } = useTranslation();
   const dispatch = useDispatch();
-  const { name } = useSelector(selectCurrentSpeech);
+  const { language, name } = useSelector(selectCurrentSpeech);
+
+  useEffect(() => {
+    if (!language.startsWith(i18n.language)) {
+      const speechName =
+        SPEECH_LANGUAGES_SUPPORTED.find((speechLanguge) =>
+          speechLanguge.language.startsWith(i18n.language),
+        )?.name || SPEECH_LANGUAGE_DEFAULT.name;
+      dispatch(setCurrentSpeechName({ currentSpeechName: speechName }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [i18n.language]);
 
   return (
     <IonRadioGroup
@@ -32,7 +46,10 @@ export const SettingsSpeechItems: React.FC = () => {
       </IonListHeader>
       {SPEECH_LANGUAGES_SUPPORTED.map((speech, speechIndex) => {
         return (
-          <IonItem key={speechIndex}>
+          <IonItem
+            disabled={!speech.language.startsWith(i18n.language)}
+            key={speechIndex}
+          >
             <IonLabel>
               <IonText>{speech.displayName}</IonText>
             </IonLabel>