refactor: use component store for reservations

app/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from './state/app.state';
-import { filter, mergeMap, Observable, tap } from 'rxjs';
+import { concatMap, filter, Observable, tap } from 'rxjs';
 import { areLibrariesLoaded } from './state/init/init.selectors';
 import {
   isLoading,
@@ -17,9 +17,12 @@ import {
 } from './state/errors/error.selectors';
 import { fixFatalError, fixMinorError } from './state/errors/error.actions';
 import { getMessages } from './state/messages/message.selectors';
-import { ToastController } from '@ionic/angular';
+import { ToastController, ToastOptions } from '@ionic/angular';
 import { fromPromise } from 'rxjs/internal/observable/innerFrom';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Message } from './state/messages/message.reducer';
+import { clearMessage } from './state/messages/message.actions';
+import { MinorError } from './state/errors/error.reducer';
 
 @Component({
   selector: 'app-root',
@@ -46,10 +49,10 @@ export class AppComponent implements OnInit {
 
   minorErrors$ = this.store
     .select(getMinorErrors)
-    .pipe(filter((errors) => errors !== undefined)) as Observable<string>;
+    .pipe(filter((errors) => errors !== undefined)) as Observable<MinorError>;
   messages$ = this.store
     .select(getMessages)
-    .pipe(filter((messages) => messages !== undefined)) as Observable<string>;
+    .pipe(filter((message) => message !== undefined)) as Observable<Message>;
 
   constructor(
     private store: Store<AppState>,
@@ -58,39 +61,46 @@ export class AppComponent implements OnInit {
     this.minorErrors$
       .pipe(
         takeUntilDestroyed(),
-        mergeMap((message) =>
+        concatMap((message) =>
           fromPromise(
-            this.toast.create({
-              message: message,
+            this.showToast(message, {
               color: 'danger',
               icon: 'alert-circle-outline',
               duration: 3000,
               position: 'bottom',
             }),
           ),
         ),
-        mergeMap((toast) => fromPromise(toast.present())),
-        tap(() => this.store.dispatch(fixMinorError())),
+        tap((id) => this.store.dispatch(fixMinorError({ id }))),
       )
       .subscribe();
     this.messages$
       .pipe(
         takeUntilDestroyed(),
-        mergeMap((message) =>
+        concatMap((message) =>
           fromPromise(
-            this.toast.create({
-              message: message,
+            this.showToast(message, {
               color: 'success',
               icon: 'checkmark-circle-outline',
               duration: 3000,
               position: 'bottom',
             }),
           ),
         ),
-        mergeMap((toast: HTMLIonToastElement) => fromPromise(toast.present())),
+        tap((id) => this.store.dispatch(clearMessage({ id }))),
       )
       .subscribe();
   }
 
+  private async showToast(message: Message, options: ToastOptions) {
+    const element = await this.toast.create({
+      message: message.message,
+      ...options,
+    });
+    await element.present();
+    await element.onDidDismiss();
+    return message.id;
+  }
+
   ngOnInit(): void {}
 }

app/src/app/app.module.ts

@@ -4,6 +4,7 @@ import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import {
@@ -27,8 +28,6 @@ import { environment } from '../environments/environment';
 import { modalReducer } from './state/components/modal/modal.reducer';
 import { mapReducer } from './state/map/map.reducer';
 import { MapEffects } from './state/map/map.effects';
-import { ReservationsEffects } from './state/reservations/reservations.effects';
-import { reservationsReducer } from './state/reservations/reservations.reducer';
 import { errorReducer } from './state/errors/error.reducer';
 import { ErrorEffects } from './state/errors/error.effects';
 import { ReservationsPageModule } from './pages/reservations/reservations.module';
@@ -45,6 +44,7 @@ export function createTranslateLoader(http: HttpClient) {
   declarations: [AppComponent],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     IonicModule.forRoot(),
     HttpClientModule,
     TranslateModule.forRoot({
@@ -62,7 +62,6 @@ export function createTranslateLoader(http: HttpClient) {
         initStatus: initReducer,
         map: mapReducer,
         modal: modalReducer,
-        reservations: reservationsReducer,
         error: errorReducer,
         refuges: refugesReducer,
         messages: messageReducer,
@@ -88,7 +87,6 @@ export function createTranslateLoader(http: HttpClient) {
       AuthEffects,
       LanguageEffects,
       MapEffects,
-      ReservationsEffects,
       ErrorEffects,
       RefugesEffects,
       ModalEffects,

app/src/app/components/reservation-picker/reservation-picker.component.ts

@@ -1,10 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { fromISOString } from '../../schemas/night/night';
 import { Refuge } from '../../schemas/refuge/refuge';
 import { TranslateService } from '@ngx-translate/core';
-import { AppState } from 'src/app/state/app.state';
-import { Store } from '@ngrx/store';
-import { addReservation } from '../../state/reservations/reservations.actions';
+import { ReservationWithoutUserId } from '../../schemas/reservations/reservation';
 
 @Component({
   selector: 'app-reservation-picker',
@@ -13,12 +11,12 @@ import { addReservation } from '../../state/reservations/reservations.actions';
 })
 export class ReservationPickerComponent implements OnInit {
   @Input({ required: true }) refuge!: Refuge;
+  @Output() reservation = new EventEmitter<ReservationWithoutUserId>();
   date = '';
 
   alertButtons = [this.translate.instant('REFUGE.RESERVATIONS.INFO.OKAY')];
 
-  constructor(private store: Store<AppState>, private translate: TranslateService) {
-  }
+  constructor(private translate: TranslateService) {}
 
   ngOnInit() {}
 
@@ -28,7 +26,7 @@ export class ReservationPickerComponent implements OnInit {
       refuge_id: this.refuge.id,
       night,
     };
-    this.store.dispatch(addReservation({ reservation }));
+    this.reservation.emit(reservation);
   }
 
   getCurrentDate(): string {

app/src/app/components/reservations-item/reservations-item.component.ts

@@ -1,13 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import {
   Reservations,
   ReservationWithId,
 } from '../../schemas/reservations/reservation';
 import { TranslateService } from '@ngx-translate/core';
 import { AlertController } from '@ionic/angular';
-import { deleteReservation } from '../../state/reservations/reservations.actions';
-import { AppState } from '../../state/app.state';
-import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-reservations-item',
@@ -16,18 +13,18 @@ import { Store } from '@ngrx/store';
 })
 export class ReservationsItemComponent implements OnInit {
   @Input() reservations: Reservations = [];
+  @Output() removeReservation = new EventEmitter<ReservationWithId>();
 
   constructor(
     private translateService: TranslateService,
     private alertController: AlertController,
-    private store: Store<AppState>,
   ) {}
 
   ngOnInit() {}
 
   onRemoveReservation(reservation: ReservationWithId) {
     this.showDeleteReservationMessage(reservation, () => {
-      this.store.dispatch(deleteReservation({ id: reservation.id }));
+      this.removeReservation.emit(reservation);
     }).then();
   }
 

app/src/app/pages/refuge/refuge.module.ts

@@ -11,7 +11,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { ReservationPickerComponent } from '../../components/reservation-picker/reservation-picker.component';
 import { ReservationsChartComponent } from '../../components/reservations-chart/reservations-chart.component';
 import { ReservationsPageModule } from '../reservations/reservations.module';
-import { ReservationsComponent } from '../../components/reservations/reservations.component';
 import { RefugeInfoComponent } from '../../components/refuge-info/refuge-info.component';
 import {BarChartModule} from "@swimlane/ngx-charts";
 
@@ -29,7 +28,6 @@ import {BarChartModule} from "@swimlane/ngx-charts";
     RefugePage,
     ReservationPickerComponent,
     ReservationsChartComponent,
-    ReservationsComponent,
     RefugeInfoComponent,
   ],
   exports: [RefugePage],