feat: firebase integrated

Replace rxdb with firebase to support save color and access is across the devices

Author: lokesh-coder

.vscode/settings.json

@@ -16,6 +16,10 @@
     {
       "name": "feature/travis-sematic-renovate-setup",
       "base": "develop"
+    },
+    {
+      "name": "feature/firebase-integration",
+      "base": "develop"
     }
   ],
   "gitflow4code.releases": [

config.json

@@ -5,8 +5,9 @@ require('dotenv').config();
 
 const targetPath = `./src/environments/secrets.ts`;
 const envConfigFile = `
-export const githubClientSecret= '${process.env.GITHUB_CLIENT_SECRET}';
-export const githubClientID= '${process.env.GITHUB_CLIENT_ID}';
+export const githubClientSecret = '${process.env.GITHUB_CLIENT_SECRET}';
+export const githubClientID = '${process.env.GITHUB_CLIENT_ID}';
+export const firebaseApiKey = '${process.env.FIREBASE_API_KEY}';
 `;
 writeFile(targetPath, envConfigFile, function(err) {
   if (err) {

config/env.secrets.ts

@@ -1,6 +1,6 @@
 {
   "name": "ink-bucket",
-  "version": "1.0.0",
+  "version": "0.0.0-development",
   "main": "main.js",
   "scripts": {
     "ng": "ng",
@@ -15,7 +15,6 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "commitmsg": "commitlint -e $GIT_PARAMS",
-    "db": "pouchdb-server --host 0.0.0.0 -p 10101 -m -d /tmp/pouchdb-server/ -n true",
     "electron": "electron .",
     "electron-build": "ng build --prod && electron .",
     "server:prod": "http-server dist/ink-bucket -p 1234 -s -o --cors",
@@ -26,92 +25,94 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "6.0.5",
-    "@angular/cdk": "6.2.1",
-    "@angular/common": "6.0.5",
-    "@angular/compiler": "6.0.5",
-    "@angular/core": "6.0.5",
-    "@angular/forms": "6.0.5",
-    "@angular/http": "6.0.5",
-    "@angular/material": "6.2.1",
-    "@angular/platform-browser": "6.0.5",
-    "@angular/platform-browser-dynamic": "6.0.5",
-    "@angular/pwa": "0.6.8",
-    "@angular/router": "6.0.5",
-    "@angular/service-worker": "6.0.5",
+    "@angular/animations": "6.1.10",
+    "@angular/cdk": "6.4.7",
+    "@angular/common": "6.1.10",
+    "@angular/compiler": "6.1.10",
+    "@angular/core": "6.1.10",
+    "@angular/fire": "5.1.0",
+    "@angular/forms": "6.1.10",
+    "@angular/http": "6.1.10",
+    "@angular/material": "6.4.7",
+    "@angular/platform-browser": "6.1.10",
+    "@angular/platform-browser-dynamic": "6.1.10",
+    "@angular/pwa": "0.10.5",
+    "@angular/router": "6.1.10",
+    "@angular/service-worker": "6.1.10",
     "@auth0/angular-jwt": "2.0.0",
-    "@ctrl/tinycolor": "2.0.0",
-    "@ngxs/devtools-plugin": "3.1.4",
-    "@ngxs/store": "3.1.4",
-    "@types/nedb": "1.8.5",
-    "@types/pouchdb-core": "6.4.0",
-    "@types/pouchdb-find": "6.3.2",
-    "a-color-picker": "1.0.6",
+    "@ctrl/tinycolor": "2.2.1",
+    "@ngxs/devtools-plugin": "3.2.0",
+    "@ngxs/store": "3.2.0",
+    "@types/nedb": "1.8.6",
+    "@types/pouchdb-core": "6.4.3",
+    "@types/pouchdb-find": "6.3.3",
+    "a-color-picker": "1.1.4",
     "babel-polyfill": "6.26.0",
-    "bootstrap": "4.1.1",
+    "bootstrap": "4.1.3",
     "core-js": "2.5.7",
     "deep-freeze-strict": "1.1.1",
-    "deepmerge": "2.1.1",
-    "fuse.js": "3.2.1",
-    "gun": "0.9.9991",
+    "deepmerge": "2.2.1",
+    "firebase": "5.5.8",
+    "fuse.js": "3.3.0",
+    "gun": "0.9.99997",
     "keypress.js": "2.1.5",
-    "lodash-es": "4.17.10",
+    "lodash-es": "4.17.11",
     "nedb": "1.8.0",
-    "ngx-clipboard": "11.1.1",
-    "ngx-color": "1.5.2",
-    "ngx-smart-modal": "6.0.3",
-    "ngx-toastr": "8.8.0",
-    "pouchdb": "6.4.3",
-    "pouchdb-adapter-idb": "6.4.3",
-    "pouchdb-find": "6.4.3",
+    "ngx-clipboard": "11.1.9",
+    "ngx-color": "2.0.5",
+    "ngx-smart-modal": "6.0.4",
+    "ngx-toastr": "8.10.2",
+    "pouchdb": "7.0.0",
+    "pouchdb-adapter-idb": "7.0.0",
+    "pouchdb-find": "7.0.0",
     "pretty-checkbox": "3.0.3",
-    "relational-pouch": "3.0.1",
-    "rxdb": "7.6.0",
-    "rxjs": "6.1.0",
+    "relational-pouch": "3.1.0",
+    "rxdb": "7.7.1",
+    "rxjs": "6.3.3",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.6.8",
-    "@angular/cli": "6.0.8",
-    "@angular/compiler-cli": "6.0.5",
-    "@angular/language-service": "6.0.5",
-    "@commitlint/cli": "6.2.0",
-    "@commitlint/config-conventional": "6.1.3",
-    "@commitlint/travis-cli": "6.2.0",
-    "@semantic-release/changelog": "2.0.2",
-    "@semantic-release/exec": "2.2.4",
-    "@semantic-release/git": "5.0.0",
-    "@semantic-release/github": "4.2.17",
-    "@types/jasmine": "2.8.8",
-    "@types/jasminewd2": "2.0.3",
-    "@types/node": "8.10.20",
+    "@angular-devkit/build-angular": "0.10.5",
+    "@angular/cli": "6.2.7",
+    "@angular/compiler-cli": "6.1.10",
+    "@angular/language-service": "6.1.10",
+    "@commitlint/cli": "7.2.1",
+    "@commitlint/config-conventional": "7.1.2",
+    "@commitlint/travis-cli": "7.2.1",
+    "@semantic-release/changelog": "2.1.2",
+    "@semantic-release/exec": "2.3.0",
+    "@semantic-release/git": "6.0.2",
+    "@semantic-release/github": "4.4.2",
+    "@types/jasmine": "2.8.11",
+    "@types/jasminewd2": "2.0.6",
+    "@types/node": "8.10.37",
     "@types/pouchdb": "6.3.2",
     "babel-core": "6.26.3",
-    "babel-jest": "23.0.1",
-    "codelyzer": "4.3.0",
-    "conventional-changelog": "2.0.1",
-    "dotenv": "5.0.1",
-    "electron": "2.0.2",
-    "github-release-notes": "0.16.0",
+    "babel-jest": "23.6.0",
+    "codelyzer": "4.5.0",
+    "conventional-changelog": "2.0.3",
+    "dotenv": "6.1.0",
+    "electron": "2.0.13",
+    "github-release-notes": "0.17.0",
     "husky": "0.14.3",
-    "jest": "23.1.0",
-    "jest-preset-angular": "5.2.2",
-    "pouchdb-adapter-http": "6.4.3",
-    "pouchdb-server": "4.0.1",
-    "protractor": "5.3.2",
-    "release-it": "7.4.7",
-    "semantic-release": "15.5.4",
-    "stylelint": "9.3.0",
+    "jest": "23.6.0",
+    "jest-preset-angular": "5.2.3",
+    "pouchdb-adapter-http": "7.0.0",
+    "pouchdb-server": "4.1.0",
+    "protractor": "5.4.1",
+    "release-it": "7.6.3",
+    "semantic-release": "15.11.0",
+    "stylelint": "9.8.0",
     "stylelint-config-recommended-scss": "3.2.0",
-    "stylelint-scss": "3.1.3",
-    "travis-deploy-once": "5.0.0",
-    "ts-node": "5.0.1",
-    "tslint": "5.10.0",
+    "stylelint-scss": "3.4.0",
+    "travis-deploy-once": "5.0.9",
+    "ts-node": "7.0.1",
+    "tslint": "5.11.0",
     "typescript": "2.9.2",
     "validate-npm-package-name": "3.0.0",
-    "write": "^1.0.3"
+    "write": "1.0.3"
   },
   "engines": {
-    "npm": "5.10.0"
+    "npm": "6.4.1"
   }
 }

log.txt

@@ -1,4 +1,4 @@
-import { Component, OnInit, NgZone } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'inkapp-root',
@@ -7,7 +7,4 @@ import { Component, OnInit, NgZone } from '@angular/core';
   <router-outlet></router-outlet>
   `
 })
-export class InkApp implements OnInit {
-  constructor() {}
-  ngOnInit() {}
-}
+export class InkApp {}

package.json

@@ -1,29 +1,12 @@
-export const DB_CONFIG = {
-  name: 'inkdb',
-  adapter: 'idb',
-  password: 'supercoolpassword',
-  multiInstance: true
-};
-
-export const DB_REMOTE_SYNC_URL = `http://${window.location.hostname}:10101/`;
-
 export const BOARD_DEFAULT_NAME = 'Beautiful';
 export const BOARD_DEFAULT_DESC = 'Default Board';
 
-export const DEFAULT_BUCKET_NAME = `Bucket #`;
-
-export const GITHUB_ACCESS_TOKEN_NAME = 'inkapp_access_token';
-export const GIST_NAME = 'INKAPP :: SYNC SETTINGS';
+export const BUCKET_DEFAULT_NAME = `Bucket #`;
 
 export const DEFAULT_COLOR = '#ffffff';
-
 export const DEFAULT_SETTINGS = [
   {
     key: 'view',
     value: 'default'
-  },
-  {
-    key: 'gist',
-    value: null
   }
 ];

src/app/ink.component.ts

@@ -1,47 +1,41 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
+import { AngularFireModule } from '@angular/fire';
+import { AngularFireAuthModule } from '@angular/fire/auth';
+import { AngularFirestoreModule } from '@angular/fire/firestore';
 import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgxsModule } from '@ngxs/store';
-import { JwtModule } from '@auth0/angular-jwt';
-import { ClipboardModule } from 'ngx-clipboard';
-import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
-import { OverlayModule } from '@angular/cdk/overlay';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { BoardComponent, BucketComponent, DropComponent, HeaderComponent } from '@lib/components';
-import { ActionItemElement, EditableTitleElement, UserCardElement, BillboardElement } from '@lib/elements';
-import { ExportPage, HomePage, NotFoundPage, RedirectPage, SettingsPage } from './pages';
-import { BoardsState, BucketsState, DropsState, SettingsState } from '@lib/store/states';
-import { InkApp } from './ink.component';
+import { ActionItemElement, BillboardElement, EditableTitleElement } from '@lib/elements';
 import { ColorModule } from '@lib/modules/color/color.module';
-import { RoutingModule } from './ink.routing';
+import { BoardsState, BucketsState, DropsState, SettingsState, UserState } from '@lib/store/states';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { NgxsModule } from '@ngxs/store';
+import { ClipboardModule } from 'ngx-clipboard';
 import { environment } from '../environments/environment';
-import { GITHUB_ACCESS_TOKEN_NAME } from './ink.config';
-
-export function tokenGetter() {
-  return localStorage.getItem(GITHUB_ACCESS_TOKEN_NAME);
-}
+import { InkApp } from './ink.component';
+import { RoutingModule } from './ink.routing';
+import { ExportPage, HomePage, NotFoundPage, RedirectPage, SettingsPage } from './pages';
 
 export const MODULES = [
   BrowserModule,
   RoutingModule,
   HttpClientModule,
   FormsModule,
-  NgxsModule.forRoot([SettingsState, BoardsState, BucketsState, DropsState]),
+  AngularFireModule.initializeApp(environment.firebase),
+  AngularFireAuthModule,
+  AngularFirestoreModule,
+  NgxsModule.forRoot([UserState, SettingsState, BoardsState, BucketsState, DropsState]),
   NgxsReduxDevtoolsPluginModule.forRoot(),
   ColorModule,
   ClipboardModule,
   OverlayModule,
-  ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
-  JwtModule.forRoot({
-    config: {
-      tokenGetter: tokenGetter,
-      whitelistedDomains: ['api.github.com']
-    }
-  })
+  ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
 ];
 export const COMPONENTS = [InkApp, HeaderComponent, BoardComponent, BucketComponent, DropComponent];
-export const ELEMENTS = [ActionItemElement, EditableTitleElement, UserCardElement, BillboardElement];
+export const ELEMENTS = [ActionItemElement, EditableTitleElement, BillboardElement];
 export const PAGES = [HomePage, SettingsPage, ExportPage, RedirectPage, NotFoundPage];
 
 @NgModule({

src/app/ink.config.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { NotFoundPage, RedirectPage, ExportPage, SettingsPage, HomePage } from '@root/pages';
+import { RouterModule, Routes } from '@angular/router';
+import { ExportPage, HomePage, NotFoundPage, RedirectPage, SettingsPage } from '@root/pages';
 
 const routes: Routes = [
   { path: '', component: HomePage },

src/app/ink.module.ts

@@ -1,13 +1,11 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Store, Select } from '@ngxs/store';
-import { Observable } from 'rxjs';
-import { map, filter, tap } from 'rxjs/operators';
-import { InkBoardMeta, InkBucketMeta, InkBuckets, InkAppSettings, InkAppSettingsItem } from '@lib/models';
-import { InkBucketsService } from '@lib/services';
-import { BucketsState, SettingsState } from '@store/states';
+import { Component, Input, OnInit } from '@angular/core';
+import { InkBoardMeta, InkBuckets } from '@lib/models';
 import { children } from '@lib/operators';
+import { Select, Store } from '@ngxs/store';
+import { BUCKET_DEFAULT_NAME } from '@root/ink.config';
 import { CreateBucket } from '@store/actions';
-import { DEFAULT_BUCKET_NAME } from '@root/ink.config';
+import { SettingsState } from '@store/states';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'inkapp-board',
@@ -20,10 +18,10 @@ export class BoardComponent implements OnInit {
   constructor(private _store: Store) {}
 
   ngOnInit() {
-    this.buckets$ = this._store.select(s => s.buckets).pipe(children(this.data._id, 'boardId'));
+    this.buckets$ = this._store.select(s => s.buckets).pipe(children(this.data.id, 'boardId'));
   }
 
   createBucket() {
-    this._store.dispatch(new CreateBucket({ name: DEFAULT_BUCKET_NAME, boardId: this.data._id }));
+    this._store.dispatch(new CreateBucket({ name: BUCKET_DEFAULT_NAME, boardId: this.data.id}));
   }
 }

src/app/ink.routing.ts

@@ -2,7 +2,7 @@
 </inkapp-editable-title-el>
 <div class="d-flex flex-wrap">
   <ng-container *ngFor="let color of drops$|async as drops">
-    <inkapp-drop [data]="color" [bucketId]="data._id"></inkapp-drop>
+    <inkapp-drop [data]="color" [bucketId]="data.id"></inkapp-drop>
   </ng-container>
   <span class="ink-color-sticker -empty" (click)="newDrop()">
     <div class="ink-color">
@@ -12,4 +12,4 @@
       Add new
     </div>
   </span>
-</div>
+</div>