From 2c7756c89463a30c83bdcc2780b95ba09ca4f7d6 Mon Sep 17 00:00:00 2001 From: ztimson Date: Sun, 21 Apr 2019 17:34:36 -0400 Subject: [PATCH] Hooked up the quotes to firestore --- src/app/app.component.html | 2 +- src/app/app.component.ts | 16 +++++++++------- src/app/app.module.ts | 6 ++++-- src/app/app.store.ts | 15 +++++++++++++++ .../components/slideShow/slideShow.component.ts | 2 +- src/app/models/quote.ts | 3 +++ .../{components/slideShow => models}/slide.ts | 0 7 files changed, 33 insertions(+), 11 deletions(-) create mode 100644 src/app/app.store.ts create mode 100644 src/app/models/quote.ts rename src/app/{components/slideShow => models}/slide.ts (100%) diff --git a/src/app/app.component.html b/src/app/app.component.html index a59f115..b67999e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,7 @@
- +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index bfd50d3..1bec817 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,17 +1,19 @@ import { Component } from '@angular/core'; +import {AppStore} from './app.store'; +import {Observable} from 'rxjs'; +import {map} from 'rxjs/operators'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { - quote: string; - quotes = [ - 'Why do Kamikaze pilots wear helmets?', - 'Remember that you\'re unique... Just like everyone else' - ]; + quote: Observable; - constructor() { - this.quote = this.quotes[Math.floor(Math.random() * this.quotes.length)] + constructor(private store: AppStore) { + this.quote = store.quotes.pipe(map(quotes => { + let quote = quotes[Math.floor(Math.random() * quotes.length)]; + return quote.text; + })) } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 07dca76..7e891f4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,7 +1,7 @@ import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AngularFireModule} from '@angular/fire'; -import {AngularFirestoreModule} from '@angular/fire/firestore'; +import {AngularFirestoreModule, FirestoreSettingsToken} from '@angular/fire/firestore'; import {AppComponent} from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @@ -25,7 +25,9 @@ import {environment} from '../environments/environment'; FormsModule, MaterialModule ], - providers: [], + providers: [ + { provide: FirestoreSettingsToken, useValue: {} } + ], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/app.store.ts b/src/app/app.store.ts new file mode 100644 index 0000000..2a224ff --- /dev/null +++ b/src/app/app.store.ts @@ -0,0 +1,15 @@ +import {Injectable} from '@angular/core'; +import {Observable} from 'rxjs'; +import {AngularFirestore} from '@angular/fire/firestore'; +import {Quote} from './models/quote'; + +@Injectable({ + providedIn: 'root' +}) +export class AppStore { + quotes: Observable; + + constructor(private firestore: AngularFirestore) { + this.quotes = this.firestore.collection('quotes').valueChanges(); + } +} diff --git a/src/app/components/slideShow/slideShow.component.ts b/src/app/components/slideShow/slideShow.component.ts index c1961d5..a4d4322 100644 --- a/src/app/components/slideShow/slideShow.component.ts +++ b/src/app/components/slideShow/slideShow.component.ts @@ -1,5 +1,5 @@ import {Component, Input} from '@angular/core'; -import {Slide} from './slide'; +import {Slide} from '../../models/slide'; @Component({ selector: 'slideshow', diff --git a/src/app/models/quote.ts b/src/app/models/quote.ts new file mode 100644 index 0000000..e5274c4 --- /dev/null +++ b/src/app/models/quote.ts @@ -0,0 +1,3 @@ +export interface Quote { + text: string; +} diff --git a/src/app/components/slideShow/slide.ts b/src/app/models/slide.ts similarity index 100% rename from src/app/components/slideShow/slide.ts rename to src/app/models/slide.ts