chore(Example): Integrated example app (ngrx#12)

.angular-cli.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "example-app"
+  },
+  "apps": [
+    {
+      "root": "example-app",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "bc",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "example-app/tsconfig.app.json"
+    },
+    {
+      "project": "example-app/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {
+      "inlineStyle": true,
+      "inlineTemplate": true,
+      "flat": true,
+      "spec": false
+    }
+  }
+}

.editorconfig

@@ -1,15 +1,13 @@
-# http://editorconfig.org
-
+# Editor configuration, see http://editorconfig.org
 root = true
 
 [*]
 charset = utf-8
 indent_style = space
 indent_size = 2
-end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.md]
-insert_final_newline = false
-trim_trailing_whitespace = false
+max_line_length = off
+trim_trailing_whitespace = false

e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { ExampleAppPage } from './app.po';
+
+describe('example-app App', function() {
+  let page: ExampleAppPage;
+
+  beforeEach(() => {
+    page = new ExampleAppPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class ExampleAppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

e2e/tsconfig.e2e.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ],
+    "outDir": "../dist/out-tsc-e2e",
+    "module": "commonjs",
+    "target": "es6",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  }
+}

example-app/app/app.module.ts

@@ -0,0 +1,82 @@
+import { NgModule, } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
+import { HttpModule } from '@angular/http';
+
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { DBModule } from '@ngrx/db';
+import { StoreRouterConnectingModule } from '@ngrx/router-store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { MaterialModule } from '@angular/material';
+
+import { CoreModule } from './core/core.module';
+import { AuthModule } from './auth/auth.module';
+
+import { routes } from './routes';
+import { reducers, developmentReducerFactory } from './reducers';
+import { schema } from './db';
+
+import { AppComponent } from './core/containers/app';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpModule,
+    RouterModule.forRoot(routes, { useHash: true }),
+
+    /**
+     * StoreModule.forRoot is imported once in the root module, accepting a reducer
+     * function or object map of reducer functions. If passed an object of
+     * reducers, combineReducers will be run creating your application
+     * meta-reducer. This returns all providers for an @ngrx/store
+     * based application.
+     */
+    StoreModule.forRoot(reducers, {
+      reducerFactory: !environment.production ? developmentReducerFactory : undefined
+    }),
+
+    /**
+     * @ngrx/router-store keeps router state up-to-date in the store.
+     */
+    // StoreRouterConnectingModule,
+
+    /**
+     * Store devtools instrument the store retaining past versions of state
+     * and recalculating new states. This enables powerful time-travel
+     * debugging.
+     *
+     * To use the debugger, install the Redux Devtools extension for either
+     * Chrome or Firefox
+     *
+     * See: https://github.com/zalmoxisus/redux-devtools-extension
+     */
+    !environment.production ? StoreDevtoolsModule.instrument() : [],
+
+    /**
+     * EffectsModule.forRoot() is imported once in the root module and
+     * sets up the effects class to be initialized immediately when the 
+     * application starts.
+     *
+     * See: https://github.com/ngrx/platform/blob/master/docs/effects/api.md#forroot
+     */
+    EffectsModule.forRoot([]),
+
+    /**
+     * `provideDB` sets up @ngrx/db with the provided schema and makes the Database
+     * service available.
+     */
+    DBModule.provideDB(schema),
+
+    CoreModule.forRoot(),
+
+    AuthModule.forRoot()
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

example-app/app/auth/actions/auth.ts

@@ -0,0 +1,41 @@
+import { Action } from '@ngrx/store';
+import { User, Authenticate } from '../models/user';
+
+export const LOGIN = '[Auth] Login';
+export const LOGOUT = '[Auth] Logout';
+export const LOGIN_SUCCESS = '[Auth] Login Success';
+export const LOGIN_FAILURE = '[Auth] Login Failure';
+export const LOGIN_REDIRECT = '[Auth] Login Redirect';
+
+export class Login implements Action {
+  readonly type = LOGIN;
+
+  constructor(public payload: Authenticate) {}
+}
+
+export class LoginSuccess implements Action {
+  readonly type = LOGIN_SUCCESS;
+
+  constructor(public payload: { user: User }) {}
+}
+
+export class LoginFailure implements Action {
+  readonly type = LOGIN_FAILURE;
+
+  constructor(public payload: any) {}
+}
+
+export class LoginRedirect implements Action {
+  readonly type = LOGIN_REDIRECT;
+}
+
+export class Logout implements Action {
+  readonly type = LOGOUT;
+}
+
+export type Actions
+  = Login
+  | LoginSuccess
+  | LoginFailure
+  | LoginRedirect
+  | Logout;

example-app/app/auth/auth.module.ts

@@ -0,0 +1,54 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MaterialModule } from '@angular/material';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { LoginPageComponent } from './containers/login-page.component';
+import { LoginFormComponent } from './components/login-form.component';
+
+import { AuthService } from './services/auth.service';
+import { AuthGuard } from './services/auth-guard.service';
+import { AuthEffects } from './effects/auth.effects';
+import { reducers } from './reducers';
+
+export const COMPONENTS = [
+  LoginPageComponent,
+  LoginFormComponent
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MaterialModule,
+  ],
+  declarations: COMPONENTS,
+  exports: COMPONENTS
+})
+export class AuthModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: RootAuthModule,
+      providers: [
+        AuthService,
+        AuthGuard
+      ]
+    };
+  }
+}
+
+@NgModule({
+  imports: [
+    AuthModule,
+    RouterModule.forChild([
+      { path: 'login', component: LoginPageComponent }
+    ]),
+    StoreModule.forFeature('auth', reducers),
+    EffectsModule.forFeature([
+      AuthEffects
+    ]),
+  ]
+})
+export class RootAuthModule {}