diff --git a/packages/admin-ui/src/lib/core/src/app.component.ts b/packages/admin-ui/src/lib/core/src/app.component.ts index c07cca28f1..239ebdedf5 100644 --- a/packages/admin-ui/src/lib/core/src/app.component.ts +++ b/packages/admin-ui/src/lib/core/src/app.component.ts @@ -1,10 +1,10 @@ import { DOCUMENT } from '@angular/common'; -import { Component, HostBinding, Inject, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import { Component, Inject, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { filter, map, switchMap } from 'rxjs/operators'; import { DataService } from './data/providers/data.service'; +import { ServerConfigService } from './data/server-config'; import { LocalStorageService } from './providers/local-storage/local-storage.service'; @Component({ @@ -18,6 +18,7 @@ export class AppComponent implements OnInit { constructor( private dataService: DataService, + private serverConfigService: ServerConfigService, private localStorageService: LocalStorageService, @Inject(DOCUMENT) private document?: any, ) { @@ -36,11 +37,30 @@ export class AppComponent implements OnInit { this._document?.body.setAttribute('data-theme', theme); }); + // Once logged in, keep the localStorage "contentLanguageCode" in sync with the + // uiState. Also perform a check to ensure that the current contentLanguage is + // one of the availableLanguages per GlobalSettings. this.dataService.client - .uiState() - .mapStream(data => data.uiState.contentLanguage) - .subscribe(code => { - this.localStorageService.set('contentLanguageCode', code); + .userStatus() + .mapStream(({ userStatus }) => userStatus.isLoggedIn) + .pipe( + filter(loggedIn => loggedIn === true), + switchMap(() => { + return this.dataService.client.uiState().mapStream(data => data.uiState.contentLanguage); + }), + switchMap(contentLang => { + return this.serverConfigService + .getAvailableLanguages() + .pipe(map(available => [contentLang, available] as const)); + }), + ) + .subscribe({ + next: ([contentLanguage, availableLanguages]) => { + this.localStorageService.set('contentLanguageCode', contentLanguage); + if (availableLanguages.length && !availableLanguages.includes(contentLanguage)) { + this.dataService.client.setContentLanguage(availableLanguages[0]).subscribe(); + } + }, }); } } diff --git a/packages/admin-ui/src/lib/core/src/data/data.module.ts b/packages/admin-ui/src/lib/core/src/data/data.module.ts index ff170f50a4..65869e05ed 100644 --- a/packages/admin-ui/src/lib/core/src/data/data.module.ts +++ b/packages/admin-ui/src/lib/core/src/data/data.module.ts @@ -8,7 +8,6 @@ import { createUploadLink } from 'apollo-upload-client'; import { getAppConfig } from '../app.config'; import { introspectionResult } from '../common/introspection-result-wrapper'; -import { getDefaultUiLanguage } from '../common/utilities/get-default-ui-language'; import { LocalStorageService } from '../providers/local-storage/local-storage.service'; import { CheckJobsLink } from './check-jobs-link'; @@ -80,29 +79,6 @@ export function createApollo( }; } -/** - * On bootstrap, this function will fetch the available languages from the GlobalSettings and compare it - * to the currently-configured content language to ensure that the content language is actually one - * of the available languages. - */ -export function initContentLanguage( - serverConfigService: ServerConfigService, - localStorageService: LocalStorageService, - dataService: DataService, -): () => Promise { - // Why store in a intermediate variable? https://github.com/angular/angular/issues/23629 - const result = async () => { - const availableLanguages = await serverConfigService.getAvailableLanguages().toPromise(); - const contentLang = localStorageService.get('contentLanguageCode') || getDefaultUiLanguage(); - if (availableLanguages.length && !availableLanguages.includes(contentLang)) { - dataService.client.setContentLanguage(availableLanguages[0]).subscribe(() => { - localStorageService.set('contentLanguageCode', availableLanguages[0]); - }); - } - }; - return result; -} - /** * The DataModule is responsible for all API calls *and* serves as the source of truth for global app * state via the apollo-link-state package. @@ -128,12 +104,6 @@ export function initContentLanguage( useFactory: initializeServerConfigService, deps: [ServerConfigService], }, - { - provide: APP_INITIALIZER, - multi: true, - useFactory: initContentLanguage, - deps: [ServerConfigService, LocalStorageService, DataService], - }, ], }) export class DataModule {}