From b9e728b390bab80b7f12fadacb733d8f5173033f Mon Sep 17 00:00:00 2001 From: ztimson Date: Sun, 16 Jun 2019 10:58:07 -0400 Subject: [PATCH] Switched firebase modules --- package.json | 1 + src/app/app.component.ts | 6 +++--- src/app/app.module.ts | 11 +++++++---- src/app/battery/battery.service.ts | 12 ++++-------- src/app/login/login.component.ts | 9 ++++----- src/app/login/login.guard.ts | 6 +++--- yarn.lock | 5 +++++ 7 files changed, 27 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index a071133..5d727ad 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@angular/common": "~7.0.0", "@angular/compiler": "~7.0.0", "@angular/core": "~7.0.0", + "@angular/fire": "^5.2.1", "@angular/forms": "~7.0.0", "@angular/http": "~7.0.0", "@angular/material": "^7.0.4", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 910cc73..a5cef86 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,7 +6,7 @@ import {collapseUp, expandDown, routerTransition} from './animations'; import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; import {filter} from 'rxjs/operators'; import {WeatherService} from './weather/weather.service'; -import {firebaseApp} from './app.module'; +import {AngularFireAuth} from '@angular/fire/auth'; @Component({ selector: 'app-root', @@ -20,7 +20,7 @@ export class AppComponent { open = false; // Side nav open environment = environment; // Environment ref - constructor(private router: Router, public batteryService: BatteryService, public weatherService: WeatherService, route: ActivatedRoute, breakpointObserver: BreakpointObserver) { + constructor(private auth: AngularFireAuth, private router: Router, public batteryService: BatteryService, public weatherService: WeatherService, route: ActivatedRoute, breakpointObserver: BreakpointObserver) { router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => { this.hide = !!route.root.firstChild.snapshot.data.hide; this.open = !this.hide && !this.mobile; @@ -34,7 +34,7 @@ export class AppComponent { async logout() { this.noTransition = true; - await firebaseApp.auth().signOut(); + await this.auth.auth.signOut(); return this.router.navigate(['/login']).then(() => this.noTransition = false); } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 61e97a4..8e14e55 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -20,15 +20,15 @@ import {WeatherComponent} from './weather/weather.component'; import {SecurityComponent} from './security/security.component'; import {HttpClientModule} from '@angular/common/http'; import {LoginComponent} from './login/login.component'; -import {environment} from '../environments/environment'; -import * as firebase from 'firebase/app'; import {ServiceWorkerModule} from '@angular/service-worker'; import {LineChartModule, NgxChartsModule} from '@swimlane/ngx-charts'; import {RoundPipe} from './round.pipe'; import {BatteryWidgetComponent} from './battery/widget/batteryWidget.component'; import {WeatherWidgetComponent} from './weather/widget/weatherWidget.component'; - -export const firebaseApp = firebase.initializeApp(environment.firebase); +import {AngularFireAuthModule} from '@angular/fire/auth'; +import {environment} from '../environments/environment'; +import {AngularFireModule} from '@angular/fire'; +import {AngularFirestoreModule} from '@angular/fire/firestore'; @NgModule({ declarations: [ @@ -43,6 +43,9 @@ export const firebaseApp = firebase.initializeApp(environment.firebase); WeatherWidgetComponent ], imports: [ + AngularFireAuthModule, + AngularFireModule.initializeApp(environment.firebase), + AngularFirestoreModule.enablePersistence(), AppRoutingModule, BrowserModule, BrowserAnimationsModule, diff --git a/src/app/battery/battery.service.ts b/src/app/battery/battery.service.ts index 7dfac1d..dd8494f 100644 --- a/src/app/battery/battery.service.ts +++ b/src/app/battery/battery.service.ts @@ -1,12 +1,10 @@ import {Injectable} from '@angular/core'; -import {firebaseApp} from '../app.module'; +import {AngularFirestore} from '@angular/fire/firestore'; @Injectable({ providedIn: 'root' }) export class BatteryService { - readonly firestore; - batteries = []; charge: number; lastCharge: number; @@ -43,12 +41,10 @@ export class BatteryService { return temp;*/ } - constructor() { - this.firestore = firebaseApp.firestore(); - this.firestore.settings({timestampsInSnapshots: true}); - this.firestore.collection('Battery').doc('170614D').onSnapshot(snap => { + constructor(private firestore: AngularFirestore) { + this.firestore.collection('Battery').doc('170614D').snapshotChanges().subscribe(snap => { this.lastUpdate = new Date().getTime(); - let data = snap.data(); + let data: any = snap.payload.data(); this.relayMode = data.config.relayMode ? data.config.relayMode.toString() : 'null'; this.batteries = Object.keys(data.modules).map(key => { let last = data.modules[key].length - 1; diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index c3cc20f..7d520b7 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -1,8 +1,8 @@ import {Component, NgZone, OnInit} from '@angular/core'; -import {firebaseApp} from '../app.module'; import {Router} from '@angular/router'; import * as firebase from 'firebase'; import {expandDown, fadeIn, fadeOut} from '../animations'; +import {AngularFireAuth} from '@angular/fire/auth'; @Component({ selector: 'app-login', @@ -14,10 +14,10 @@ export class LoginComponent implements OnInit { show = true; loading = false; - constructor(private ngZone: NgZone, public router: Router) { } + constructor(private auth: AngularFireAuth, private ngZone: NgZone, public router: Router) { } ngOnInit() { - firebaseApp.auth().onAuthStateChanged(user => { + this.auth.auth.onAuthStateChanged(user => { if(!!user) { this.show = false; setTimeout(() => { @@ -31,8 +31,7 @@ export class LoginComponent implements OnInit { async login() { this.loading = true; - await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL); - await firebaseApp.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider()); + await this.auth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); this.loading = false; } } diff --git a/src/app/login/login.guard.ts b/src/app/login/login.guard.ts index e1265e7..0a71ecd 100644 --- a/src/app/login/login.guard.ts +++ b/src/app/login/login.guard.ts @@ -1,8 +1,8 @@ import {CanActivate, Router} from '@angular/router'; -import {firebaseApp} from '../app.module'; import {Injectable} from '@angular/core'; import {Observable, timer} from 'rxjs'; import {filter, map} from 'rxjs/operators'; +import {AngularFireAuth} from '@angular/fire/auth'; @Injectable({ providedIn: 'root' @@ -10,8 +10,8 @@ import {filter, map} from 'rxjs/operators'; export class LoginGuard implements CanActivate { loggedIn?; - constructor(private router: Router) { - firebaseApp.auth().onAuthStateChanged(user => this.loggedIn = !!user); + constructor(private auth: AngularFireAuth, private router: Router) { + this.auth.auth.onAuthStateChanged(user => this.loggedIn = !!user); } canActivate(): Observable { diff --git a/yarn.lock b/yarn.lock index 67c908a..e58ed17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -171,6 +171,11 @@ dependencies: tslib "^1.9.0" +"@angular/fire@^5.2.1": + version "5.2.1" + resolved "https://registry.yarnpkg.com/@angular/fire/-/fire-5.2.1.tgz#4b966aaed10cda0b430c9d80769b39d08032004d" + integrity sha512-pS4zWhLLANzMbYVIKNtebDQKhm9+KANUDvDV6DwKP24XHzkZdvazKe1HC6uXWlf7QmDxSPFleCSBkn0tnQQzdQ== + "@angular/forms@~7.0.0": version "7.0.3" resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-7.0.3.tgz#6cbc2b760756b759b1623dd3d541252ae2acb6f7"