refactor: use APP_INITIALIZER for settings init

This commit is contained in:
Rainer Killinger
2021-03-16 12:31:19 +01:00
parent 7d471409cb
commit 550b376a97
3 changed files with 42 additions and 25 deletions

View File

@@ -16,14 +16,10 @@ import {Component} from '@angular/core';
import {SplashScreen} from '@ionic-native/splash-screen/ngx'; import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx'; import {StatusBar} from '@ionic-native/status-bar/ngx';
import {Platform} from '@ionic/angular'; import {Platform} from '@ionic/angular';
import {TranslateService} from '@ngx-translate/core';
import {SCLanguageCode} from '@openstapps/core';
import {NGXLogger} from 'ngx-logger'; import {NGXLogger} from 'ngx-logger';
import {ConfigProvider} from './modules/config/config.provider'; import {ConfigProvider} from './modules/config/config.provider';
import {SettingsProvider} from './modules/settings/settings.provider'; import {SettingsProvider} from './modules/settings/settings.provider';
import {ThingTranslateService} from './translation/thing-translate.service';
import {initLogger} from './_helpers/ts-logger';
/** /**
* TODO * TODO
*/ */
@@ -60,14 +56,9 @@ export class AppComponent {
constructor(private readonly platform: Platform, constructor(private readonly platform: Platform,
private readonly statusBar: StatusBar, private readonly statusBar: StatusBar,
private readonly splashScreen: SplashScreen, private readonly splashScreen: SplashScreen,
private readonly translateService: TranslateService,
private readonly thingTranslateService: ThingTranslateService,
private readonly settingsProvider: SettingsProvider, private readonly settingsProvider: SettingsProvider,
private readonly configProvider: ConfigProvider, private readonly configProvider: ConfigProvider,
private readonly logger: NGXLogger) { private readonly logger: NGXLogger) {
initLogger(logger);
// this language will be used as a fallback when a translation isn't found in the current language
this.translateService.setDefaultLang('en');
this.initializeApp(); this.initializeApp();
} }
@@ -102,18 +93,6 @@ export class AppComponent {
'credentials', 'credentials',
'others', 'others',
]); ]);
try {
// set language from settings
if (this.configProvider.firstSession) {
await this.settingsProvider.setSettingValue('profile', 'language', this.translateService.getBrowserLang());
}
const languageCode = (await this.settingsProvider.getValue('profile', 'language')) as string;
this.thingTranslateService.translator.language = languageCode as SCLanguageCode;
this.translateService.use(languageCode);
} catch (error) {
this.logger.warn(error);
}
}); });
} }
} }

View File

@@ -15,31 +15,63 @@
import {CommonModule, HashLocationStrategy, LocationStrategy, registerLocaleData} from '@angular/common'; import {CommonModule, HashLocationStrategy, LocationStrategy, registerLocaleData} from '@angular/common';
import {HttpClient} from '@angular/common/http'; import {HttpClient} from '@angular/common/http';
import localeDe from '@angular/common/locales/de'; import localeDe from '@angular/common/locales/de';
import {NgModule, Provider} from '@angular/core'; import {APP_INITIALIZER, NgModule, Provider} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser'; import {BrowserModule} from '@angular/platform-browser';
import {RouteReuseStrategy} from '@angular/router'; import {RouteReuseStrategy} from '@angular/router';
import {SplashScreen} from '@ionic-native/splash-screen/ngx'; import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx'; import {StatusBar} from '@ionic-native/status-bar/ngx';
import {IonicModule, IonicRouteStrategy} from '@ionic/angular'; import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader'; import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import moment from 'moment'; import moment from 'moment';
import 'moment/min/locales'; import 'moment/min/locales';
import {LoggerModule, NgxLoggerLevel} from 'ngx-logger'; import {LoggerModule, NGXLogger, NgxLoggerLevel} from 'ngx-logger';
import {environment} from '../environments/environment'; import {environment} from '../environments/environment';
import {AppRoutingModule} from './app-routing.module'; import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component'; import {AppComponent} from './app.component';
import {ConfigModule} from './modules/config/config.module'; import {ConfigModule} from './modules/config/config.module';
import {ConfigProvider} from './modules/config/config.provider';
import {DataModule} from './modules/data/data.module'; import {DataModule} from './modules/data/data.module';
import {MenuModule} from './modules/menu/menu.module'; import {MenuModule} from './modules/menu/menu.module';
import {NewsModule} from './modules/news/news.module'; import {NewsModule} from './modules/news/news.module';
import {SettingsModule} from './modules/settings/settings.module'; import {SettingsModule} from './modules/settings/settings.module';
import {SettingsProvider} from './modules/settings/settings.provider';
import {StorageModule} from './modules/storage/storage.module'; import {StorageModule} from './modules/storage/storage.module';
import {ThingTranslateModule} from './translation/thing-translate.module'; import {ThingTranslateModule} from './translation/thing-translate.module';
import {fakeBackendProvider} from './_helpers/fake-backend.interceptor'; import {fakeBackendProvider} from './_helpers/fake-backend.interceptor';
import {initLogger} from './_helpers/ts-logger';
registerLocaleData(localeDe); registerLocaleData(localeDe);
/**
* Initializes settings from Config before other components
*
* @param settingsProvider provider of settings (e.g. language that has been set)
*/
export function initSettingsFactory(logger: NGXLogger,
settingsProvider: SettingsProvider,
configProvider: ConfigProvider,
translateService: TranslateService) {
return async () => {
initLogger(logger);
await settingsProvider.init();
try {
// set language from settings
if (configProvider.firstSession) {
await settingsProvider.setSettingValue('profile', 'language', translateService.getBrowserLang());
}
const languageCode = (await settingsProvider.getValue('profile', 'language')) as string;
// this language will be used as a fallback when a translation isn't found in the current language
translateService.setDefaultLang('en');
translateService.use(languageCode);
moment.locale(languageCode);
} catch (error) {
logger.warn(error);
}
};
}
/** /**
* TODO * TODO
* *
@@ -60,6 +92,12 @@ const providers : Provider[] = [
provide: LocationStrategy, provide: LocationStrategy,
useClass: HashLocationStrategy, useClass: HashLocationStrategy,
}, },
{
provide: APP_INITIALIZER,
multi: true,
deps: [NGXLogger,SettingsProvider,ConfigProvider,TranslateService],
useFactory: initSettingsFactory,
},
]; ];
/** /**

View File

@@ -40,7 +40,7 @@ export class ThingTranslateService implements OnDestroy {
*/ */
constructor(private readonly translateService: TranslateService, constructor(private readonly translateService: TranslateService,
public parser: ThingTranslateParser){ public parser: ThingTranslateParser){
this.translator = new SCThingTranslator(this.translateService.getBrowserLang() as SCLanguageCode ?? 'en'); this.translator = new SCThingTranslator((translateService.currentLang ?? translateService.defaultLang) as SCLanguageCode);
/** set the default language from configuration */ /** set the default language from configuration */
this.onLangChange = this.translateService.onLangChange.subscribe((event: LangChangeEvent) => { this.onLangChange = this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
this.translator.language = event.lang as keyof SCTranslations<SCLanguage>; this.translator.language = event.lang as keyof SCTranslations<SCLanguage>;