feat: added settings state and actions for test

Author: lokesh-coder

src/app/components/index.ts

@@ -0,0 +1,7 @@
+export { NavbarComponent } from './navbar/navbar.component';
+export { CollectionComponent } from './collection/collection.component';
+export { BucketComponent } from './bucket/bucket.component';
+export { PromptComponent } from './prompt/prompt.component';
+export { ColorPickerComponent } from './color-picker/color-picker.component';
+export { ColorFormComponent } from './color-form/color-form.component';
+export { InkComponent } from './ink/ink.component';

src/app/ink.component.ts

@@ -1,9 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { ChangeView } from './store/actions/settings.action';
+import { InkAppView } from './ink.model';
+import { DBService } from './services/db.service';
 
 @Component({
   selector: 'inkapp-root',
-  templateUrl: './ink.component.html'
+  template: '<router-outlet></router-outlet>'
 })
-export class InkApp {
-  title = 'ink';
+export class InkApp implements OnInit {
+  constructor(private store: Store, private db: DBService) {}
+  ngOnInit() {
+    this.store.dispatch(new ChangeView(InkAppView.ROUND));
+  }
 }

src/app/ink.config.ts

@@ -1,31 +1,34 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { BrowserModule } from '@angular/platform-browser';
+import { NgxsModule } from '@ngxs/store';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import {
+  BucketComponent,
+  CollectionComponent,
+  ColorFormComponent,
+  ColorPickerComponent,
+  InkComponent,
+  NavbarComponent,
+  PromptComponent
+} from './components';
 import { InkApp } from './ink.component';
-import { HomePage } from './pages/home/home.component';
 import { RoutingModule } from './ink.routing';
-import { NavbarComponent } from './components/navbar/navbar.component';
-import { CollectionComponent } from './components/collection/collection.component';
-import { BucketComponent } from './components/bucket/bucket.component';
-import { SettingsComponent } from './pages/settings/settings.component';
-import { PromptComponent } from './components/prompt/prompt.component';
-import { ColorPickerComponent } from './components/color-picker/color-picker.component';
-import { ColorFormComponent } from './components/color-form/color-form.component';
-import { InkComponent } from './components/ink/ink.component';
+import { HomePage } from './pages/home/home.component';
+import { SettingsPage } from './pages/settings/settings.component';
+import { SettingsState } from './store/states/settings.state';
 
-export const MODULES = [RoutingModule];
+export const MODULES = [RoutingModule, NgxsModule.forRoot([SettingsState]), NgxsReduxDevtoolsPluginModule.forRoot()];
 export const COMPONENTS = [
   InkApp,
-  InkComponent,
   NavbarComponent,
   CollectionComponent,
   BucketComponent,
-  SettingsComponent,
   PromptComponent,
   ColorPickerComponent,
-  ColorFormComponent
+  ColorFormComponent,
+  InkComponent
 ];
-export const PAGES = [HomePage];
+export const PAGES = [HomePage, SettingsPage];
 
 @NgModule({
   declarations: [...COMPONENTS, ...PAGES],

src/app/ink.module.ts

@@ -1,15 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'inkapp-settings',
+  selector: 'inkapp-settings-page',
   templateUrl: './settings.component.html',
   styles: []
 })
-export class SettingsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
+export class SettingsPage implements OnInit {
+  constructor() {}
 
+  ngOnInit() {}
 }

src/app/pages/settings/settings.component.ts

@@ -0,0 +1,6 @@
+import { InkAppView } from '../../ink.model';
+
+export class ChangeView {
+  static readonly type = '[Settings] change view';
+  constructor(public view: InkAppView) {}
+}

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

@@ -0,0 +1,18 @@
+import { State, Action, StateContext } from '@ngxs/store';
+import { InkAppSettings } from '../../ink.model';
+import { ChangeView } from '../actions/settings.action';
+
+@State<Partial<InkAppSettings>>({
+  name: 'settings',
+  defaults: {}
+})
+export class SettingsState {
+  @Action(ChangeView)
+  changeView(ctx: StateContext<InkAppSettings>, action: ChangeView) {
+    const state = ctx.getState();
+    ctx.setState({
+      ...state,
+      view: action.view
+    });
+  }
+}