refactor: wip

Author: lokesh-coder

package-lock.json

@@ -5,8 +5,7 @@
   "scripts": {
     "ng": "ng",
     "config:secrets": "ts-node ./config/env.secrets.ts",
-    "start":
-      "npm run config:secrets && ng serve --proxy-config config/proxy.conf.json -o --host=0.0.0.0 --disable-host-check",
+    "start": "npm run config:secrets && ng serve --proxy-config config/proxy.conf.json -o --host=0.0.0.0 --disable-host-check",
     "build": "ng build",
     "build:prod": "ng build --prod",
     "test": "ng test",

package.json

@@ -15,5 +15,3 @@ const routes: Routes = [
   exports: [RouterModule]
 })
 export class RoutingModule {}
-
-export const routedComponents = [HomePage];

src/app/ink.routing.ts

@@ -10,8 +10,7 @@ import { children } from '@lib/operators';
 
 @Component({
   selector: 'inkapp-bucket',
-  templateUrl: './bucket.component.html',
-  styles: []
+  templateUrl: './bucket.component.html'
 })
 export class BucketComponent implements OnInit {
   @Input() index: number;

src/app/library/components/bucket/bucket.component.ts

@@ -22,12 +22,10 @@ export class DropComponent implements OnInit, OnDestroy {
   constructor(private _store: Store, private _colorPickerService: InkColorPickerService, private _elRef: ElementRef) {}
 
   ngOnInit() {
-    console.log('drop');
     this._colorPickerService.configure(this._elRef);
     this.drop = this.data;
   }
   openColorPicker() {
-    console.log('hsl');
     this.colorPickerRef = this._colorPickerService.getRef();
     if (this.data.meta.hsl) {
       this.colorPickerRef.instance.color = this.data.meta.hsl;
@@ -43,7 +41,6 @@ export class DropComponent implements OnInit, OnDestroy {
     });
     this._colorPickerService.backdropClick().subscribe(b => {
       if (this.drop.name !== this.data.name) {
-        console.log('backdrop clocked update', this.data);
         this._store.dispatch(new UpdateDrop(this.drop));
       }
     });

src/app/library/components/drop/drop.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { map, tap, filter } from 'rxjs/operators';
 import { InkBucketsService } from '@lib/services';
@@ -9,12 +9,9 @@ import { BoardsState } from '@store/states';
   selector: 'inkapp-header',
   templateUrl: './header.component.html'
 })
-export class HeaderComponent implements OnInit {
+export class HeaderComponent {
   currentBoardId: string;
   constructor(private _store: Store, private _bucketService: InkBucketsService) {}
-
-  ngOnInit() {}
-
   newBucket() {
     const defaultBoardId = this._store.selectSnapshot(BoardsState.defaultBoard);
     this._store.dispatch(new CreateBucket({ name: 'Hello-123', boardId: defaultBoardId }));

src/app/library/components/header/header.component.ts

@@ -1,21 +1,13 @@
-import { Component, OnInit, EventEmitter } from '@angular/core';
-import { Store } from '@ngxs/store';
+import { Component, EventEmitter } from '@angular/core';
 import { Subject } from 'rxjs';
-import { InkDropMeta } from '@lib/models';
 
 @Component({
   selector: 'inkapp-chrome-color-picker',
   templateUrl: 'chrome-color-picker.template.html'
 })
-export class ChromeColorPickerComponent implements OnInit {
-  inkData: InkDropMeta;
-  bucketId: InkDropMeta;
-  private colorChanged: Subject<any> = new Subject();
-  constructor(private store: Store) {}
-
-  ngOnInit() {}
+export class ChromeColorPickerComponent {
+  colorChanged: Subject<any> = new Subject();
   onColorChange(color) {
-    this.colorChanged.next(color);
     return this.colorChanged.asObservable();
   }
 }

src/app/library/modules/color/components/chrome-color-picker.component.ts

@@ -1 +1 @@
-<color-chrome (onChange)="onColorChange($event)"></color-chrome>
+<color-chrome (onChange)="colorChanged.next($event)"></color-chrome>

src/app/library/modules/color/components/chrome-color-picker.template.html

@@ -59,7 +59,11 @@ export class InkGistService {
           return this._http.get(`https://api.github.com/gists/${gist.id}`);
         }
         return of(null);
-      })
+      }),
+      map(gist => {
+        return gist.files['inkapp-database.json'].content;
+      }),
+      map(gist => JSON.parse(gist))
     );
   }
 

src/app/library/services/gist.service.ts

@@ -19,3 +19,17 @@ export class DeleteSettingsItem {
   static readonly type = '[Settings] delete';
   constructor(public key: string) {}
 }
+
+export class FetchRemoteGist {
+  static readonly type = '[Settings] fetch remote gist';
+}
+
+export class CreateRemoteGist {
+  static readonly type = '[Settings] create remote gist';
+  constructor(public gistData: object) {}
+}
+
+export class UpdateRemoteGist {
+  static readonly type = '[Settings] update remote gist';
+  constructor(public gistId: string, public gistData: object) {}
+}

src/app/library/store/actions/settings.action.ts

@@ -1,8 +1,16 @@
 import { State, Action, StateContext, Selector, NgxsOnInit } from '@ngxs/store';
 import { InkAppSettingsItem, InkAppSettings } from '@lib/models';
-import { UpdateSettingsItem, PopulateSettings, MergeSettings } from '@store/actions';
+import {
+  UpdateSettingsItem,
+  PopulateSettings,
+  MergeSettings,
+  FetchRemoteGist,
+  CreateRemoteGist,
+  UpdateRemoteGist
+} from '@store/actions';
 import { SelectMultipleControlValueAccessor } from '@angular/forms';
-import { InkSettingsService } from '@lib/services';
+import { InkSettingsService, InkGistService } from '@lib/services';
+import { tap } from 'rxjs/operators';
 
 @State<Partial<InkAppSettings>>({
   name: 'settings',
@@ -14,7 +22,7 @@ export class SettingsState implements NgxsOnInit {
     return state.filter(s => s.key === 'view')[0].value;
   }
 
-  constructor(private _service: InkSettingsService) {}
+  constructor(private _service: InkSettingsService, private _gistService: InkGistService) {}
   ngxsOnInit(ctx: StateContext<InkAppSettings>) {
     return this._service.getAll().then(settings => {
       ctx.dispatch(new MergeSettings(settings));
@@ -44,4 +52,20 @@ export class SettingsState implements NgxsOnInit {
     const state = ctx.getState();
     ctx.setState([...state, ...action.settings]);
   }
+
+  @Action(FetchRemoteGist)
+  fetchRemoteGist(ctx: StateContext<InkAppSettings>, action: FetchRemoteGist) {
+    return this._gistService.get();
+  }
+
+  // @Action(CreateRemoteGist)
+  // createRemoteGist(ctx: StateContext<InkAppSettings>, action: CreateRemoteGist) {
+  //   const state = ctx.getState();
+  //   ctx.setState([...state, ...action.settings]);
+  // }
+  // @Action(UpdateRemoteGist)
+  // updateRemoteGist(ctx: StateContext<InkAppSettings>, action: UpdateRemoteGist) {
+  //   const state = ctx.getState();
+  //   ctx.setState([...state, ...action.settings]);
+  // }
 }

src/app/library/store/states/settings.state.ts

@@ -5,13 +5,14 @@ import { InkBoardMeta } from '@lib/models';
 import { InkBoardsService, InkDatabaseService } from '@lib/services';
 import { FetchAllBoards, FetchAllBuckets, FetchAllDrops, RemoveAllBuckets, RemoveAllDrops } from '@store/actions';
 import { BoardsState } from '@store/states';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'inkapp-home-page',
   templateUrl: './home.page.html'
 })
 export class HomePage implements OnInit, OnDestroy {
-  @Select(BoardsState) boards$: InkBoardMeta[];
+  @Select(BoardsState) boards$: Observable<InkBoardMeta[]>;
   constructor(private _store: Store) {}
 
   ngOnInit() {

src/app/pages/home/home.page.ts

@@ -1,11 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'inkapp-notfound-page',
   template: 'Page not found'
 })
-export class NotFoundPage implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
+export class NotFoundPage {}

src/app/pages/notfound/nofound.page.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 import { InkGithubService } from '@lib/services';
+import { GITHUB_ACCESS_TOKEN_NAME } from '@root/ink.config';
 
 @Component({
   selector: 'inkapp-redirect-page',
@@ -21,7 +22,7 @@ export class RedirectPage implements OnInit {
         .split('&')
         .map(s => s.split('='))
         .map(d => ({ [d[0]]: d[1] }));
-      localStorage.setItem('inkapp_access_token', data[0].access_token);
+      localStorage.setItem(GITHUB_ACCESS_TOKEN_NAME, data[0].access_token);
       this._router.navigateByUrl('/settings');
     });
   }

src/app/pages/redirect/redirect.page.ts

@@ -4,7 +4,7 @@ import merge from 'deepmerge';
 import { environment } from '../../../environments/environment';
 import { InkAppSettingsItem, InkGist } from '@lib/models';
 import { InkDatabaseService, InkSettingsService, InkGithubService, InkGistService } from '@lib/services';
-import { PopulateSettings, UpdateSettingsItem, MergeSettings } from '@store/actions';
+import { PopulateSettings, UpdateSettingsItem, MergeSettings, FetchRemoteGist } from '@store/actions';
 import { GITHUB_ACCESS_TOKEN_NAME } from '../../ink.config';
 import { Observable } from 'rxjs';
 import { SettingsState } from '@store/states';
@@ -35,10 +35,7 @@ export class SettingsPage implements OnInit {
       }
       this._store.dispatch(new MergeSettings(doc));
     });
-    this.view$.subscribe(v => {
-      console.log('fot this', v);
-      this.currentView = v;
-    });
+    this.view$.subscribe(v => (this.currentView = v));
     this.connectedToGithub = !!localStorage.getItem(GITHUB_ACCESS_TOKEN_NAME);
   }
   disconnect() {}
@@ -54,7 +51,7 @@ export class SettingsPage implements OnInit {
       this._gistService.edit(gistData.id, data).subscribe(
         res => {
           this._settingsService.update('gist', JSON.stringify(res)).then(doc => {
-            console.log('settings updatedw ith sync', doc);
+            console.log('settings updated with sync', doc);
           });
         },
         err => {
@@ -71,13 +68,7 @@ export class SettingsPage implements OnInit {
   }
   async loadGists() {
     const db = await this._db.getDatabase();
-    const data = await db.dump();
-    this._gistService.get().subscribe(async (gist: any) => {
-      if (!gist) {
-        console.log('No gist!');
-        return;
-      }
-      const gistData = JSON.parse(gist.files['inkapp-database.json'].content);
+    this._store.dispatch(new FetchRemoteGist()).subscribe(async gistData => {
       await db.importDump(gistData);
     });
   }