Merge pull request #2 from angular-redux/chore/form-example

Chore/form example

Author: SethDavenport

package.json

@@ -13,6 +13,9 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-redux/form": "^5.1.0-beta.0",
+    "@angular-redux/router": "2.0.0-alpha.3",
+    "@angular-redux/store": "^5.1.0",
     "@angular/common": "^2.3.1",
     "@angular/compiler": "^2.3.1",
     "@angular/core": "^2.3.1",
@@ -21,8 +24,6 @@
     "@angular/platform-browser": "^2.3.1",
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
-    "@angular-redux/store": "^5.1.0",
-    "@angular-redux/router": "2.0.0-alpha.3",
     "core-js": "^2.4.1",
     "redux": "^3.6.0",
     "redux-observable": "^0.12.2",

src/app/app.component.css

@@ -3,3 +3,11 @@
   border-radius: 3px;
   padding: 5px;
 }
+
+content {
+  display: block;
+  padding: 10px;
+  border: solid gray 1px;
+  border-radius: 5px;
+  margin-top: 1rem;
+}

src/app/app.component.html

@@ -4,5 +4,9 @@ <h1>
 <nav>
   <a routerLink="/elephants" routerLinkActive="active">Elephants</a>
   <a routerLink="/lions" routerLinkActive="active">Lions</a>
+  <a routerLink="/feedback" routerLinkActive="active">Feedback</a>
 </nav>
-<router-outlet></router-outlet>
+
+<content>
+  <router-outlet></router-outlet>
+</content>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { NgRedux, DevToolsExtension } from '@angular-redux/store';
 import { NgReduxRouter, routerReducer } from '@angular-redux/router';
+import { provideReduxForms, composeReducers, defaultFormReducer } from '@angular-redux/form';
 import { Action, combineReducers } from 'redux';
 import { createEpicMiddleware, combineEpics } from 'redux-observable';
 
@@ -27,11 +28,13 @@ export class AppComponent {
     elephantsEpics: ElephantsEpics,
     lionsEpics: LionsEpics
   ) {
-    const rootReducer = combineReducers({
-      elephants: elephantsReducer,
-      lions: lionsReducer,
-      router: routerReducer,
-    });
+    const rootReducer = composeReducers(
+      defaultFormReducer(),
+      combineReducers({
+        elephants: elephantsReducer,
+        lions: lionsReducer,
+        router: routerReducer,
+    }));
 
     ngRedux.configureStore(
       rootReducer,
@@ -41,7 +44,8 @@ export class AppComponent {
         createEpicMiddleware(combineEpics(...lionsEpics.epics)),
       ],
       devTools.isEnabled() ? [ devTools.enhancer() ] : null);
-    ngReduxRouter.initialize(/* args */);
+    ngReduxRouter.initialize();
+    provideReduxForms(ngRedux);
   }
 
   ngOnInit() {

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { AppActions } from './app.actions';
 
 import { ElephantsModule } from './elephants/elephants.module';
 import { LionsModule } from './lions/lions.module';
+import { FeedbackModule } from './feedback/feedback.module';
 
 @NgModule({
   declarations: [ AppComponent ],
@@ -24,6 +25,7 @@ import { LionsModule } from './lions/lions.module';
     NgReduxRouterModule,
     ElephantsModule,
     LionsModule,
+    FeedbackModule,
   ],
   providers: [ AppActions ],
   bootstrap: [ AppComponent ]

src/app/app.routes.ts

@@ -1,7 +1,10 @@
 import { ElephantListComponent } from './elephants/elephant-list/elephant-list.component';
 import { LionListComponent } from './lions/lion-list/lion-list.component';
+import { FeedbackFormComponent } from './feedback/feedback-form/feedback-form.component';
 
 export const appRoutes = [
+  { path: '',   redirectTo: '/elephants', pathMatch: 'full' },
   { path: 'elephants', component: ElephantListComponent },
-  { path: 'lions', component: LionListComponent }
+  { path: 'lions', component: LionListComponent },
+  { path: 'feedback', component: FeedbackFormComponent },
 ];

src/app/elephants/elephant-list/elephant-list.component.ts

@@ -9,7 +9,7 @@ import { select } from '@angular-redux/store';
 export class ElephantListComponent {
   // Shorthand for
   // constructor(ngRedux: NgRedux { this.elephants$ = ngRedux.select('elephants'); })
-  @select() elephants$
+  @select() readonly elephants$
 
   // Since we're observing an array of items, we need to set up a 'trackBy'
   // parameter so Angular doesn't tear down and rebuild the list's DOM every

src/app/elephants/elephants.actions.ts

@@ -3,8 +3,8 @@ import { Action } from 'redux';
 
 @Injectable()
 export class ElephantsActions {
-  static LOAD_SUCCEEDED = 'LOAD_SUCCEEDED(ELEPHANTS)';
-  static LOAD_FAILED = 'LOAD_SUCCEEDED(ELEPHANTS)';
+  static readonly LOAD_SUCCEEDED = 'LOAD_SUCCEEDED(ELEPHANTS)';
+  static readonly LOAD_FAILED = 'LOAD_FAILED(ELEPHANTS)';
 
   loadSucceeded(payload) {
     return {

src/app/elephants/elephants.service.ts

@@ -3,19 +3,19 @@ import { Http } from '@angular/http';
 import 'rxjs/add/operator/map';
 
 // A fake API on the internets.
-const BASE_URL = 'http://jsonplaceholder.typicode.com';
+const ELEPHANTS_URL = 'http://www.mocky.io/v2/588d70ad100000e50f2d2983';
 
 @Injectable()
 export class ElephantsService {
   constructor(private http: Http) {}
 
   getAll() {
-    return this.http.get(BASE_URL + '/users')
+    return this.http.get(ELEPHANTS_URL)
       .map(resp => resp.json())
       .map(records => records.map(
         record => ({
-          animalType: 'Elephant',
-          name: record.name.split(' ')[0],
+          animalType: record.type,
+          name: record.name,
         })));
   }
 }

src/app/feedback/feedback-form/feedback-form.component.css

@@ -0,0 +1,21 @@
+label {
+  display: block;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+input, textarea {
+  display: block;
+  width: 95%;
+  padding: 5px;
+  border: solid gray 1px;
+  border-radius: 5px;
+}
+
+textarea {
+  height: 250px;
+}
+
+.footnote {
+  font-style: italic;
+}