feat(fire): implement guestbook in firebase

beeman · beeman · commit 173db2bd57f6 · 2018-04-08T00:34:38.000-05:00
diff --git a/apps/docs/src/app/docs/components/introduction/introduction.component.spec.ts b/apps/docs/src/app/docs/components/introduction/introduction.component.spec.ts
@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { IntroductionComponent } from './introduction.component';
 
-describe('IntroductionComponent', () => {
+describe('GuestbookComponent', () => {
   let component: IntroductionComponent;
   let fixture: ComponentFixture<IntroductionComponent>;
 
diff --git a/apps/docs/src/app/docs/containers/docs-sidebar/docs-sidebar.component.ts b/apps/docs/src/app/docs/containers/docs-sidebar/docs-sidebar.component.ts
@@ -20,7 +20,7 @@ export class DocsSidebarComponent implements OnInit {
 
   public items = [
     {
-      url: 'introduction',
+      url: 'guestbook',
       title: 'Introduction',
       icon: 'fe fe-flag',
     },
diff --git a/apps/docs/src/app/docs/docs.module.ts b/apps/docs/src/app/docs/docs.module.ts
@@ -15,8 +15,8 @@ import { DocsSidebarComponent } from './containers/docs-sidebar/docs-sidebar.com
 
 const routes: Routes = [ {
   path: '', component: DocsIndexComponent, children: [
-    { path: '', redirectTo: 'introduction', pathMatch: 'full' },
-    { path: 'introduction', component: IntroductionComponent },
+    { path: '', redirectTo: 'guestbook', pathMatch: 'full' },
+    { path: 'guestbook', component: IntroductionComponent },
     { path: 'alerts', component: AlertsComponent },
     { path: 'badges', component: BadgesComponent },
     { path: 'buttons', component: ButtonsComponent },
diff --git a/apps/fire/src/app/app.config.ts b/apps/fire/src/app/app.config.ts
@@ -1,9 +1,9 @@
 
 const headerMenu = [
   {
-    name: 'Fire',
-    icon: 'fa fa-fire',
-    url: '/fire',
+    name: 'Guestbook',
+    icon: 'fe fe-book',
+    url: '/fire/guestbook',
   },
 ]
 
diff --git a/apps/fire/src/app/app.module.ts b/apps/fire/src/app/app.module.ts
@@ -3,17 +3,22 @@ import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { CoreModule, SharedModule } from '@tabler/angular-core'
+import { environment } from '../environments/environment'
 
 import { AppRoutingModule } from './app-routing.module'
-import { AppComponent } from './app.component';
+import { AppComponent } from './app.component'
+import { AngularFireModule } from 'angularfire2'
+import { AngularFirestoreModule } from 'angularfire2/firestore'
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     CoreModule,
     SharedModule,
-    AppRoutingModule
+    AppRoutingModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFirestoreModule
   ],
   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
diff --git a/apps/fire/src/app/fire/components/guestbook/guestbook.component.spec.ts b/apps/fire/src/app/fire/components/guestbook/guestbook.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { IntroductionComponent } from './introduction.component';
+import { GuestbookComponent } from './guestbook.component';
 
-describe('IntroductionComponent', () => {
-  let component: IntroductionComponent;
-  let fixture: ComponentFixture<IntroductionComponent>;
+describe('GuestbookComponent', () => {
+  let component: GuestbookComponent;
+  let fixture: ComponentFixture<GuestbookComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ IntroductionComponent ]
+      declarations: [ GuestbookComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(IntroductionComponent);
+    fixture = TestBed.createComponent(GuestbookComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/apps/fire/src/app/fire/components/guestbook/guestbook.component.ts b/apps/fire/src/app/fire/components/guestbook/guestbook.component.ts
@@ -0,0 +1,105 @@
+import { Component, OnInit } from '@angular/core';
+import { FireService } from '../../services/fire.service';
+
+@Component({
+  selector: 'app-introduction',
+  template: `
+    <div class="row">
+      <div class="col-md-6 offset-md-3">
+        <ui-page-title
+          title="Firebase Guestbook"
+          subTitle="Rock a guestbook like it's 1999! 🚀 "></ui-page-title>
+
+
+        <div class="card">
+          <div class="card-body">
+
+            <div class="my-3 py-3">
+              <div class="input-group input-xl">
+                <input type="text"
+                       class="form-control"
+                       placeholder="Message"
+                       [(ngModel)]="message"
+                       (keydown.enter)="sendMessage()">
+                <div class="input-group-append">
+                  <button type="button"
+                          class="btn btn-secondary"
+                          (click)="sendMessage()">
+                    <i class="fe fe-send"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+
+            <div class="list-group list-group- my-5">
+
+              <div *ngIf="(fire.collection$ | async) as collection">
+
+                <div *ngIf="!collection.length">
+                  <div class="alert alert-info">No messages found...</div>
+                </div>
+
+                <ng-container >
+                  <div class="list-group-item list-group-item-action mb-3"
+                       *ngFor="let item of collection">
+                    <div>
+                      {{item.message}}
+                      <div class="float-right">
+                    <span class="text-muted mr-4">
+                      {{item.created | date: 'short' }}
+                    </span>
+                        <button class="btn btn-sm text-danger"
+                                (click)="deleteMessage(item.id)">
+                          <i class="fa fa-trash"></i>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </ng-container>
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
+      </div>
+    </div>
+
+  `,
+  styles: []
+})
+export class GuestbookComponent implements OnInit {
+  public message: string
+
+  constructor(public fire: FireService) {}
+
+  ngOnInit() {
+    this.reset()
+  }
+
+  addMessage(message: string) {
+    this.fire.upsert({ message })
+      .subscribe(res => {
+        console.log('Item added', res)
+      })
+  }
+
+  sendMessage() {
+    this.addMessage(this.message)
+    this.reset()
+  }
+
+  deleteMessage(id) {
+    this.fire.delete(id)
+      .subscribe(res => {
+        console.log('Item deleted', res)
+      })
+  }
+
+  reset() {
+    this.message = ''
+  }
+}
diff --git a/apps/fire/src/app/fire/components/introduction/introduction.component.ts b/apps/fire/src/app/fire/components/introduction/introduction.component.ts
diff --git a/apps/fire/src/app/fire/containers/fire-index/fire-index.component.ts b/apps/fire/src/app/fire/containers/fire-index/fire-index.component.ts
@@ -4,24 +4,9 @@ import { Component } from '@angular/core'
   selector: 'app-fire-index',
   template: `
     <ui-page>
-      <ui-page-title
-        title="Fire"
-        icon="fa fa-fire"></ui-page-title>
-      <div class="row">
-        <div class="col-lg-3 order-lg-0 mb-4">
-          <app-fire-sidebar></app-fire-sidebar>
-        </div>
-        <div class="col-lg-9">
-          <div class="card">
-            <div class="card-body">
-              <router-outlet></router-outlet>
-            </div>
-          </div>
-        </div>
-      </div>
+      <router-outlet></router-outlet>
     </ui-page>
   `,
-  styles: []
 })
 export class FireIndexComponent {
 
diff --git a/apps/fire/src/app/fire/containers/fire-sidebar/fire-sidebar.component.ts b/apps/fire/src/app/fire/containers/fire-sidebar/fire-sidebar.component.ts
@@ -20,9 +20,9 @@ export class FireSidebarComponent implements OnInit {
 
   public items = [
     {
-      url: 'introduction',
-      title: 'Introduction',
-      icon: 'fe fe-flag',
+      url: 'guestbook',
+      title: 'Guestbook',
+      icon: 'fe fe-book',
     },
   ]
 
diff --git a/apps/fire/src/app/fire/fire.module.ts b/apps/fire/src/app/fire/fire.module.ts
@@ -1,27 +1,32 @@
 import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '@tabler/angular-core';
-import { IntroductionComponent } from './components/introduction/introduction.component';
+import { GuestbookComponent } from './components/guestbook/guestbook.component';
 import { FireIndexComponent } from './containers/fire-index/fire-index.component';
 import { FireSidebarComponent } from './containers/fire-sidebar/fire-sidebar.component';
+import { FireService } from './services/fire.service';
 
 const routes: Routes = [ {
   path: '', component: FireIndexComponent, children: [
-    { path: '', redirectTo: 'introduction', pathMatch: 'full' },
-    { path: 'introduction', component: IntroductionComponent }
+    { path: '', redirectTo: 'guestbook', pathMatch: 'full' },
+    { path: 'guestbook', component: GuestbookComponent }
   ]
 } ];
 
 @NgModule({
   imports: [
     SharedModule,
+    ReactiveFormsModule,
+    FormsModule,
     RouterModule.forChild(routes)
   ],
   declarations: [
-    IntroductionComponent,
+    GuestbookComponent,
     FireIndexComponent,
     FireSidebarComponent
 
-  ]
+  ],
+  providers: [FireService]
 })
 export class FireModule {}
diff --git a/apps/fire/src/app/fire/services/fire.service.spec.ts b/apps/fire/src/app/fire/services/fire.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { FireService } from './fire.service';
+
+describe('FireService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [FireService]
+    });
+  });
+
+  it('should be created', inject([FireService], (service: FireService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/apps/fire/src/app/fire/services/fire.service.ts b/apps/fire/src/app/fire/services/fire.service.ts
@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { AngularFirestore } from 'angularfire2/firestore';
+import { fromPromise } from 'rxjs/observable/fromPromise';
+
+@Injectable()
+export class FireService {
+
+  private collection = 'Items'
+
+  public collection$
+
+  constructor(
+    private db: AngularFirestore
+  ) {
+    this.collection$ = db
+      .collection(this.collection, ref => ref.orderBy('created', 'desc'))
+      .valueChanges()
+  }
+
+
+  public create(data) {
+    const id = this.db.createId()
+    const created = new Date()
+    return fromPromise(this.db
+      .collection(this.collection)
+      .doc(id)
+      .set(Object.assign({}, data, { id, created })))
+  }
+
+  public update(id, data) {
+    const updated = new Date()
+    return fromPromise(this.db
+      .collection(this.collection)
+      .doc(id)
+      .update(Object.assign({}, data, { updated })))
+  }
+
+  public delete(id) {
+    return fromPromise(this.db
+      .collection(this.collection)
+      .doc(id)
+      .delete())
+  }
+
+  public upsert(data) {
+    return data.id ? this.update(data.id, data) : this.create(data)
+  }
+
+}
diff --git a/package.json b/package.json
@@ -53,9 +53,11 @@
     "@nrwl/nx": "0.11.0",
     "@swimlane/ngx-charts": "^7.2.0",
     "angular-pipes": "^7.1.0",
+    "angularfire2": "^5.0.0-rc.6",
     "bootstrap": "^4.0.0",
     "chart.js": "^2.7.2",
     "core-js": "^2.4.1",
+    "firebase": "^4.12.1",
     "font-awesome": "^4.7.0",
     "ng2-charts": "^1.6.0",
     "ngrx-store-freeze": "^0.2.1",

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export class DocsSidebarComponent implements OnInit {`
`20`	`20`
`21`	`21`	`public items = [`
`22`	`22`	`{`
`23`		`- url: 'introduction',`
	`23`	`+ url: 'guestbook',`
`24`	`24`	`title: 'Introduction',`
`25`	`25`	`icon: 'fe fe-flag',`
`26`	`26`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,9 @@`
`1`	`1`
`2`	`2`	`const headerMenu = [`
`3`	`3`	`{`
`4`		`- name: 'Fire',`
`5`		`- icon: 'fa fa-fire',`
`6`		`- url: '/fire',`
	`4`	`+ name: 'Guestbook',`
	`5`	`+ icon: 'fe fe-book',`
	`6`	`+ url: '/fire/guestbook',`
`7`	`7`	`},`
`8`	`8`	`]`
`9`	`9`
Original file line number	Diff line number	Diff line change
`@@ -20,9 +20,9 @@ export class FireSidebarComponent implements OnInit {`
`20`	`20`
`21`	`21`	`public items = [`
`22`	`22`	`{`
`23`		`- url: 'introduction',`
`24`		`- title: 'Introduction',`
`25`		`- icon: 'fe fe-flag',`
	`23`	`+ url: 'guestbook',`
	`24`	`+ title: 'Guestbook',`
	`25`	`+ icon: 'fe fe-book',`
`26`	`26`	`},`
`27`	`27`	`]`
`28`	`28`