UI: Improved detect and set translation platform language

ui-ngx/src/app/app.component.ts

@@ -27,10 +27,13 @@ import { LocalStorageService } from '@core/local-storage/local-storage.service';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MatIconRegistry } from '@angular/material/icon';
 import { combineLatest } from 'rxjs';
-import { selectIsAuthenticated, selectIsUserLoaded } from '@core/auth/auth.selectors';
-import { distinctUntilChanged, filter, map, skip } from 'rxjs/operators';
+import { getCurrentAuthState, selectIsAuthenticated, selectIsUserLoaded } from '@core/auth/auth.selectors';
+import { distinctUntilChanged, filter, map, skip, tap } from 'rxjs/operators';
 import { AuthService } from '@core/auth/auth.service';
 import { svgIcons, svgIconsUrl } from '@shared/models/icon.models';
+import { isEqual } from '@core/utils';
+import { ActionSettingsChangeLanguage } from '@core/settings/settings.actions';
+import { SETTINGS_KEY } from '@core/settings/settings.effects';
 
 @Component({
   selector: 'tb-root',
@@ -92,8 +95,16 @@ export class AppComponent implements OnInit {
       this.store.pipe(select(selectIsUserLoaded))]
     ).pipe(
       map(results => ({isAuthenticated: results[0], isUserLoaded: results[1]})),
-      distinctUntilChanged(),
-      filter((data) => data.isUserLoaded ),
+      filter((data) => data.isUserLoaded),
+      distinctUntilChanged((a, b) => isEqual(a, b)),
+      tap(() => {
+        let userLang = getCurrentAuthState(this.store).userDetails?.additionalInfo?.lang ?? null;
+        if (!userLang) {
+          const settings = this.storageService.getItem(SETTINGS_KEY);
+          userLang = settings?.userLang ?? null;
+        }
+        this.notifyUserLang(userLang);
+      }),
       skip(1),
     ).subscribe((data) => {
       this.authService.gotoDefaultPlace(data.isAuthenticated);
@@ -111,4 +122,8 @@ export class AppComponent implements OnInit {
     }
   }
 
+  private notifyUserLang(userLang: string) {
+    this.store.dispatch(new ActionSettingsChangeLanguage({userLang}));
+  }
+
 }

ui-ngx/src/app/core/auth/auth.service.ts

@@ -22,7 +22,7 @@ import { Observable, of, ReplaySubject, throwError } from 'rxjs';
 import { catchError, map, mergeMap, tap } from 'rxjs/operators';
 
 import { LoginRequest, LoginResponse, PublicLoginRequest } from '@shared/models/login.models';
-import { ActivatedRoute, Router, UrlTree } from '@angular/router';
+import { Router, UrlTree } from '@angular/router';
 import { defaultHttpOptions, defaultHttpOptionsFromConfig, RequestConfig } from '../http/http-utils';
 import { UserService } from '../http/user.service';
 import { Store } from '@ngrx/store';
@@ -35,7 +35,6 @@ import {
 } from './auth.actions';
 import { getCurrentAuthState, getCurrentAuthUser } from './auth.selectors';
 import { Authority } from '@shared/models/authority.enum';
-import { ActionSettingsChangeLanguage } from '@app/core/settings/settings.actions';
 import { AuthPayload, AuthState, SysParams, SysParamsState } from '@core/auth/auth.models';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthUser } from '@shared/models/user.model';
@@ -59,7 +58,6 @@ export class AuthService {
     private userService: UserService,
     private timeService: TimeService,
     private router: Router,
-    private route: ActivatedRoute,
     private zone: NgZone,
     private utils: UtilsService,
     private translate: TranslateService,
@@ -419,14 +417,7 @@ export class AuthService {
               this.loadSystemParams().subscribe(
                 (sysParams) => {
                   authPayload = {...authPayload, ...sysParams};
-                  let userLang;
-                  if (authPayload.userDetails.additionalInfo && authPayload.userDetails.additionalInfo.lang) {
-                    userLang = authPayload.userDetails.additionalInfo.lang;
-                  } else {
-                    userLang = null;
-                  }
                   loadUserSubject.next(authPayload);
-                  this.notifyUserLang(userLang);
                   loadUserSubject.complete();
                 },
                 (err) => {
@@ -607,10 +598,6 @@ export class AuthService {
     this.store.dispatch(new ActionAuthAuthenticated(authPayload));
   }
 
-  private notifyUserLang(userLang: string) {
-    this.store.dispatch(new ActionSettingsChangeLanguage({userLang}));
-  }
-
   private updateAndValidateToken(token, prefix, notify) {
     let valid = false;
     const tokenData = this.jwtHelper.decodeToken(token);

ui-ngx/src/app/core/settings/settings.effects.ts

@@ -47,21 +47,17 @@ export class SettingsEffects {
   ) {
   }
 
-  persistSettings = createEffect(() => this.actions$.pipe(
+  setTranslateServiceLanguage = createEffect(() => this.actions$.pipe(
     ofType(
       SettingsActionTypes.CHANGE_LANGUAGE,
     ),
     withLatestFrom(this.store.pipe(select(selectSettingsState))),
-    tap(([action, settings]) =>
-      this.localStorageService.setItem(SETTINGS_KEY, settings)
-    )
-  ), {dispatch: false});
-
-  setTranslateServiceLanguage = createEffect(() => this.store.pipe(
-    select(selectSettingsState),
-    map(settings => settings.userLang),
-    distinctUntilChanged(),
-    tap(userLang => updateUserLang(this.translate, userLang))
+    map(settings => settings[1]),
+    distinctUntilChanged((a, b) => a?.userLang === b?.userLang),
+    tap(setting => {
+      this.localStorageService.setItem(SETTINGS_KEY, setting);
+      updateUserLang(this.translate, setting.userLang);
+    })
   ), {dispatch: false});
 
   setTitle = createEffect(() => merge(