booking service updated to use auth tokens, readme updated

Author: AndrewJBateman

README.md

@@ -23,6 +23,16 @@ Code taken from course.
 * Burger side panel added with links to the discover places listings, your bookings and a logout button.
 * Bottom menu with 2 links to 'Discover' (default page upon loading) and 'Offers' that lists all the places available.
 
+## [RxJS operators](http://reactivex.io/documentation/observable.html)
+
+**switchMap** for http requests that emit just one value and for long-lived streams for Firebase real-time database and authentication. They do not need to be unsubscribed as they complete after emission. **switch:** because the result observable has switched from emitting the values of the first inner observable, to emitting the values of the newly created inner (derived) observable. The previous inner observable is cancelled and the new observable is subscribed. **map:** because what is being mapped is the emitted source value, that is getting mapped to an observable using the mapping function passed to switchMap. (The alternative operator is mergeMap).
+
+**of** used with a single value for an 'emit once and complete' stream.
+
+**take** tba
+
+**tap** tba
+
 ## Screenshots
 
 ![page](./img/discover-places-page.png)

src/app/app.component.ts

@@ -1,11 +1,12 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Platform } from '@ionic/angular';
-import { Plugins, Capacitor } from '@capacitor/core';
+import { Plugins, Capacitor, AppState } from '@capacitor/core';
 
 import { Router } from '@angular/router';
 
 import { AuthService } from './auth/auth.service';
 import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
 
 
 @Component({
@@ -40,6 +41,7 @@ export class AppComponent implements OnInit, OnDestroy {
 			}
 			this.previousAuthState = isAuth;
 		});
+		Plugins.App.addListener('appStateChange', this.checkAuthOnResume.bind(this));
 	}
 
 	onLogout() {
@@ -52,4 +54,17 @@ export class AppComponent implements OnInit, OnDestroy {
 		}
 	}
 
+	private checkAuthOnResume(state: AppState) {
+		if (state.isActive) {
+			this.authService
+				.autoLogin()
+				.pipe(take(1))
+				.subscribe(success => {
+					if (!success) {
+						this.onLogout();
+					}
+				});
+		}
+	}
+
 }

src/app/bookings/booking.service.ts

@@ -41,16 +41,22 @@ export class BookingService {
 	) {
 		let generatedId: string;
 		let newBooking: Booking;
+		let fetchedUserId: string;
 		return this.authService.userId.pipe(
 			take(1),
 			switchMap(userId => {
 				if (!userId) {
 					throw new Error('no user id found');
 				}
+				fetchedUserId = userId;
+				return this.authService.token;
+			}),
+			take(1),
+			switchMap(token => {
 				newBooking = new Booking(
 					Math.random().toString(),
 					placeId,
-					userId,
+					fetchedUserId,
 					placeTitle,
 					placeImage,
 					firstName,
@@ -61,49 +67,59 @@ export class BookingService {
 				);
 				return this.http
 			.post<{ name: string }>(
-				'https://ionic-angular-project-a9d42.firebaseio.com/bookings.json',
+				`https://ionic-angular-project-a9d42.firebaseio.com/bookings.json?auth=${token}`,
 				{ ...newBooking, id: null }
 			);
-		}),
-		switchMap(resData => {
-			generatedId = resData.name;
-			return this.bookings;
-		}),
-		take(1),
-		tap(bookings => {
-			newBooking.id = generatedId;
-			this._bookings.next(bookings.concat(newBooking));
-		})
+			}),
+			switchMap(resData => {
+				generatedId = resData.name;
+				return this.bookings;
+			}),
+			take(1),
+			tap(bookings => {
+				newBooking.id = generatedId;
+				this._bookings.next(bookings.concat(newBooking));
+			})
 		);
 	}
 
 	cancelBooking(bookingId: string) {
-		return this.http
-			.delete(
-			`https://ionic-angular-project-a9d42.firebaseio.com/bookings/${bookingId}.json`
-			)
-			.pipe(
-				switchMap(() => {
-					return this.bookings;
-				}),
-				take(1),
-				tap(bookings => {
-					this._bookings.next(bookings.filter(b => b.id !== bookingId));
-				})
-			);
+		return this.authService.token.pipe(
+			take(1),
+			switchMap(token => {
+				return this.http
+					.delete(
+						`https://ionic-angular-project-a9d42.firebaseio.com/bookings/${bookingId}.json?auth=${token}`
+					);
+			}),
+			switchMap(() => {
+				return this.bookings;
+			}),
+			take(1),
+			tap(bookings => {
+				this._bookings.next(bookings.filter(b => b.id !== bookingId));
+			})
+		);
 	}
 
 	fetchBookings() {
+		let fetchedUserId: string;
 		return this.authService.userId.pipe(
 			take(1),
 			switchMap(userId => {
 				if (!userId) {
 					throw new Error('User not found');
 				}
+				fetchedUserId = userId;
+				return this.authService.token;
+			}),
+			take(1),
+			switchMap(token => {
 				return this.http.get<{ [key: string]: BookingData }>(
-					`https://ionic-angular-project-a9d42.firebaseio.com/bookings.json?orderBy="userId"&equalTo="${userId}"`
+					`https://ionic-angular-project-a9d42.firebaseio.com/bookings.json?orderBy="userId"&equalTo="${fetchedUserId}"&auth=${token}`
 				);
 			}),
+
 			map(bookingData => {
 				const bookings = [];
 				for (const key in bookingData) {

src/environments/environment.prod.ts

@@ -1,5 +1,5 @@
 export const environment = {
 	production: true,
-	googleMapsAPIKey: 'AIzaSyCUDGk4T7NVNxoksjRI4gRLTjMR78V_LeY',
-	firebaseAPIKey: 'AIzaSyBhYIC4T8TR4IL4sroNYP3CcEP1GiKfrIs'
+	googleMapsAPIKey: '',
+	firebaseAPIKey: ''
 };