comments added to code, readme updated

Author: AndrewJBateman

README.md

@@ -25,6 +25,8 @@ Code taken from course.
 
 ## [RxJS operators](http://reactivex.io/documentation/observable.html)
 
+**general** all operators return observables. You have to subscribe to observables.
+
 **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.
@@ -33,11 +35,23 @@ Code taken from course.
 
 **tap** used to perform side effects. Every data value is received from the source, an action is taken on a part of the data then the data passeed on unchanged.
 
-**map** passes each source value through a transformation function then outputs the results, e.g map(x => 10*x)
+**map** transforms things. It passes each source value through a transformation function then outputs the results, e.g map(x => 10*x).
+
+**pipe** composes operators. Creates a pipeline of small reusable operators like map and filter.
+
+**from** converts a mix of other objects and data types into Observables
+
+## Ionic Controllers Used
+
+* [Alert Controller](https://ionicframework.com/docs/api/alert) alert appears on top of app contents.
+
+* [Loading Controller](https://ionicframework.com/docs/api/loading) overlay used to display activity and block user input. Loading indicators can be created, including spinners.
 
 ## Observables
 
-An [observable](https://rxjs-dev.firebaseapp.com/guide/observable) is created using 'new Observable'. It is subscribed to using an Observer and executed to deliver next / error / complete notices to the Observer, before the execution is disposed of. Sbscribers should be wrapped in try/catch blocks.
+An [observable](https://rxjs-dev.firebaseapp.com/guide/observable) is created using 'new Observable'. It is subscribed to using an Observer and executed to deliver next / error / complete notices to the Observer, before the execution is disposed of. Subscribers should be wrapped in try/catch blocks.
+
+a [BehaviourSubject](http://reactivex.io/rxjs/manual/overview.html#behaviorsubject) is a subject that requires an initial value and emits its current value to subscribers.
 
 ## Array Operators
 
@@ -58,6 +72,7 @@ An [observable](https://rxjs-dev.firebaseapp.com/guide/observable) is created us
 * [Google Firebase](https://firebase.google.com)
 * [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/tutorial)
 * [Capacitor v1.1.1](https://capacitor.ionicframework.com/)
+* [Ionic PWA Elements](https://www.npmjs.com/package/@ionic/pwa-elements)
 
 ## Setup
 
@@ -128,8 +143,7 @@ private getGoogleMaps(): Promise<any> {
 * [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/tutorial) map-modal added to new-offer page. Clicking on 'SELECT LOCATION' will open Google Maps at a fixed location. Address of place extracted from Google Maps data and stored in Places database.
 * [Capacitor Geolocation API](https://capacitor.ionicframework.com/docs/apis/geolocation) used to provide current location.
 * [Capacitor Camera API](https://capacitor.ionicframework.com/docs/apis/camera) used to provide camera functionality.
-* [Firebase Auth API](https://firebase.google.com/docs/reference/rest/auth) used to control access to app.
-* [Cordova Local Storage](https://cordova.apache.org/docs/en/latest/cordova/storage/storage.html#localstorage) to save user user authentication token so a refresh etc. does not lose a user's settings.
+* [Fapacitor Local Storage](https://capacitor.ionicframework.com/docs/apis/storage/) API provides a key-value store for simple data. Used to save user authentication token so a refresh etc. does not lose a user's settings.
 * [Google Cloud Storage](https://www.npmjs.com/package/@google-cloud/storage) used for storage of image data.
 * Auth tokens on the backend.
 

src/app/auth/auth.page.ts

@@ -6,7 +6,6 @@ import { LoadingController, AlertController } from '@ionic/angular';
 
 import { AuthService, AuthResponseData } from './auth.service';
 
-
 @Component({
 	selector: 'app-auth',
 	templateUrl: './auth.page.html',

src/app/auth/auth.service.ts

@@ -1,11 +1,11 @@
-import { BehaviorSubject, from } from 'rxjs';
-import { Injectable, OnDestroy } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Plugins } from '@capacitor/core';
-import { map, tap } from 'rxjs/operators';
+import {BehaviorSubject, from} from 'rxjs';
+import {Injectable, OnDestroy} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Plugins} from '@capacitor/core';
+import {map, tap} from 'rxjs/operators';
 
-import { environment } from '../../environments/environment';
-import { User } from './user.model';
+import {environment} from '../../environments/environment';
+import {User} from './user.model';
 
 export interface AuthResponseData {
 	kind: string;
@@ -21,10 +21,10 @@ export interface AuthResponseData {
 	providedIn: 'root'
 })
 export class AuthService implements OnDestroy {
-
 	private _user = new BehaviorSubject<User>(null);
 	private activeLogoutTimer: any;
 
+	// method to return true if user has auth token, false if not
 	get userIsAuthenticated() {
 		return this._user.asObservable().pipe(
 			map(user => {
@@ -37,7 +37,7 @@ export class AuthService implements OnDestroy {
 		);
 	}
 
-	// function to return a userid observable
+	// function to return userid as an observable
 	get userId() {
 		return this._user.asObservable().pipe(
 			map(user => {
@@ -62,74 +62,74 @@ export class AuthService implements OnDestroy {
 		);
 	}
 
-	constructor(private http: HttpClient) { }
+	constructor(private http: HttpClient) {}
 
+	// method to get data stored by Capacitor plugin then convert it back to a js object
 	autoLogin() {
-		return from(Plugins.Storage.get({ key: 'authData'})).pipe(
+		return from(Plugins.Storage.get({key: 'authData'})).pipe(
 			map(storedData => {
 				if (!storedData || !storedData.value) {
 					return null;
 				}
 				// create a constant that is a javascript object
 				const parsedData = JSON.parse(storedData.value) as {
-					token: string;
-					tokenExpirationDate: string;
-					userId: string;
-					email: string;
+					token: string
+					tokenExpirationDate: string
+					userId: string
+					email: string
 				};
-				// create expiry time as a string in ISO format that can be used by the data constructor
+				// recreate expiry time as a string in ISO format that can be used by the data constructor
 				const expirationTime = new Date(parsedData.tokenExpirationDate);
 				if (expirationTime <= new Date()) {
 					return null;
 				}
-				const user = new User(
-					parsedData.userId,
-					parsedData.email,
-					parsedData.token,
-					expirationTime
-				);
+				const user = new User(parsedData.userId, parsedData.email, parsedData.token, expirationTime);
 				return user;
-		}),
-		tap(user => {
-			if (user) {
-				this._user.next(user);
-				this.autoLogout(user.tokenDuration);
-			}
-		}),
-		map(user => {
-			return !!user; // returns a boolean (true if there is a user, otherwise false)
-		})
+			}),
+			tap(user => {
+				if (user) {
+					this._user.next(user);
+					this.autoLogout(user.tokenDuration);
+				}
+			}),
+			map(user => {
+				return !!user; // returns a boolean (true if there is a user, otherwise false)
+			})
 		);
 	}
 
+	// signup POST request method with a js object with user login info to a firebase backend 	http endpoint with an API key.
+	// This will return js object AuthResponseData (kind, idToken, email, refreshToken, localId,	expiresIn).
+	// return observable to auth page. Bind the data returned from firebase to setUserData.
 	signup(email: string, password: string) {
 		return this.http
 			.post<AuthResponseData>(
 				`https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${
-				environment.firebaseAPIKey
+					environment.firebaseAPIKey
 				}`,
-				{ email, password, returnSecureToken: true }
-			)
+				{email, password, returnSecureToken: true})
 			.pipe(tap(this.setUserData.bind(this)));
 	}
 
+	// will return AuthResponseData (kind, idToken, email, refreshToken, localId,	expiresIn, registered boolean)
+	// return observable to auth page. Bind the data returned from firebase to setUserData.
 	login(email: string, password: string) {
 		return this.http
 			.post<AuthResponseData>(
 				`https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${
-				environment.firebaseAPIKey
+					environment.firebaseAPIKey
 				}`,
-				{ email, password, returnSecureToken: true }
-			)
+				{email, password, returnSecureToken: true})
 			.pipe(tap(this.setUserData.bind(this)));
 	}
 
+	// method to logout user by clearing timer, passing null to the _user behavioursubject and clearing the native storage.
 	logout() {
 		if (this.activeLogoutTimer) {
 			clearTimeout(this.activeLogoutTimer);
 		}
 		this._user.next(null);
-		Plugins.Storage.remove({ key: 'authData' });
+		Plugins.Storage.remove({key: 'authData'});
 	}
 
 	ngOnDestroy() {
@@ -148,39 +148,23 @@ export class AuthService implements OnDestroy {
 	}
 
 	private setUserData(userData: AuthResponseData) {
-
 		// create const for time to expire in milliseconds
-		const expirationTime = new Date(
-			new Date().getTime() + +userData.expiresIn * 1000
-		);
-		const user = new User(
-				userData.localId,
-				userData.email,
-				userData.idToken,
-				expirationTime
-		);
+		const expirationTime = new Date(new Date().getTime() + +userData.expiresIn * 1000);
+		const user = new User(userData.localId, userData.email, userData.idToken, expirationTime);
 		this._user.next(user);
 		this.autoLogout(user.tokenDuration);
-		this.storeAuthData(
-			userData.localId,
-			userData.idToken,
-			expirationTime.toISOString(),
-			userData.email
-		);
+		this.storeAuthData(userData.localId, userData.idToken, expirationTime.toISOString(), userData.email);
 	}
 
-	private storeAuthData(
-		userId: string,
-		token: string,
-		tokenExpirationDate: string,
-		email: string
-	) {
+	// method to store auth data using Capacitor storage plugin
+	// convert to string using stringify as we cannot store a js object
+	private storeAuthData(userId: string, token: string, tokenExpirationDate: string, email: string) {
 		const data = JSON.stringify({
 			userId,
 			token,
 			tokenExpirationDate,
 			email
 		});
-		Plugins.Storage.set({ key: 'authData', value: data });
+		Plugins.Storage.set({key: 'authData', value: data});
 	}
 }