feat: store actions added

Author: lokesh-coder

src/app/components/collection/collection.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Store, Select } from '@ngxs/store';
 import { InkBucket, InkCollection, InkCollectionMeta } from '../../ink.model';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, filter } from 'rxjs/operators';
 
 @Component({
   selector: 'inkapp-collection',
@@ -15,7 +15,7 @@ export class CollectionComponent implements OnInit {
   constructor(private store: Store) {
     this.store
       .select(s => s.collection)
-      .pipe(map(x => x[0]))
+      .pipe(filter(s => s.length > 0), map(x => x[0]))
       .subscribe(r => {
         console.log('CColl', r);
         this.collection = r;

src/app/components/ink/ink.component.ts

@@ -14,7 +14,7 @@ import { map, debounceTime } from 'rxjs/operators';
 })
 export class InkComponent implements OnInit, OnDestroy {
   @Input() inkData: InkColor;
-  @Input() bucketId: number;
+  @Input() bucketId: string;
   overlayRef: OverlayRef;
   colorPanelPortal: ComponentPortal<ChromeComponent>;
   colorPickerRef: ComponentRef<ChromeComponent>;
@@ -41,7 +41,7 @@ export class InkComponent implements OnInit, OnDestroy {
     }
     this.colorPickerRef.instance.onChange.pipe(map(c => c.color)).subscribe(color => {
       this.store.dispatch(
-        new UpdateInkColor({ bucketId: this.bucketId, value: color.hex, meta: color, id: this.inkData.id })
+        new UpdateInkColor({ bucketId: this.inkData.bucketId, value: color.hex, meta: color, id: this.inkData.id })
       );
     });
     this.overlayRef.backdropClick().subscribe(b => {

src/app/components/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
   <div class="container">
     <a class="navbar-brand" href="#">InkBucket</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"

src/app/components/navbar/navbar.component.ts

@@ -1,18 +1,27 @@
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { CreateBucket } from '../../store/actions/bucket.action';
+import { map, tap, filter } from 'rxjs/operators';
 
 @Component({
   selector: 'inkapp-navbar',
   templateUrl: './navbar.component.html',
   styles: []
 })
 export class NavbarComponent implements OnInit {
+  currentCollectionId: string;
   constructor(private store: Store) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.store
+      .select(s => s.collection)
+      .pipe(filter(s => s.length > 0), map(s => s[0].id))
+      .subscribe(r => (this.currentCollectionId = r));
+  }
 
   newBucket() {
-    this.store.dispatch(new CreateBucket({ collectionId: 1, id: 1, name: 'Hello-123' }));
+    if (this.currentCollectionId) {
+      this.store.dispatch(new CreateBucket({ collectionId: this.currentCollectionId, name: 'Hello-123' }));
+    }
   }
 }

src/app/ink.model.ts

@@ -5,9 +5,9 @@ export enum InkColorType {
 }
 
 export interface InkBucketMeta {
-  id: number;
+  id?: string;
   name: string;
-  collectionId: number;
+  collectionId: string;
 }
 
 export type InkBucket = InkBucketMeta[];
@@ -17,13 +17,13 @@ export interface InkColor {
   name?: string;
   value: string;
   meta: any;
-  bucketId: number;
+  bucketId: string;
 }
 
 export type Ink = InkColor[];
 
 export interface InkCollectionMeta {
-  id: number;
+  id: string;
   name: string;
   created: Date;
 }

src/app/pages/home/home.component.html

@@ -1,2 +1,4 @@
 <inkapp-navbar></inkapp-navbar>
-<inkapp-collection></inkapp-collection>
+<div class="container">
+  <inkapp-collection></inkapp-collection>
+</div>

src/app/services/db.service.ts

@@ -1,22 +1,35 @@
 import { Injectable } from '@angular/core';
 import * as Datastore from 'nedb';
+import { bindCallback } from 'rxjs';
+import { Store } from '@ngxs/store';
+import { LoadInitialData } from '../store/actions/general.action';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DBService {
-  db;
-  _constructor() {
-    this.db = new Datastore({ filename: 'ink/db' });
-    this.db.loadDatabase(e => {});
-    const doc = {
-      hello: 'Hambyui'
-    };
-    this.db.insert(doc, function(err, newDoc) {
-      console.log('database insert done!', doc);
+  db = { bucket: null, ink: null, collection: null };
+  constructor(private store: Store) {
+    Object.keys(this.db).forEach(key => {
+      this.db[key] = new Datastore({ filename: `ink/db/${key}`, autoload: true });
+      this.db[key].find({}, (err, docs) => {
+        this.store.dispatch(new LoadInitialData(key, docs));
+        console.log('while loading..', docs);
+      });
     });
-    this.db.find({}, function(err, docs) {
+  }
+
+  findDocument(coll, q = {}) {
+    this.db[coll].find(q, function(err, docs) {
       console.log('database fond done!', docs);
     });
   }
+
+  saveDocument(coll, doc) {
+    return bindCallback(this.db[coll].insert(doc));
+  }
+
+  updateDocument(coll, query = {}, doc) {
+    this.db[coll].update(query, doc);
+  }
 }

src/app/services/util.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UtilService {
+  get ID(): string {
+    return (
+      Math.random()
+        .toString(36)
+        .substring(2, 5) +
+      Math.random()
+        .toString(36)
+        .substring(2, 5)
+    );
+  }
+}

src/app/store/actions/bucket.action.ts

@@ -4,3 +4,7 @@ export class CreateBucket {
   static readonly type = '[Bucket] Create new bucket';
   constructor(public bucketData: InkBucketMeta) {}
 }
+export class UpdateBucket {
+  static readonly type = '[Ink] Update bucket';
+  constructor(public bucketData: InkBucketMeta) {}
+}

src/app/store/actions/collection.actions.ts

@@ -1,6 +1,11 @@
-import { InkAppView, InkCollection } from '../../ink.model';
+import { InkAppView, InkCollection, InkCollectionMeta } from '../../ink.model';
 
 export class CreateCollection {
   static readonly type = '[Collection] Create new collection';
-  constructor(public collectionData: InkCollection) {}
+  constructor(public collectionData: InkCollectionMeta) {}
+}
+
+export class UpdateCollection {
+  static readonly type = '[Collection] Update collection';
+  constructor(public collectionData: InkCollectionMeta) {}
 }

src/app/store/actions/general.action.ts

@@ -0,0 +1,6 @@
+import { InkBucket, InkBucketMeta } from '../../ink.model';
+
+export class LoadInitialData {
+  static readonly type = '[General] Load initial data';
+  constructor(public db: string, public value: any) {}
+}

src/app/store/states/bucket.state.ts

@@ -1,16 +1,44 @@
 import { State, Action, StateContext } from '@ngxs/store';
 import { InkAppSettings, InkBucket } from '../../ink.model';
-import { CreateBucket } from '../actions/bucket.action';
+import { CreateBucket, UpdateBucket } from '../actions/bucket.action';
+import { DBService } from '../../services/db.service';
+import { LoadInitialData } from '../actions/general.action';
+import { UtilService } from '../../services/util.service';
 
 @State<InkBucket>({
   name: 'bucket',
   defaults: []
 })
 export class BucketState {
+  constructor(private db: DBService, private util: UtilService) {}
+
   @Action(CreateBucket)
   createBucket(ctx: StateContext<InkBucket>, action: CreateBucket) {
     const state = ctx.getState();
-    state.push(action.bucketData);
+    state.push({ ...action.bucketData, id: this.util.ID });
+    ctx.setState([...state]);
+    this.db.saveDocument('bucket', state);
+  }
+
+  @Action(UpdateBucket)
+  updateBucket(ctx: StateContext<InkBucket>, action: UpdateBucket) {
+    let state: any = ctx.getState();
+    state = state.map((a: any) => {
+      if (a.id === action.bucketData.id) {
+        a.name = action.bucketData.name;
+      }
+      return a;
+    });
     ctx.setState([...state]);
+    this.db.updateDocument('bucket', { id: action.bucketData.id }, action.bucketData);
+  }
+
+  @Action(LoadInitialData)
+  loadBucketData(ctx: StateContext<InkBucket>, action: LoadInitialData) {
+    if (action.db !== 'bucket') {
+      return;
+    }
+    ctx.setState(action.value);
+    this.db.saveDocument('bucket', action.value);
   }
 }

src/app/store/states/collection.state.ts

@@ -1,14 +1,50 @@
 import { State, Action, StateContext } from '@ngxs/store';
-import { InkCollection } from '../../ink.model';
+import { InkCollection, InkCollectionMeta } from '../../ink.model';
+import { LoadInitialData } from '../actions/general.action';
+import { UtilService } from '../../services/util.service';
+import { CreateCollection, UpdateCollection } from '../actions/collection.actions';
+import { DBService } from '../../services/db.service';
 
 @State<InkCollection>({
   name: 'collection',
-  defaults: [
-    {
-      id: 1,
+  defaults: []
+})
+export class CollectionState {
+  constructor(private db: DBService, private util: UtilService) {}
+
+  @Action(CreateCollection)
+  createCollection(ctx: StateContext<InkCollection>, action: CreateCollection) {
+    const state = ctx.getState();
+    state.push({ ...action.collectionData, id: this.util.ID });
+    ctx.setState([...state]);
+    this.db.saveDocument('collection', state);
+  }
+
+  @Action(UpdateCollection)
+  updateCollection(ctx: StateContext<InkCollection>, action: UpdateCollection) {
+    let state: any = ctx.getState();
+    state = state.map((a: any) => {
+      if (a.id === action.collectionData.id) {
+        a.name = action.collectionData.name;
+      }
+      return a;
+    });
+    ctx.setState([...state]);
+    this.db.updateDocument('collection', { id: action.collectionData.id }, action.collectionData);
+  }
+
+  @Action(LoadInitialData)
+  loadCollectionData(ctx: StateContext<InkCollection>, action: LoadInitialData) {
+    if (action.db !== 'collection') {
+      return;
+    }
+    const defaultData = {
+      id: this.util.ID,
       created: new Date(),
       name: 'Default'
-    }
-  ]
-})
-export class CollectionState {}
+    };
+    const data = action.value.length === 0 ? defaultData : action.value;
+    ctx.setState(data);
+    this.db.saveDocument('collection', data);
+  }
+}

src/app/store/states/ink.state.ts

@@ -1,41 +1,45 @@
 import { State, Action, StateContext } from '@ngxs/store';
 import { Ink } from '../../ink.model';
 import { AddNewInk, UpdateInkColor } from '../actions/ink.action';
+import { LoadInitialData } from '../actions/general.action';
+import { DBService } from '../../services/db.service';
+import { UtilService } from '../../services/util.service';
 
 @State<Ink>({
   name: 'ink',
   defaults: []
 })
 export class InkState {
+  constructor(private db: DBService, private util: UtilService) {}
   @Action(AddNewInk)
   createBucket(ctx: StateContext<Ink>, action: AddNewInk) {
     const state = ctx.getState();
-    state.push({ ...action.inkData, id: this.getID() });
+    state.push({ ...action.inkData, id: this.util.ID });
     ctx.setState([...state]);
+    this.db.saveDocument('ink', state);
   }
 
   @Action(UpdateInkColor)
   updateInkColor(ctx: StateContext<Ink>, action: UpdateInkColor) {
     let state: any = ctx.getState();
-    console.log('state', state);
     state = state.map((a: any) => {
       if (a.id === action.inkData.id) {
         a.value = action.inkData.value;
+        a.bucketId = action.inkData.bucketId;
         a.meta = action.inkData.meta;
       }
       return a;
     });
     ctx.setState([...state]);
+    this.db.updateDocument('ink', { id: action.inkData.id }, action.inkData);
   }
 
-  private getID() {
-    return (
-      Math.random()
-        .toString(36)
-        .substring(2, 5) +
-      Math.random()
-        .toString(36)
-        .substring(2, 5)
-    );
+  @Action(LoadInitialData)
+  loadInkData(ctx: StateContext<Ink>, action: LoadInitialData) {
+    if (action.db !== 'ink') {
+      return;
+    }
+    ctx.setState(action.value);
+    this.db.saveDocument('ink', action.value);
   }
 }

src/index.html

@@ -6,6 +6,7 @@
   <title>InkBucket</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700" rel="stylesheet">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>