feat(companies): Implement showcase of companies from list in the repo

- Showcase list of companies using RxJS
- Remove firebase implementation temporarily to move forward
- Added a temporary list of companies to test

Close ReactiveX#10

package.json

@@ -41,9 +41,7 @@
     "@angular/router": "5.1.1",
     "@angular/service-worker": "5.1.1",
     "@types/hammerjs": "2.0.35",
-    "angularfire2": "5.0.0-rc.3",
     "core-js": "2.4.1",
-    "firebase": "4.6.2",
     "hammerjs": "2.0.8",
     "rxjs": "5.5.5",
     "ts-loader": "3.1.1",

src/app/companies/companies-list.ts

@@ -0,0 +1,16 @@
+import { Company } from './companies.model';
+
+export const COMPANIES_LIST: Company[] = [
+  {
+    name: 'Google',
+    location: 'California',
+    logo: '../../assets/companies/google.png',
+    website: 'http://google.com'
+  },
+  {
+    name: 'Microsoft',
+    location: 'Seattle',
+    logo: '../../assets/companies/microsoft.png',
+    website: 'http://microsoft.com'
+  }
+];

src/app/companies/companies.component.html

@@ -1,24 +1,21 @@
 <div fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="10px" fxLayoutWrap class="companies-container">
-  <button mat-fab color="primary" class="company-add-button" (click)="addCompany()">
-    <mat-icon>add</mat-icon>
-  </button>
   <mat-card *ngFor="let company of companies | async" fxFlex.xs="100" fxFlex.sm="45" fxFlex.md="30" fxFlex.lg="23">
     <mat-card-header>
       <div mat-card-avatar>
-        <img [src]="company.File" class="company-logo">
+        <img [src]="company.logo" class="company-logo">
       </div>
-      <mat-card-title>{{company.Name}}</mat-card-title>
+      <mat-card-title>{{company.name}}</mat-card-title>
       <mat-card-subtitle>
-        {{company.Location}}
-        <button class="website-button" mat-icon-button aria-label="website" (click)="openWindow(company.Website)">
+        {{company.location}}
+        <a class="website-button" mat-icon-button aria-label="website" [href]="company.website" target="_blank">
           <mat-icon>
             link
           </mat-icon>
-        </button>
+        </a>
       </mat-card-subtitle>
     </mat-card-header>
     <mat-card-content>
 
     </mat-card-content>
   </mat-card>
-</div>
+</div>

src/app/companies/companies.component.scss

@@ -17,13 +17,11 @@ mat-card {
   margin-top: 15px;
 }
 
-.company-add-button {
-  position: absolute;
-  z-index: 99;
-  right: 0;
-  top: 5px;
+mat-card-avatar {
+  margin-right: 10px;
 }
 
 .company-logo{
   height: 40px;
-}
+  width: 40px;
+}

src/app/companies/companies.component.ts

@@ -1,52 +1,19 @@
+import { COMPANIES_LIST } from './companies-list';
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-import {
-  AngularFirestore,
-  AngularFirestoreCollection
-} from 'angularfire2/firestore';
-import * as firebase from 'firebase';
 import { MatDialog } from '@angular/material';
 
-import { CompanyDialogComponent } from '../company-dialog/company-dialog.component';
 import { CompanyService } from './company.service';
+import { Company } from './companies.model';
 
 @Component({
   selector: 'app-companies',
   templateUrl: './companies.component.html',
   styleUrls: ['./companies.component.scss']
 })
 export class CompaniesComponent {
-  companies: Observable<any[]>;
-  private uploadTask: firebase.storage.UploadTask;
-  private companiesCollection: AngularFirestoreCollection<any>;
-  constructor(
-    db: AngularFirestore,
-    private dialog: MatDialog,
-    private companyService: CompanyService
-  ) {
-    this.companiesCollection = db.collection('companies');
-    this.companies = this.companiesCollection.valueChanges();
-  }
-
-  uploadSingle(file: any) {
-    return this.companyService.pushUpload(file);
-  }
-
-  addCompany() {
-    const dialogRef = this.dialog.open(CompanyDialogComponent, {});
-    dialogRef.afterClosed().subscribe(company => {
-      if (company) {
-        const file = this.uploadSingle(company.File).then((fileResult: any) => {
-          company.File = fileResult.downloadURL;
-          this.companiesCollection.add(company).then(result => {
-            console.log(result);
-          });
-        });
-      }
-    });
-  }
-
-  openWindow(url: string) {
-    window.open(url, '_blank');
+  companies: Observable<Company[]>;
+  constructor(private companyService: CompanyService) {
+    this.companies = this.companyService.getCompanies();
   }
 }

src/app/companies/companies.model.ts

@@ -0,0 +1,6 @@
+export interface Company {
+  name: string;
+  location: string;
+  website: string;
+  logo: string;
+}

src/app/companies/companies.module.ts

@@ -1,26 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from './../material/material.module';
 import { NgModule } from '@angular/core';
-import { AngularFireModule } from 'angularfire2';
-import { AngularFirestoreModule } from 'angularfire2/firestore';
 
 import { CompaniesComponent } from './companies.component';
 import { CompaniesRoutingModule } from './companies-routing.module';
 import { environment } from '../../environments/environment';
-import { CompanyDialogComponent } from '../company-dialog/company-dialog.component';
-import { MatDialogRef } from '@angular/material';
 import { CompanyService } from './company.service';
-import { AngularFireDatabase } from 'angularfire2/database';
 @NgModule({
-  imports: [
-    CommonModule,
-    CompaniesRoutingModule,
-    MaterialModule,
-    AngularFirestoreModule,
-    AngularFireModule.initializeApp(environment.firebase)
-  ],
-  declarations: [CompaniesComponent, CompanyDialogComponent],
-  entryComponents: [CompanyDialogComponent],
-  providers: [CompanyService, AngularFireDatabase]
+  imports: [CommonModule, CompaniesRoutingModule, MaterialModule],
+  declarations: [CompaniesComponent],
+  providers: [CompanyService]
 })
 export class CompaniesModule {}

src/app/companies/company.service.spec.ts

@@ -1,25 +1,19 @@
 import { TestBed, inject } from '@angular/core/testing';
 
 import { CompanyService } from './company.service';
-import { AngularFireDatabase } from 'angularfire2/database';
-import { AngularFirestoreModule } from 'angularfire2/firestore';
-import { AngularFireModule } from 'angularfire2';
 import { environment } from '../../environments/environment';
 
 describe('CompanyService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        AngularFirestoreModule,
-        AngularFireModule.initializeApp(environment.firebase)
-      ],
-      providers: [CompanyService, AngularFireDatabase]
+      imports: [],
+      providers: [CompanyService]
     });
   });
 
   it(
     'should be created',
-    inject([CompanyService, AngularFireDatabase], (service: CompanyService) => {
+    inject([CompanyService], (service: CompanyService) => {
       expect(service).toBeTruthy();
     })
   );

src/app/companies/company.service.ts

@@ -1,21 +1,12 @@
-import { Injectable } from "@angular/core";
-import { AngularFireDatabase, AngularFireList } from "angularfire2/database";
-import * as firebase from "firebase";
-import { Observable } from "rxjs/Observable";
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { COMPANIES_LIST } from './companies-list';
+import { Company } from './companies.model';
 
 @Injectable()
 export class CompanyService {
-  constructor(private db: AngularFireDatabase) {}
-  basePath = "uploads";
-  uploadsRef: AngularFireList<any>;
-  uploads: Observable<any[]>;
-  // Executes the file uploading to firebase https://firebase.google.com/docs/storage/web/upload-files
-
-  pushUpload(upload: any) {
-    const storageRef = firebase.storage().ref();
-    const uploadTask = storageRef
-      .child(`${this.basePath}/${upload.name}`)
-      .put(upload);
-    return uploadTask;
+  getCompanies(): Observable<Company[]> {
+    return of(COMPANIES_LIST);
   }
 }

src/app/material/material.module.ts

@@ -5,24 +5,22 @@ import {
   MatToolbarModule,
   MatIconModule,
   MatButtonModule,
-  MatDialogModule,
   MatListModule,
   MatSidenavModule,
   MatExpansionModule,
   MatCardModule,
   MatInputModule,
   MatMenuModule,
-  MatTooltipModule
+  MatTooltipModule,
+  MatSnackBarModule
 } from '@angular/material';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [],
   imports: [
     MatToolbarModule,
     MatIconModule,
     MatButtonModule,
-    MatDialogModule,
     MatListModule,
     MatSidenavModule,
     MatExpansionModule,
@@ -31,14 +29,12 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     MatMenuModule,
     MatTooltipModule,
     FlexLayoutModule,
-    ReactiveFormsModule,
-    FormsModule
+    MatSnackBarModule
   ],
   exports: [
     MatToolbarModule,
     MatIconModule,
     MatButtonModule,
-    MatDialogModule,
     MatListModule,
     MatSidenavModule,
     MatExpansionModule,
@@ -47,8 +43,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     MatMenuModule,
     MatTooltipModule,
     FlexLayoutModule,
-    ReactiveFormsModule,
-    FormsModule
+    MatSnackBarModule
   ]
 })
 export class MaterialModule {}