feat(app): add language change logic

Ismaestro · Ismaestro · commit f0b896f8741a · 2024-12-26T13:42:45.000+01:00
diff --git a/src/app/core/components/language-selector/language-selector.component.html b/src/app/core/components/language-selector/language-selector.component.html
@@ -1,6 +1,6 @@
 <sl-dropdown>
   <sl-button class="dropdown-button--primary" slot="trigger" caret>{{
-    locale | uppercase
+      localeId | uppercase
   }}</sl-button>
   <sl-menu class="menu--primary">
     <sl-menu-item class="menu-item--primary" value="cut"
diff --git a/src/app/core/components/language-selector/language-selector.component.ts b/src/app/core/components/language-selector/language-selector.component.ts
@@ -13,13 +13,13 @@ import '@shoelace-style/shoelace/dist/components/menu/menu.js';
 import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
 
 @Component({
-    selector: 'app-language-selector',
-    templateUrl: './language-selector.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [UpperCasePipe],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  selector: 'app-language-selector',
+  templateUrl: './language-selector.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [UpperCasePipe],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class LanguageSelectorComponent {
   readonly router = inject(Router);
-  readonly locale = inject(LOCALE_ID);
+  readonly localeId = inject(LOCALE_ID);
 }
diff --git a/src/app/core/constants/language.constants.ts b/src/app/core/constants/language.constants.ts
@@ -0,0 +1,3 @@
+import { Language } from '~core/enums/language.enum';
+
+export const DEFAULT_LANGUAGE = Language.EN_US;
diff --git a/src/app/core/services/language.service.ts b/src/app/core/services/language.service.ts
@@ -1,4 +1,6 @@
 import { inject, Injectable, LOCALE_ID } from '@angular/core';
+import { DEFAULT_LANGUAGE } from '~core/constants/language.constants';
+import { Router } from '@angular/router';
 import { Language } from '~core/enums/language.enum';
 import { Locale } from '~core/enums/locale.enum';
 
@@ -7,11 +9,20 @@ import { Locale } from '~core/enums/locale.enum';
 })
 export class LanguageService {
   private readonly localeId = inject(LOCALE_ID);
+  private readonly router = inject(Router);
 
   convertLocaleToAcceptLanguage(): Language {
     if (this.localeId === (Locale.ES as string)) {
       return Language.ES_ES;
     }
     return Language.EN_US;
   }
+
+  navigateWithUserLanguage(userLanguage: string, path: string) {
+    if (userLanguage === this.localeId || userLanguage === (DEFAULT_LANGUAGE as string)) {
+      void this.router.navigate([path]);
+    } else {
+      void this.router.navigate([`${userLanguage}${path}`]);
+    }
+  }
 }
diff --git a/src/app/features/authentication/pages/log-in/log-in.component.ts b/src/app/features/authentication/pages/log-in/log-in.component.ts
@@ -7,7 +7,7 @@ import {
   inject,
 } from '@angular/core';
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { emailValidator } from '~core/validators/email.validator';
 import { AUTH_URLS, ROOT_URLS } from '~core/constants/urls.constants';
 import { passwordValidator } from '~core/validators/password.validator';
@@ -21,21 +21,24 @@ import '@shoelace-style/shoelace/dist/components/input/input.js';
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import { AlertService } from '~core/services/alert.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import type { User } from '~features/authentication/types/user.type';
+import { LanguageService } from '~core/services/language.service';
 
 @Component({
-    selector: 'app-log-in',
-    templateUrl: './log-in.component.html',
-    styleUrl: './log-in.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [ReactiveFormsModule, RouterModule, SlInputIconFocusDirective, NgOptimizedImage],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  selector: 'app-log-in',
+  templateUrl: './log-in.component.html',
+  styleUrl: './log-in.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ReactiveFormsModule, RouterModule, SlInputIconFocusDirective, NgOptimizedImage],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class LogInComponent {
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
   private readonly alertService = inject(AlertService);
-  private readonly router = inject(Router);
+
   private readonly formBuilder = inject(FormBuilder);
   private readonly authService = inject(AuthenticationService);
+  private readonly languageService = inject(LanguageService);
   private readonly destroyRef = inject(DestroyRef);
 
   translations = translations;
@@ -65,10 +68,13 @@ export class LogInComponent {
         .logIn({ email: formValue.email!, password: formValue.password! })
         .pipe(takeUntilDestroyed(this.destroyRef))
         .subscribe({
-          next: () => {
+          next: (user: User) => {
             this.isButtonLogInLoading = false;
             this.changeDetectorRef.markForCheck();
-            void this.router.navigate([ROOT_URLS.myPokedex]);
+            this.languageService.navigateWithUserLanguage(
+              user.language as string,
+              ROOT_URLS.myPokedex,
+            );
           },
           error: (response) => {
             this.isButtonLogInLoading = false;
diff --git a/src/app/features/authentication/pages/my-account/my-account.component.ts b/src/app/features/authentication/pages/my-account/my-account.component.ts
@@ -28,22 +28,24 @@ import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import '@shoelace-style/shoelace/dist/components/select/select.js';
 import '@shoelace-style/shoelace/dist/components/option/option.js';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { LanguageService } from '~core/services/language.service';
+import { AUTH_URLS } from '~core/constants/urls.constants';
 
 @Component({
-    selector: 'app-my-account',
-    templateUrl: './my-account.component.html',
-    styleUrl: './my-account.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-        RouterModule,
-        ReactiveFormsModule,
-        SlInputIconFocusDirective,
-        PokemonImageComponent,
-        AppSlSelectControlDirective,
-        ThemeButtonComponent,
-        NgOptimizedImage,
-    ],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  selector: 'app-my-account',
+  templateUrl: './my-account.component.html',
+  styleUrl: './my-account.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterModule,
+    ReactiveFormsModule,
+    SlInputIconFocusDirective,
+    PokemonImageComponent,
+    AppSlSelectControlDirective,
+    ThemeButtonComponent,
+    NgOptimizedImage,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class MyAccountComponent implements OnInit {
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
@@ -52,6 +54,7 @@ export class MyAccountComponent implements OnInit {
   private readonly pokemonService = inject(PokemonService);
   private readonly alertService = inject(AlertService);
   private readonly destroyRef = inject(DestroyRef);
+  private readonly languageService = inject(LanguageService);
 
   translations = translations;
   user: User | undefined;
@@ -110,25 +113,36 @@ export class MyAccountComponent implements OnInit {
     this.updateUserForm.markAllAsTouched();
     if (this.updateUserForm.valid) {
       this.isButtonUpdateUserFormLoading = true;
-      const formValue = this.updateUserForm.getRawValue();
-      this.userService
-        .updateUser({
-          name: formValue.name!,
-          language: formValue.language!,
-        })
-        .pipe(takeUntilDestroyed(this.destroyRef))
-        .subscribe({
-          next: () => {
-            this.isButtonUpdateUserFormLoading = false;
-            this.alertService.createSuccessAlert(translations.myAccountSuccessAlert);
-            this.changeDetectorRef.markForCheck();
-          },
-          error: () => {
-            this.isButtonUpdateUserFormLoading = false;
-            this.alertService.createErrorAlert(translations.genericErrorAlert);
-            this.changeDetectorRef.markForCheck();
-          },
-        });
+      this.updateUser();
     }
   }
+
+  updateUser() {
+    const formValue = this.updateUserForm.getRawValue();
+    this.userService
+      .updateUser({
+        name: formValue.name!,
+        language: formValue.language!,
+      })
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: () => {
+          this.isButtonUpdateUserFormLoading = false;
+          this.alertService.createSuccessAlert(translations.myAccountSuccessAlert);
+          this.changeDetectorRef.markForCheck();
+
+          if (this.user?.language !== formValue.language) {
+            this.languageService.navigateWithUserLanguage(
+              formValue.language as string,
+              AUTH_URLS.myAccount,
+            );
+          }
+        },
+        error: () => {
+          this.isButtonUpdateUserFormLoading = false;
+          this.alertService.createErrorAlert(translations.genericErrorAlert);
+          this.changeDetectorRef.markForCheck();
+        },
+      });
+  }
 }
diff --git a/src/app/features/authentication/services/authentication.service.ts b/src/app/features/authentication/services/authentication.service.ts
@@ -5,10 +5,7 @@ import type { Observable } from 'rxjs';
 import { map } from 'rxjs';
 import type { LoginRequest } from '~features/authentication/types/login-request.type';
 import { environment } from '~environments/environment';
-import type {
-  LoginResponse,
-  LoginResponseData,
-} from '~features/authentication/types/login-response.type';
+import type { LoginResponse } from '~features/authentication/types/login-response.type';
 import type {
   RefreshTokenResponse,
   RefreshTokenResponseData,
@@ -19,6 +16,7 @@ import type {
   RegisterResponseData,
 } from '~features/authentication/types/register-response.type';
 import { LanguageService } from '~core/services/language.service';
+import type { User } from '~features/authentication/types/user.type';
 
 const IS_SESSION_ALIVE_KEY = 'isSessionAlive';
 
@@ -64,7 +62,7 @@ export class AuthenticationService {
       );
   }
 
-  logIn(loginRequest: LoginRequest): Observable<LoginResponseData> {
+  logIn(loginRequest: LoginRequest): Observable<User> {
     const loginEndpoint = `${this.apiUrl}/v1/authentication/login`;
     return this.httpClient
       .post<LoginResponse>(
@@ -80,7 +78,7 @@ export class AuthenticationService {
           const { data } = response;
           this.storageService?.setItem(IS_SESSION_ALIVE_KEY, 'true');
           this.isUserLoggedInSignal.set(true);
-          return data;
+          return data.user;
         }),
       );
   }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { Language } from '~core/enums/language.enum';`
	`2`	`+`
	`3`	`+export const DEFAULT_LANGUAGE = Language.EN_US;`