feat(tu-01-42): implement app message service

src/app/admin/components/create-station-form/create-station-form.component.ts

@@ -19,7 +19,6 @@ import {
   Validators,
 } from '@angular/forms';
 
-import { MessageService } from 'primeng/api';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { ButtonModule } from 'primeng/button';
 import { FloatLabelModule } from 'primeng/floatlabel';
@@ -30,7 +29,8 @@ import { Subscription } from 'rxjs';
 
 import { NewStation, Station } from '@/app/api/models/stations';
 import { StationsService } from '@/app/api/stationsService/stations.service';
-import MESSAGE_STATUS from '@/app/shared/constants/message-status';
+import { USER_MESSAGE } from '@/app/shared/services/userMessage/constants/user-messages';
+import { UserMessageService } from '@/app/shared/services/userMessage/user-message.service';
 
 import { MapService } from '../../services/map/map.service';
 
@@ -47,7 +47,6 @@ import { MapService } from '../../services/map/map.service';
     AutoCompleteModule,
     FormsModule,
   ],
-  providers: [MessageService],
   templateUrl: './create-station-form.component.html',
   styleUrl: './create-station-form.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -56,7 +55,7 @@ export class CreateStationFormComponent implements OnInit, OnDestroy {
   private fb = inject(FormBuilder);
   private mapService = inject(MapService);
   private stationsService = inject(StationsService);
-  private messageService = inject(MessageService);
+  private userMessageService = inject(UserMessageService);
   private subscription = new Subscription();
   private cdr = inject(ChangeDetectorRef);
 
@@ -127,7 +126,7 @@ export class CreateStationFormComponent implements OnInit, OnDestroy {
       this.stationsService.isStationInCity(this.createStationForm.getRawValue().city).subscribe({
         next: (isStationInCity) => {
           if (isStationInCity) {
-            this.submitErrorHandler(new Error('Station already exists in this city!'));
+            this.submitErrorHandler(new Error(USER_MESSAGE.STATION_EXISTS));
             return;
           }
           this.stationsService.createNewStation(this.getValidFormData()).subscribe({
@@ -153,16 +152,12 @@ export class CreateStationFormComponent implements OnInit, OnDestroy {
     });
 
     this.resetForm();
-    this.messageService.add({
-      severity: MESSAGE_STATUS.SUCCESS,
-      summary: 'Success!',
-      detail: `Station created successfully!`,
-    });
+    this.userMessageService.showSuccessMessage(USER_MESSAGE.STATION_CREATED_SUCCESSFULLY);
   }
 
   private submitErrorHandler(error: Error): void {
     this.resetForm();
-    this.messageService.add({ severity: MESSAGE_STATUS.ERROR, summary: error.name, detail: error.message });
+    this.userMessageService.showErrorMessage(error.message);
   }
 
   private resetForm(): void {

src/app/admin/components/station/station.component.ts

@@ -6,6 +6,8 @@ import { Subscription } from 'rxjs';
 
 import { Station } from '@/app/api/models/stations';
 import { StationsService } from '@/app/api/stationsService/stations.service';
+import { USER_MESSAGE } from '@/app/shared/services/userMessage/constants/user-messages';
+import { UserMessageService } from '@/app/shared/services/userMessage/user-message.service';
 
 import { MapService } from '../../services/map/map.service';
 
@@ -18,6 +20,8 @@ import { MapService } from '../../services/map/map.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StationComponent implements OnDestroy {
+  private userMessageService = inject(UserMessageService);
+
   public stationsService = inject(StationsService);
   public mapService = inject(MapService);
   public isStationDeleted = signal(false);
@@ -33,6 +37,7 @@ export class StationComponent implements OnDestroy {
         this.stationsService.getStations().subscribe((stations) => {
           this.stationsService.allStations.next(stations);
           this.mapService.removeMarker({ lng: this.station.longitude, lat: this.station.latitude });
+          this.userMessageService.showSuccessMessage(USER_MESSAGE.STATION_DELETED_SUCCESSFULLY);
           this.isStationDeleted.set(false);
         });
       }),

src/app/admin/services/map/map.service.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { Marker, Popup } from 'maplibre-gl';
 import { BehaviorSubject, Subject } from 'rxjs';
 
-import makeFirstLetterToUppercase from '@/app/shared/utils/makeFirstLetterToUppercase';
+import makeFirstLetterUppercase from '@/app/shared/utils/makeFirstLetterUppercase';
 
 import { MARKER_PARAMS } from '../../constants/initial-map-state';
 import createNewPopupOffsets from '../../utils/createNewPopupOffsets';
@@ -22,7 +22,7 @@ export class MapService {
       .setPopup(
         new Popup({ className: 'map-popup' })
           .setLngLat({ lng, lat })
-          .setText(makeFirstLetterToUppercase(city))
+          .setText(makeFirstLetterUppercase(city))
           .setOffset(createNewPopupOffsets())
           .setMaxWidth(MARKER_PARAMS.max_width),
       );

src/app/app.component.html

@@ -2,5 +2,6 @@
   <app-header></app-header>
 }
 
-<p-messages class="toast-message"></p-messages>
+<p-toast position="bottom-left" />
+
 <router-outlet />

src/app/app.component.scss

@@ -1,4 +0,0 @@
-.toast-message {
-  position: absolute;
-  margin: auto;
-}

src/app/app.component.ts

@@ -2,8 +2,7 @@ import { Component, inject, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { PrimeNGConfig } from 'primeng/api';
-import { MessageModule } from 'primeng/message';
-import { MessagesModule } from 'primeng/messages';
+import { ToastModule } from 'primeng/toast';
 
 import { HeaderComponent } from './core/components/header/header.component';
 import { LocalStorageService } from './core/services/local-storage/local-storage.service';
@@ -14,7 +13,7 @@ import { RoutingService } from './core/services/routing/routing.service';
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   standalone: true,
-  imports: [RouterOutlet, HeaderComponent, MessageModule, MessagesModule],
+  imports: [RouterOutlet, HeaderComponent, ToastModule],
 })
 export class AppComponent implements OnInit {
   private localStorageService = inject(LocalStorageService);

src/app/auth/services/auth-service/auth.service.ts

@@ -1,13 +1,14 @@
 import { inject, Injectable, OnDestroy, signal } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { MessageService } from 'primeng/api';
 import { Subscription } from 'rxjs';
 
 import { ADMIN_CREDENTIALS } from '@/app/admin/constants/adminCredentials';
 import { OverriddenHttpErrorResponse } from '@/app/api/models/errorResponse';
 import { User } from '@/app/api/models/user';
 import { LocalStorageService } from '@/app/core/services/local-storage/local-storage.service';
+import { USER_MESSAGE } from '@/app/shared/services/userMessage/constants/user-messages';
+import { UserMessageService } from '@/app/shared/services/userMessage/user-message.service';
 
 import { SignUpService } from '../../../api/signUpService/sign-up.service';
 
@@ -17,7 +18,7 @@ import { SignUpService } from '../../../api/signUpService/sign-up.service';
 export class AuthService implements OnDestroy {
   private signUpService = inject(SignUpService);
   private router = inject(Router);
-  private messageService = inject(MessageService);
+  private userMessageService = inject(UserMessageService);
   private localStorageService = inject(LocalStorageService);
 
   public isRegistrationSuccess$$ = signal(false);
@@ -33,12 +34,12 @@ export class AuthService implements OnDestroy {
         this.isRegistrationSuccess$$.set(true);
         this.errorMessage$$.set('');
         this.router.navigate(['/sign-in']);
-        this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Registration successful!' });
+        this.userMessageService.showSuccessMessage(USER_MESSAGE.REGISTRATION_SUCCESSFUL);
       },
       error: (err: OverriddenHttpErrorResponse) => {
         this.isRegistrationSuccess$$.set(false);
         this.errorMessage$$.set(err.error.reason);
-        this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Registration failed!' });
+        this.userMessageService.showErrorMessage(USER_MESSAGE.REGISTRATION_ERROR);
       },
     });
   }

src/app/core/components/navigation/navigation.component.spec.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 
-import { MessageService } from 'primeng/api';
+import { UserMessageService } from '@/app/shared/services/userMessage/user-message.service';
 
 import LocalStorageData from '../../models/store.model';
 import { LocalStorageService } from '../../services/local-storage/local-storage.service';
@@ -18,7 +18,15 @@ describe('NavigationComponent', () => {
       providers: [
         { provide: ActivatedRoute, useValue: {} },
         { provide: HttpClient, useValue: {} },
-        { provide: MessageService, useValue: {} },
+        {
+          provide: UserMessageService,
+          useValue: {
+            showSuccessMessage: (): void => {},
+            showErrorMessage: (): void => {},
+            showInfoMessage: (): void => {},
+            showWarningMessage: (): void => {},
+          },
+        },
         {
           provide: LocalStorageService,
           useValue: {

src/app/shared/services/userMessage/constants/constants.ts

@@ -0,0 +1 @@
+export const MESSAGE_DURATION = 3000;

src/app/shared/services/userMessage/constants/user-messages.ts

@@ -0,0 +1,10 @@
+export const USER_MESSAGE = {
+  REGISTRATION_SUCCESSFUL: "You've registered successfully!",
+  REGISTRATION_ERROR: "We couldn't register you. Please try again.",
+  LOGIN_SUCCESSFUL: "You've logged in successfully!",
+  LOGIN_ERROR: "We couldn't log you in. Please try again.",
+  LOGOUT_SUCCESSFUL: "You've logged out successfully!",
+  STATION_CREATED_SUCCESSFULLY: 'Station created successfully!',
+  STATION_DELETED_SUCCESSFULLY: 'Station deleted successfully!',
+  STATION_EXISTS: 'Station already exists in this city!',
+};

src/app/shared/services/userMessage/user-message.service.spec.ts

@@ -0,0 +1,20 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MessageService } from 'primeng/api';
+
+import { UserMessageService } from './user-message.service';
+
+describe('UserMessageService', () => {
+  let service: UserMessageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MessageService],
+    });
+    service = TestBed.inject(UserMessageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/services/userMessage/user-message.service.ts

@@ -0,0 +1,48 @@
+import { inject, Injectable } from '@angular/core';
+
+import { MessageService } from 'primeng/api';
+
+import { MESSAGE_DURATION } from './constants/constants';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserMessageService {
+  private messageService = inject(MessageService);
+
+  public showSuccessMessage(message: string): void {
+    this.messageService.add({
+      severity: 'success',
+      summary: 'Success',
+      life: MESSAGE_DURATION,
+      detail: message,
+    });
+  }
+
+  public showErrorMessage(message: string): void {
+    this.messageService.add({
+      severity: 'error',
+      summary: 'Error',
+      life: MESSAGE_DURATION,
+      detail: message,
+    });
+  }
+
+  public showInfoMessage(message: string): void {
+    this.messageService.add({
+      severity: 'info',
+      summary: 'Info',
+      life: MESSAGE_DURATION,
+      detail: message,
+    });
+  }
+
+  public showWarningMessage(message: string): void {
+    this.messageService.add({
+      severity: 'warn',
+      summary: 'Warning',
+      life: MESSAGE_DURATION,
+      detail: message,
+    });
+  }
+}

src/app/shared/utils/makeFirstLetterUppercase.ts

@@ -0,0 +1,3 @@
+const makeFirstLetterUppercase = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1);
+
+export default makeFirstLetterUppercase;