refactor: add local/remote setting actions

Author: lokesh-coder

src/app/library/database/settings.schema.ts

@@ -9,7 +9,7 @@ export const SettingsSchema = {
       type: 'string'
     },
     value: {
-      type: 'string'
+      type: ['string', 'boolean', 'number', 'integer', 'null', 'array', 'object']
     }
   },
   required: ['key', 'value']

src/app/library/models.ts

@@ -28,7 +28,7 @@ export interface InkDropMeta {
 }
 export interface InkSettingsMeta {
   key: string;
-  value: string;
+  value: any;
   _id?: string;
 }
 
@@ -45,7 +45,7 @@ export type InkAppSettings = InkAppSettingsItem[];
 
 export interface InkAppSettingsItem {
   key: string;
-  value: string;
+  value: any;
 }
 
 /* doc methods */

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

@@ -13,42 +13,20 @@ export class InkGistService {
   constructor(private _http: HttpClient, private _utilityService: InkUtilsService) {}
   create(data) {
     return this._http
-      .post('https://api.github.com/gists', {
-        description: GIST_NAME,
-        public: false,
-        files: {
-          'inkapp-database.json': {
-            content: JSON.stringify(data, null, ' ')
-          },
-          'last-sync.json': {
-            content: JSON.stringify(this._utilityService.getCurrentStatus(), null, ' ')
-          }
-        }
-      })
+      .post('https://api.github.com/gists', this._getGistPostData(data))
       .pipe(map(gist => this._getGistBasicData(gist)));
   }
 
-  edit(gistId, data) {
-    return this._http
-      .patch(`https://api.github.com/gists/${gistId}`, {
-        files: {
-          'inkapp-database.json': {
-            content: JSON.stringify(data, null, ' ')
-          },
-          'last-sync.json': {
-            content: JSON.stringify(this._utilityService.getCurrentStatus(), null, ' ')
-          }
+  edit(gistId: string, gistData: object) {
+    return this._http.patch(`https://api.github.com/gists/${gistId}`, this._getGistPostData(gistData)).pipe(
+      map(gist => this._getGistBasicData(gist)),
+      catchError(err => {
+        if (err.status === 404) {
+          return this.create(gistData);
         }
+        return of(new Error('Something went wrong!'));
       })
-      .pipe(
-        map(gist => this._getGistBasicData(gist)),
-        catchError(err => {
-          if (err.status === 404) {
-            return this.create(data);
-          }
-          return of(new Error('Something went wrong!'));
-        })
-      );
+    );
   }
 
   get() {
@@ -80,4 +58,17 @@ export class InkGistService {
       owner_profile: gist.owner.html_url
     };
   }
+
+  private _getGistPostData(gistData) {
+    return {
+      files: {
+        'inkapp-database.json': {
+          content: JSON.stringify(gistData, null, ' ')
+        },
+        'last-sync.json': {
+          content: JSON.stringify(this._utilityService.getCurrentStatus(), null, ' ')
+        }
+      }
+    };
+  }
 }

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

@@ -1,4 +1,4 @@
-import { InkAppSettings } from '@lib/models';
+import { InkAppSettings, InkAppSettingsItem, InkSettingsMeta } from '@lib/models';
 
 export class PopulateSettings {
   static readonly type = '[Settings] load all settings';
@@ -10,9 +10,19 @@ export class MergeSettings {
   constructor(public settings: InkAppSettings) {}
 }
 
+export class CreateSettingsItem {
+  static readonly type = '[Settings] create settings';
+  constructor(public key: string, public value: any) {}
+}
+
+export class AddSettingsItem {
+  static readonly type = '[Settings] add settings';
+  constructor(public settingsItem: InkSettingsMeta) {}
+}
+
 export class UpdateSettingsItem {
   static readonly type = '[Settings] update';
-  constructor(public key: string, public value: string) {}
+  constructor(public key: string, public value: any) {}
 }
 
 export class DeleteSettingsItem {

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

@@ -6,11 +6,13 @@ import {
   MergeSettings,
   FetchRemoteGist,
   CreateRemoteGist,
-  UpdateRemoteGist
+  UpdateRemoteGist,
+  AddSettingsItem,
+  CreateSettingsItem
 } from '@store/actions';
 import { SelectMultipleControlValueAccessor } from '@angular/forms';
 import { InkSettingsService, InkGistService } from '@lib/services';
-import { tap } from 'rxjs/operators';
+import { tap, map } from 'rxjs/operators';
 
 @State<Partial<InkAppSettings>>({
   name: 'settings',
@@ -43,6 +45,19 @@ export class SettingsState implements NgxsOnInit {
     });
   }
 
+  @Action(CreateSettingsItem)
+  createSettingsItem(ctx: StateContext<InkAppSettings>, action: CreateSettingsItem) {
+    this._service.add(action.key, action.value).then(settingsItem => {
+      ctx.dispatch(new AddSettingsItem({ key: action.key, value: action.value }));
+    });
+  }
+
+  @Action(AddSettingsItem)
+  addSettingsItem(ctx: StateContext<InkAppSettings>, action: AddSettingsItem) {
+    const state = ctx.getState();
+    ctx.setState([...state, action.settingsItem]);
+  }
+
   @Action(PopulateSettings)
   populateSettings(ctx: StateContext<InkAppSettings>, action: PopulateSettings) {
     ctx.setState(action.settings);
@@ -58,14 +73,17 @@ export class SettingsState implements NgxsOnInit {
     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]);
-  // }
+  @Action(CreateRemoteGist)
+  createRemoteGist(ctx: StateContext<InkAppSettings>, action: CreateRemoteGist) {
+    return this._gistService
+      .create(action.gistData)
+      .pipe(tap(gist => ctx.dispatch(new CreateSettingsItem('gist', gist))));
+  }
+
+  @Action(UpdateRemoteGist)
+  updateRemoteGist(ctx: StateContext<InkAppSettings>, action: UpdateRemoteGist) {
+    return this._gistService
+      .edit(action.gistId, action.gistData)
+      .pipe(tap(gist => ctx.dispatch(new UpdateSettingsItem('gist', gist))));
+  }
 }

src/app/pages/settings/settings.page.ts

@@ -4,15 +4,21 @@ 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, FetchRemoteGist } from '@store/actions';
+import {
+  PopulateSettings,
+  UpdateSettingsItem,
+  MergeSettings,
+  FetchRemoteGist,
+  CreateRemoteGist,
+  UpdateRemoteGist
+} from '@store/actions';
 import { GITHUB_ACCESS_TOKEN_NAME } from '../../ink.config';
 import { Observable } from 'rxjs';
 import { SettingsState } from '@store/states';
 
 @Component({
   selector: 'inkapp-settings-page',
-  templateUrl: './settings.page.html',
-  styles: []
+  templateUrl: './settings.page.html'
 })
 export class SettingsPage implements OnInit {
   @Select(SettingsState.view) view$: Observable<string>;
@@ -31,7 +37,7 @@ export class SettingsPage implements OnInit {
     this._settingsService.getAll().then(doc => {
       const user = doc.filter(s => s.key === 'gist');
       if (user.length > 0) {
-        this.userData = JSON.parse(user[0].value);
+        this.userData = user[0].value;
       }
       this._store.dispatch(new MergeSettings(doc));
     });
@@ -47,23 +53,13 @@ export class SettingsPage implements OnInit {
     const data = await db.dump();
     const gist = await db.settings.findOne({ key: 'gist' }).exec();
     if (gist) {
-      const gistData = JSON.parse(gist.value);
-      this._gistService.edit(gistData.id, data).subscribe(
-        res => {
-          this._settingsService.update('gist', JSON.stringify(res)).then(doc => {
-            console.log('settings updated with sync', doc);
-          });
-        },
-        err => {
-          console.log('something went wrong', err);
-        }
-      );
+      this._store.dispatch(new UpdateRemoteGist(gist.value.id, data)).subscribe(res => {
+        console.log('hooohoo remote gist is updated!');
+      });
       return;
     }
-    this._gistService.create(data).subscribe(res => {
-      this._settingsService.add('gist', JSON.stringify(res)).then(doc => {
-        console.log('settings updatedw ith sync', doc);
-      });
+    this._store.dispatch(new CreateRemoteGist(data)).subscribe(res => {
+      console.log('hooohoo remote gist ready!');
     });
   }
   async loadGists() {