From 1af06e25e602471d5f70a4ccb70ef6eac3c5db67 Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 19 Aug 2024 00:17:02 +0300 Subject: [PATCH] feat: implement app message service --- .../create-station-form.component.ts | 17 +++---- .../components/station/station.component.ts | 5 ++ src/app/admin/services/map/map.service.ts | 4 +- src/app/app.component.html | 3 +- src/app/app.component.scss | 4 -- src/app/app.component.ts | 5 +- .../services/auth-service/auth.service.ts | 9 ++-- .../navigation/navigation.component.spec.ts | 12 ++++- src/app/shared/constants/message-status.ts | 9 ---- src/app/shared/services/.gitkeep | 0 .../userMessage/constants/constants.ts | 1 + .../userMessage/constants/user-messages.ts | 10 ++++ .../userMessage/user-message.service.spec.ts | 20 ++++++++ .../userMessage/user-message.service.ts | 48 +++++++++++++++++++ .../utils/makeFirstLetterToUppercase.ts | 3 -- .../shared/utils/makeFirstLetterUppercase.ts | 3 ++ 16 files changed, 114 insertions(+), 39 deletions(-) delete mode 100644 src/app/shared/constants/message-status.ts delete mode 100644 src/app/shared/services/.gitkeep create mode 100644 src/app/shared/services/userMessage/constants/constants.ts create mode 100644 src/app/shared/services/userMessage/constants/user-messages.ts create mode 100644 src/app/shared/services/userMessage/user-message.service.spec.ts create mode 100644 src/app/shared/services/userMessage/user-message.service.ts delete mode 100644 src/app/shared/utils/makeFirstLetterToUppercase.ts create mode 100644 src/app/shared/utils/makeFirstLetterUppercase.ts diff --git a/src/app/admin/components/create-station-form/create-station-form.component.ts b/src/app/admin/components/create-station-form/create-station-form.component.ts index 2f97c7e..2626117 100644 --- a/src/app/admin/components/create-station-form/create-station-form.component.ts +++ b/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 { diff --git a/src/app/admin/components/station/station.component.ts b/src/app/admin/components/station/station.component.ts index dd43971..2982ad9 100644 --- a/src/app/admin/components/station/station.component.ts +++ b/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); }); }), diff --git a/src/app/admin/services/map/map.service.ts b/src/app/admin/services/map/map.service.ts index 8ebc965..61bd693 100644 --- a/src/app/admin/services/map/map.service.ts +++ b/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), ); diff --git a/src/app/app.component.html b/src/app/app.component.html index a9be1b0..d9c1a9c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,5 +2,6 @@ } - + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 94eccf8..e69de29 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,4 +0,0 @@ -.toast-message { - position: absolute; - margin: auto; -} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5e355e7..01d1d52 100644 --- a/src/app/app.component.ts +++ b/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); diff --git a/src/app/auth/services/auth-service/auth.service.ts b/src/app/auth/services/auth-service/auth.service.ts index 0d9d292..ce349c7 100644 --- a/src/app/auth/services/auth-service/auth.service.ts +++ b/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); }, }); } diff --git a/src/app/core/components/navigation/navigation.component.spec.ts b/src/app/core/components/navigation/navigation.component.spec.ts index 6e96cab..dd55839 100644 --- a/src/app/core/components/navigation/navigation.component.spec.ts +++ b/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: { diff --git a/src/app/shared/constants/message-status.ts b/src/app/shared/constants/message-status.ts deleted file mode 100644 index 29ffc06..0000000 --- a/src/app/shared/constants/message-status.ts +++ /dev/null @@ -1,9 +0,0 @@ -const MESSAGE_STATUS = { - SUCCESS: 'success', - ERROR: 'error', - INFO: 'info', - WARNING: 'warning', - DEFAULT: 'default', -} as const; - -export default MESSAGE_STATUS; diff --git a/src/app/shared/services/.gitkeep b/src/app/shared/services/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/shared/services/userMessage/constants/constants.ts b/src/app/shared/services/userMessage/constants/constants.ts new file mode 100644 index 0000000..cf52437 --- /dev/null +++ b/src/app/shared/services/userMessage/constants/constants.ts @@ -0,0 +1 @@ +export const MESSAGE_DURATION = 3000; diff --git a/src/app/shared/services/userMessage/constants/user-messages.ts b/src/app/shared/services/userMessage/constants/user-messages.ts new file mode 100644 index 0000000..9265edb --- /dev/null +++ b/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!', +}; diff --git a/src/app/shared/services/userMessage/user-message.service.spec.ts b/src/app/shared/services/userMessage/user-message.service.spec.ts new file mode 100644 index 0000000..ae30075 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/shared/services/userMessage/user-message.service.ts b/src/app/shared/services/userMessage/user-message.service.ts new file mode 100644 index 0000000..b6a9dac --- /dev/null +++ b/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, + }); + } +} diff --git a/src/app/shared/utils/makeFirstLetterToUppercase.ts b/src/app/shared/utils/makeFirstLetterToUppercase.ts deleted file mode 100644 index 55d500e..0000000 --- a/src/app/shared/utils/makeFirstLetterToUppercase.ts +++ /dev/null @@ -1,3 +0,0 @@ -const makeFirstLetterToUppercase = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1); - -export default makeFirstLetterToUppercase; diff --git a/src/app/shared/utils/makeFirstLetterUppercase.ts b/src/app/shared/utils/makeFirstLetterUppercase.ts new file mode 100644 index 0000000..14e67f7 --- /dev/null +++ b/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;