Merge pull request #1162 from tomivm/fix/download-Language

Await for fetch voices and Languages during download

src/components/Settings/Language/Language.component.js

@@ -205,7 +205,7 @@ class Language extends React.Component {
 
     const isDownloadable = avaliableAndDownloadablesLangs.filter(
       downloadableLang => {
-        return downloadableLang.langCode === lang.slice(0, 2);
+        return downloadableLang.lang === lang;
       }
     )[0];
 

src/components/Settings/Language/Language.container.js

@@ -345,18 +345,6 @@ export class LanguageContainer extends Component {
       firstClick
     };
     setDownloadingLang(downloadingLangState);
-    try {
-      await this.handleSetTtsEngine(ttsName); //after tts change it fires a remounting
-    } catch {
-      //if tts hasn't any voice SetTtsEngine throw an error and the user would be alerted that should open the tts app
-      this.setState({
-        downloadingLangError: {
-          ttsError: false,
-          langError: true
-        },
-        downloadLangLoading: false
-      });
-    }
   };
 
   onErrorDialogAcepted = () => {
@@ -415,7 +403,7 @@ export class LanguageContainer extends Component {
 
     const {
       setDownloadingLang,
-      localLangs,
+
       ttsEngines,
       ttsEngine,
       history,
@@ -442,9 +430,9 @@ export class LanguageContainer extends Component {
             langError: true
           }
         });
-        return;
       }
     }
+    const localLangs = this.props.localLangs;
     if (!localLangs.includes(selectedLang)) {
       this.setState({
         downloadingLangError: {
@@ -458,7 +446,14 @@ export class LanguageContainer extends Component {
       isdownloading: false
     };
     setDownloadingLang(downloadingLangState);
-    this.setState({ selectedLang: selectedLang });
+    this.setState({
+      downloadingLangError: {
+        ttsError: false,
+        langError: false
+      },
+      selectedLang: selectedLang
+    });
+    this.refreshLanguageList();
     if (isDiferentTts) return;
     await this.handleSubmit(selectedLang);
     showNotification(
@@ -467,9 +462,7 @@ export class LanguageContainer extends Component {
     history.push('/settings');
   };
 
-  componentDidMount = async () => {
-    const { isdownloading } = this.props.downloadingLang;
-
+  refreshLanguageList = () => {
     this.setState({
       downloadablesLangs: isAndroid()
         ? this.prepareDownloadablesLenguages()
@@ -479,11 +472,35 @@ export class LanguageContainer extends Component {
             downloadablesOnly: []
           }
     });
+  };
+
+  refreshDownloadLanguage = async () => {
+    const { isdownloading } = this.props.downloadingLang;
+
+    this.refreshLanguageList();
 
     if (isdownloading) await this.lookDownloadingLang();
     this.setState({ downloadLangLoading: false });
   };
 
+  componentDidMount = async () => {
+    if (this.props.langsFetched) this.refreshDownloadLanguage();
+  };
+
+  componentDidUpdate = async prevProps => {
+    const isdownloading = this.props.downloadingLang?.isdownloading;
+    const langsFetched = this.props.langsFetched;
+
+    if (!prevProps.langsFetched && langsFetched) {
+      this.setState({ downloadLangLoading: true });
+      await this.refreshDownloadLanguage();
+    }
+    if (!isdownloading) return;
+    if (prevProps.downloadingLang.isdownloading === false) {
+      await this.refreshDownloadLanguage();
+    }
+  };
+
   render() {
     const { lang, langs, localLangs, ttsEngines, ttsEngine } = this.props;
 
@@ -539,6 +556,7 @@ export class LanguageContainer extends Component {
 
 const mapStateToProps = state => ({
   lang: state.language.lang,
+  langsFetched: state.language.langsFetched,
   langs: state.language.langs,
   localLangs: state.language.localLangs,
   ttsEngines: state.speech.ttsEngines,

src/providers/LanguageProvider/LanguageProvider.reducer.js

@@ -16,6 +16,7 @@ const initialState = {
   dir: 'ltr',
   langs: [],
   localLangs: [],
+  langsFetched: false,
   downloadingLang: { isdownloading: false }
 };
 
@@ -44,7 +45,8 @@ function languageProviderReducer(state = initialState, action) {
       return {
         ...state,
         langs: action.langs.sort(),
-        localLangs: action.localLangs || []
+        localLangs: action.localLangs || [],
+        langsFetched: true
       };
     case SET_DOWNLOADING_LANG:
       return { ...state, downloadingLang: action.downloadingLangData };

src/providers/SpeechProvider/SpeechProvider.actions.js

@@ -52,19 +52,26 @@ export function receiveTtsEngine(ttsEngineName) {
 }
 
 export function getTtsEngines() {
-  const ttsEngines = tts.getTtsEngines();
+  const ttsEngines = tts?.getTtsEngines();
   return {
     type: RECEIVE_TTS_ENGINES,
     ttsEngines
   };
 }
 
-export function setTtsEngine(ttsEngineName) {
+export function setTtsEngine(selectedTtsEngineName) {
   return async dispatch => {
     dispatch(requestTtsEngine());
     try {
-      const voices = await tts.setTtsEngine(ttsEngineName);
-      dispatch(receiveTtsEngine(ttsEngineName));
+      const engineAvailable = tts
+        .getTtsEngines()
+        .map(tts => tts.name)
+        .includes(selectedTtsEngineName);
+      const engineName = engineAvailable
+        ? selectedTtsEngineName
+        : tts.getTtsDefaultEngine().name;
+      const voices = await tts.setTtsEngine(engineName);
+      dispatch(receiveTtsEngine(engineName));
       if (!voices.length) {
         throw new Error('TTS engine does not have a language.');
       }

src/reducers.js

@@ -1,4 +1,4 @@
-import { persistCombineReducers } from 'redux-persist';
+import { persistCombineReducers, persistReducer } from 'redux-persist';
 
 import appReducer from './components/App/App.reducer';
 import languageProviderReducer from './providers/LanguageProvider/LanguageProvider.reducer';
@@ -11,13 +11,20 @@ import storage from 'redux-persist/lib/storage';
 
 const config = {
   key: 'root',
-  storage
+  storage,
+  blacklist: ['language']
+};
+
+const languagePersistConfig = {
+  key: 'language',
+  storage: storage,
+  blacklist: ['langsFetched']
 };
 
 export default function createReducer() {
   return persistCombineReducers(config, {
     app: appReducer,
-    language: languageProviderReducer,
+    language: persistReducer(languagePersistConfig, languageProviderReducer),
     speech: speechProviderReducer,
     board: boardReducer,
     communicator: communicatorReducer,