feat: add todos, lazy reducer, big input custom component

package.json

@@ -32,11 +32,13 @@
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^2.0.3",
     "@ngrx/store": "^2.2.2",
+    "@types/node-uuid": "0.0.28",
     "bootstrap": "^4.0.0-alpha.6",
     "classlist.js": "^1.1",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "intl": "^1.2.5",
+    "node-uuid": "^1.4.8",
     "rxjs": "^5.1.0",
     "web-animations-js": "^2.2.5",
     "zone.js": "^0.8.4"

src/app/app.component.html

@@ -48,13 +48,7 @@
 
       </md-toolbar>
 
-      <div class="container">
-        <div class="row">
-          <div class="col-sm-12">
-            <router-outlet></router-outlet>
-          </div>
-        </div>
-      </div>
+      <router-outlet></router-outlet>
 
       <div class="push"></div>
 

src/app/core/core.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { StoreModule, combineReducers } from '@ngrx/store';
+import { StoreModule, combineReducers, ActionReducer } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 
 import { settingsReducer, SettingsEffects } from '../settings';
@@ -10,18 +10,25 @@ import {
   localStorageInitStateMiddleware
 } from './local-storage/local-storage.middleware';
 
-const rootReducer = localStorageInitStateMiddleware(
-  combineReducers({
-    settings: settingsReducer
-  })
-);
 
-export function reducer(state, action) { return rootReducer(state, action); }
+export function createReducer(asyncReducers = {}): ActionReducer<any> {
+  return localStorageInitStateMiddleware(
+    combineReducers(Object.assign({
+      settings: settingsReducer
+    }, asyncReducers))
+  );
+}
+
+const reducer = createReducer();
+
+export function reducerAoT(state, action) {
+  return reducer(state, action);
+}
 
 @NgModule({
   imports: [
     CommonModule,
-    StoreModule.provideStore((reducer)),
+    StoreModule.provideStore(reducerAoT),
     EffectsModule.run(SettingsEffects)
   ],
   declarations: [],

src/app/core/index.ts

@@ -1,2 +1,3 @@
 export * from './local-storage/local-storage.service';
+export * from './local-storage/local-storage.middleware';
 export * from './core.module';

src/app/examples/examples-routing.module.ts

@@ -1,16 +1,27 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
+import { ExamplesComponent } from './examples/examples.component';
 import { TodosComponent } from './todos/todos.component';
+import { StockMarketComponent } from './stock-market/stock-market.component';
 
 const routes: Routes = [
   {
     path: '',
-    redirectTo: 'todos',
-    pathMatch: 'full'
-  }, {
-    path: 'todos',
-    component: TodosComponent
+    component: ExamplesComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: 'todos',
+        pathMatch: 'full'
+      }, {
+        path: 'todos',
+        component: TodosComponent
+      }, {
+        path: 'stock-market',
+        component: StockMarketComponent
+      }
+    ]
   }
 ];
 

src/app/examples/examples.module.ts

@@ -1,17 +1,34 @@
 import { NgModule } from '@angular/core';
+import { Store } from '@ngrx/store';
 
-import { CoreModule } from '../core';
+import { CoreModule, createReducer } from '../core';
 import { SharedModule } from '../shared';
 
 import { ExamplesRoutingModule } from './examples-routing.module';
 import { TodosComponent } from './todos/todos.component';
+import { ExamplesComponent } from './examples/examples.component';
+import { StockMarketComponent } from './stock-market/stock-market.component';
+import { StockMarketService } from './stock-market/stock-market.service';
+
+import { todosReducer } from './todos/todos.reducer';
+
+export const appReducerWithExamples = createReducer({
+  todos: todosReducer
+});
 
 @NgModule({
   imports: [
     CoreModule,
     SharedModule,
     ExamplesRoutingModule
   ],
-  declarations: [TodosComponent]
+  declarations: [TodosComponent, ExamplesComponent, StockMarketComponent],
+  providers: [StockMarketService]
 })
-export class ExamplesModule { }
+export class ExamplesModule {
+
+  constructor(private store: Store<any> ) {
+    store.replaceReducer(appReducerWithExamples);
+  }
+
+}

src/app/examples/examples/examples.component.html

@@ -0,0 +1,10 @@
+<nav md-tab-nav-bar>
+  <a md-tab-link
+     *ngFor="let e of examples"
+     [routerLink]="e.link"
+     routerLinkActive #rla="routerLinkActive"
+     [active]="rla.isActive">
+    {{e.label}}
+  </a>
+</nav>
+<router-outlet></router-outlet>

src/app/examples/examples/examples.component.scss

@@ -0,0 +1,3 @@
+nav {
+  margin-bottom: 20px;
+}

src/app/examples/examples/examples.component.spec.ts

@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { SharedModule } from '../../shared';
+import { CoreModule } from '../../core';
+
+import { ExamplesComponent } from './examples.component';
+
+describe('ExamplesComponent', () => {
+  let component: ExamplesComponent;
+  let fixture: ComponentFixture<ExamplesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        SharedModule,
+        CoreModule
+      ],
+      declarations: [ ExamplesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExamplesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/examples/examples/examples.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'anms-examples',
+  templateUrl: './examples.component.html',
+  styleUrls: ['./examples.component.scss']
+})
+export class ExamplesComponent implements OnInit {
+
+  examples = [
+    { link: 'todos', label: 'Todos' },
+    { link: 'stock-market', label: 'Stock Market' },
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/examples/stock-market/stock-market.component.html

@@ -0,0 +1,3 @@
+<p>
+  stock-market works!
+</p>

src/app/examples/stock-market/stock-market.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StockMarketComponent } from './stock-market.component';
+
+describe('StockMarketComponent', () => {
+  let component: StockMarketComponent;
+  let fixture: ComponentFixture<StockMarketComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StockMarketComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StockMarketComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/examples/stock-market/stock-market.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'anms-stock-market',
+  templateUrl: './stock-market.component.html',
+  styleUrls: ['./stock-market.component.scss']
+})
+export class StockMarketComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/examples/stock-market/stock-market.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { StockMarketService } from './stock-market.service';
+
+describe('StockMarketService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [StockMarketService]
+    });
+  });
+
+  it('should be created', inject([StockMarketService], (service: StockMarketService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/examples/stock-market/stock-market.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class StockMarketService {
+
+  constructor() { }
+
+}

src/app/examples/todos/todos.component.html

@@ -1,3 +1,42 @@
-<p>
-  todos works!
-</p>
+<div class="container">
+  <div class="row">
+    <div class="offset-md-2 col-md-8 entry">
+      <anms-big-input placeholder="I want to do..."
+                      [value]="newTodo"
+                      (keyup)="onNewTodoChange($event.target.value)"
+                      (keyup.enter)="onAddTodo()">
+        <anms-big-input-action icon="add" color="accent"
+                               (click)="onAddTodo()"
+                               [disabled]="newTodo.length < 4">
+        </anms-big-input-action>
+        <anms-big-input-action icon="delete_forever" disabled></anms-big-input-action>
+      </anms-big-input>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6">
+      <h2>Todo List</h2>
+      <md-card *ngFor="let todo of todos.items" class="todo">
+        {{todo.name}}
+      </md-card>
+      <br>
+    </div>
+    <div class="offset-md-1  col-md-5">
+      <h2>Todo Example</h2>
+      <p>
+        This is a classic <code>todo</code> example with support for
+        adding, toggling, removing and filtering of the todo items.
+      </p>
+      <p>
+        State handling is implemented using <code>ngrx</code> module
+        and support for lazy loaded reducers (this is a lazy loaded feature module).
+      </p>
+      <p>
+        Todos are persisted into local storage so you should see your todos
+        also on later visits when using the same browser.
+      </p>
+      <br>
+    </div>
+  </div>
+
+</div>

src/app/examples/todos/todos.component.scss

@@ -0,0 +1,8 @@
+.entry {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.todo {
+  margin-bottom: 10px;
+}

src/app/examples/todos/todos.component.spec.ts

@@ -1,5 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { CoreModule } from '../../core';
+import { SharedModule } from '../../shared';
+import { ExamplesModule } from '../examples.module';
+
 import { TodosComponent } from './todos.component';
 
 describe('TodosComponent', () => {
@@ -8,7 +12,11 @@ describe('TodosComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TodosComponent ]
+      imports: [
+        CoreModule,
+        SharedModule,
+        ExamplesModule
+      ]
     })
     .compileComponents();
   }));