feat: added dbxAppContextStateModule, dbxAppAuthRouterModule

- Updated demo to use these new modules

apps/demo/src/app/modules/demo/container/home.component.html

@@ -1,4 +1,4 @@
-<dbx-content-page>
+<dbx-content-page dbxAppContextState="public">
   <dbx-content-container>
     <dbx-content-box>
       <h2>Demo App</h2>

apps/demo/src/app/modules/demo/container/layout.component.ts

@@ -1,4 +1,4 @@
-import { ClickableAnchorLink, ClickableAnchorLinkTree } from '@dereekb/dbx-core';
+import { ClickableAnchorLinkSegueRef, ClickableAnchorLink, ClickableAnchorLinkTree } from '@dereekb/dbx-core';
 import { Component, ViewEncapsulation } from '@angular/core';
 import { Observable, map, of, shareReplay } from 'rxjs';
 import { mapKeysIntersectionToArray } from '@dereekb/rxjs';
@@ -11,25 +11,25 @@ import { DbxFirebaseAuthService } from '@dereekb/dbx-firebase';
 })
 export class DemoLayoutComponent {
 
-  readonly everyoneAnchors: ClickableAnchorLink[] = [{
+  readonly everyoneAnchors = [{
     title: 'Home',
     ref: 'demo.home',
     icon: 'home'
   }];
 
-  readonly adminAnchors: ClickableAnchorLink[] = [{
+  readonly adminAnchors = [{
     title: 'Home',
     ref: 'demo.home',
     icon: 'home'
   }];
 
-  readonly userAnchors: ClickableAnchorLink[] = [{
+  readonly userAnchors = [{
     title: 'Home',
     ref: 'demo.home',
     icon: 'home'
   }];
 
-  readonly navAnchors$: Observable<ClickableAnchorLink[]> = of({
+  readonly navAnchors$: Observable<ClickableAnchorLinkSegueRef[]> = of({
     'admin': this.adminAnchors,
     'user': this.userAnchors
   }).pipe(

apps/demo/src/app/modules/demo/modules/app/container/layout.component.html

@@ -1 +1,3 @@
-<ui-view></ui-view>
+<ng-container dbxAppContextState="app">
+  <ui-view></ui-view>
+</ng-container>

apps/demo/src/app/modules/demo/modules/auth/container/layout.component.html

@@ -1,4 +1,4 @@
-<dbx-content-page>
+<dbx-content-page dbxAppContextState="auth">
   <dbx-content-container>
     <ui-view></ui-view>
   </dbx-content-container>

apps/demo/src/app/modules/demo/modules/onboard/container/layout.component.html

@@ -1,4 +1,4 @@
-<dbx-content-page>
+<dbx-content-page dbxAppContextState="onboard">
   <dbx-content-container>
     <ui-view></ui-view>
   </dbx-content-container>

apps/demo/src/app/modules/doc/container/layout.component.html

@@ -1,4 +1,4 @@
-<dbx-sidenav [anchors]="navAnchors" dbxSetStyle="doc-app" suffixes="dark">
+<dbx-sidenav [anchors]="navAnchors" dbxSetStyle="doc-app" suffixes="dark" dbxAppContextState="doc">
   <dbx-sidenav-page [mobileOnly]="true" color="primary">
     <ui-view></ui-view>
   </dbx-sidenav-page>

apps/demo/src/app/modules/doc/modules/action/container/layout.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-import { ClickableAnchorLink } from '@dereekb/dbx-core';
+import { ClickableAnchorLinkSegueRef } from '@dereekb/dbx-core';
 
 @Component({
   templateUrl: './layout.component.html'
 })
 export class DocActionLayoutComponent {
 
-  readonly navAnchors: ClickableAnchorLink[] = [{
+  readonly navAnchors: ClickableAnchorLinkSegueRef[] = [{
     title: 'Form Components',
     ref: 'doc.form'
   }];

apps/demo/src/app/modules/doc/modules/auth/container/layout.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-import { ClickableAnchorLink } from '@dereekb/dbx-core';
+import { ClickableAnchorLinkSegueRef } from '@dereekb/dbx-core';
 
 @Component({
   templateUrl: './layout.component.html'
 })
 export class DocAuthLayoutComponent {
 
-  readonly navAnchors: ClickableAnchorLink[] = [{
+  readonly navAnchors: ClickableAnchorLinkSegueRef[] = [{
     title: 'Auth Components',
     ref: 'doc.auth'
   }];

apps/demo/src/app/modules/doc/modules/form/container/layout.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-import { ClickableAnchorLink } from '@dereekb/dbx-core';
+import { ClickableAnchorLinkSegueRef } from '@dereekb/dbx-core';
 
 @Component({
   templateUrl: './layout.component.html'
 })
 export class DocFormLayoutComponent {
 
-  readonly navAnchors: ClickableAnchorLink[] = [{
+  readonly navAnchors: ClickableAnchorLinkSegueRef[] = [{
     title: 'Form Components',
     ref: 'doc.form'
   }];

apps/demo/src/app/modules/doc/modules/interaction/container/layout.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-import { ClickableAnchorLink } from '@dereekb/dbx-core';
+import { ClickableAnchorLinkSegueRef } from '@dereekb/dbx-core';
 
 @Component({
   templateUrl: './layout.component.html'
 })
 export class DocInteractionLayoutComponent {
 
-  readonly navAnchors: ClickableAnchorLink[] = [{
+  readonly navAnchors: ClickableAnchorLinkSegueRef[] = [{
     title: 'Interaction Components',
     ref: 'doc.interaction'
   }];

apps/demo/src/app/modules/doc/modules/layout/container/layout.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-import { ClickableAnchorLink } from '@dereekb/dbx-core';
+import { ClickableAnchorLinkSegueRef } from '@dereekb/dbx-core';
 
 @Component({
   templateUrl: './layout.component.html'
 })
 export class DocLayoutLayoutComponent {
 
-  readonly navAnchors: ClickableAnchorLink[] = [{
+  readonly navAnchors: ClickableAnchorLinkSegueRef[] = [{
     title: 'Layout Components',
     ref: 'doc.layout'
   }];

apps/demo/src/app/modules/doc/modules/router/container/layout.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-import { ClickableAnchorLink } from '@dereekb/dbx-core';
+import { ClickableAnchorLinkSegueRef } from '@dereekb/dbx-core';
 
 @Component({
   templateUrl: './layout.component.html'
 })
 export class DocRouterLayoutComponent {
 
-  readonly navAnchors: ClickableAnchorLink[] = [{
+  readonly navAnchors: ClickableAnchorLinkSegueRef[] = [{
     title: 'Router Components',
     ref: 'doc.router'
   }];

apps/demo/src/app/modules/landing/container/layout.component.html

@@ -1,4 +1,5 @@
-<div class="dbx-app-page landing-page dbx-background" dbxSetStyle="doc-app" suffixes="dark">
+<div class="dbx-app-page landing-page dbx-background" dbxSetStyle="doc-app" suffixes="dark"
+  dbxAppContextState="landing">
   <div class="landing">
     <div class="hero dbx-primary-bg" fxLayout="column">
       <dbx-spacer></dbx-spacer>

apps/demo/src/app/modules/shared/app.shared.module.ts

@@ -48,7 +48,7 @@ import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { DbxButtonModule, DbxInteractionModule, DbxRouterLayoutModule, DbxLayoutModule, DbxActionModule, DbxReadableErrorModule, DbxLoadingModule, DbxActionSnackbarModule } from '@dereekb/dbx-web';
 import { DbxFormExtensionModule } from '@dereekb/dbx-form';
-import { DbxCoreAuthModule, DbxPipesModule } from '@dereekb/dbx-core';
+import { DbxAppContextStateModule, DbxCoreAuthModule, DbxPipesModule } from '@dereekb/dbx-core';
 
 
 const ANGULAR_MODULES = [
@@ -116,7 +116,8 @@ const DBX_MODULES = [
   DbxLayoutModule,
   DbxFormExtensionModule,
   DbxActionSnackbarModule,
-  DbxPipesModule
+  DbxPipesModule,
+  DbxAppContextStateModule
 ];
 
 @NgModule({

apps/demo/src/app/state/app.state.ts

@@ -0,0 +1,39 @@
+import {
+  ActionReducer,
+  createReducer,
+  MetaReducer
+} from '@ngrx/store';
+import { environment } from '../../environments/environment';
+
+// tslint:disable-next-line: no-empty-interface
+export interface State {
+  // None
+}
+
+export const initialState: State = {};
+
+export const ROOT_REDUCER = createReducer(
+  initialState
+);
+
+// console.log all actions
+export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
+  return (state, action) => {
+    const result = reducer(state, action);
+    console.groupCollapsed(action.type);
+    console.log('prev state', state);
+    console.log('action', action);
+    console.log('next state', result);
+    console.groupEnd();
+    return result;
+  };
+}
+
+/**
+ * By default, @ngrx/store uses combineReducers with the reducer map to compose
+ * the root meta-reducer. To add more meta-reducers, provide an array of meta-reducers
+ * that will be composed to form the root meta-reducer.
+ */
+export const metaReducers: MetaReducer<State>[] = !environment.production
+  ? [logger]
+  : [];

apps/demo/src/app/state/entity-metadata.ts

@@ -0,0 +1,10 @@
+import { EntityMetadataMap, EntityDataModuleConfig } from '@ngrx/data';
+
+const entityMetadata: EntityMetadataMap = {};
+
+const pluralNames = {  };
+
+export const entityConfig: EntityDataModuleConfig = {
+  entityMetadata,
+  pluralNames
+};

apps/demo/src/root.module.ts

@@ -1,3 +1,5 @@
+import { DbxAppAuthRouterModule } from './../../../packages/dbx-core/src/lib/auth/router/auth.router.module';
+import { DbxAppAuthRouterStateModule } from './../../../packages/dbx-core/src/lib/auth/router/state/auth.router.state.module';
 import { DbxAnalyticsModule, DbxAnalyticsService, DbxAnalyticsSegmentModule } from '@dereekb/dbx-analytics';
 import { Injector, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -8,12 +10,16 @@ import { environment } from './environments/environment';
 import { DbxScreenModule, DbxWebRootModule, DbxWebUIRouterModule, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DBX_STYLE_DEFAULT_CONFIG_TOKEN } from '@dereekb/dbx-web';
 import { DbxAnalyticsServiceConfiguration, DbxAnalyticsSegmentServiceListener, DbxAnalyticsSegmentApiService, DbxAnalyticsSegmentApiServiceConfig } from '@dereekb/dbx-analytics';
 import { AppModule } from './app/app.module';
-import { AuthTransitionHookOptions, DbxCoreUIRouterSegueModule, enableHasAuthRoleHook, enableHasAuthStateHook, enableIsLoggedInHook } from '@dereekb/dbx-core';
+import { AuthTransitionHookOptions, DbxAppAuthStateModule, DbxAppContextStateModule, DbxCoreUIRouterSegueModule, DBX_KNOWN_APP_CONTEXT_STATES, enableHasAuthRoleHook, enableHasAuthStateHook, enableIsLoggedInHook } from '@dereekb/dbx-core';
 import { FormlyModule } from '@ngx-formly/core';
 import { defaultValidationMessages } from '@dereekb/dbx-form';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { RootFirebaseModule } from './firebase/root.firebase.module';
 import { DbxFirebaseLoginModule } from '@dereekb/dbx-firebase';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { metaReducers, ROOT_REDUCER } from './app/state/app.state';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 export function routerConfigFn(router: UIRouter, injector: Injector, module: StatesModule): any {
   const transitionService = router.transitionService;
@@ -85,11 +91,33 @@ export function makeSegmentConfig(): DbxAnalyticsSegmentApiServiceConfig {
         deps: [DbxAnalyticsSegmentApiService]
       }
     }),
+    DbxAppContextStateModule,
+    DbxAppAuthStateModule,
+    DbxAppAuthRouterModule.forRoot({
+      loginRef: { ref: 'demo.auth' },
+      loggedOutRef: { ref: 'demo.auth.loggedout' },
+      appRef: { ref: 'demo.app' }
+    }),
+    DbxAppAuthRouterStateModule.forRoot({
+      activeRoutesToApplyEffects: DBX_KNOWN_APP_CONTEXT_STATES
+    }),
     DbxAnalyticsSegmentModule.forRoot(),
     DbxCoreUIRouterSegueModule.forRoot(),
     DbxWebUIRouterModule.forRoot(),
     // dbx-firebase
     RootFirebaseModule,
+    // Store
+    StoreModule.forRoot(ROOT_REDUCER, {
+      metaReducers,
+      runtimeChecks: {
+        strictStateSerializability: true,
+        strictActionSerializability: true,
+        strictActionWithinNgZone: true,
+        strictActionTypeUniqueness: true,
+      },
+    }),
+    EffectsModule.forRoot(),
+    (!environment.production ? StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }) : []),
     // other modules
     FormlyModule.forRoot({
       validationMessages: defaultValidationMessages()

packages/dbx-core/src/lib/auth/auth.state.module.ts

@@ -0,0 +1,15 @@
+import { fromDbxAppAuth } from './state';
+import { NgModule } from '@angular/core';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { DbxAppAuthEffects } from './state/effect/auth.effect';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(fromDbxAppAuth.featureKey, fromDbxAppAuth.reducers),
+    EffectsModule.forFeature([DbxAppAuthEffects])
+  ],
+  declarations: [],
+  exports: []
+})
+export class DbxAppAuthStateModule { }

packages/dbx-core/src/lib/auth/auth.state.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from "@angular/core";
+import { Store } from "@ngrx/store";
+import { fromDbxAppAuth } from './state';
+import { DbxAppAuthFullState } from "./state/state";
+
+
+/**
+ * State for accessing the app's DbxAppAuthState defined within the DbxAppAuthFullState for the ngrx store.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class DbxAppAuthStateService {
+
+  readonly authStateUser$ = this.store.select(fromDbxAppAuth.selectDbxAppAuthUser);
+
+  constructor(readonly store: Store<DbxAppAuthFullState>) { }
+
+}

packages/dbx-core/src/lib/auth/auth.user.ts

@@ -0,0 +1,37 @@
+import { Maybe } from "@dereekb/util";
+
+
+/**
+ * An application user state.
+ * 
+ * Generic states that define the current state of the user:
+ * - none: the user is not logged in
+ * - anon: the user is logged in as an anonymous account
+ * - error: there was an error loading the correct user state
+ * - new: the user has a full account but has not completed onboarding/setup
+ * - user: the user has a full account and has completed setup
+ */
+export type AuthUserState = 'none' | 'anon' | 'new' | 'user' | 'error';
+
+/**
+ * Arbitrary identifier used to differentiate users.
+ */
+export type AuthUserIdentifier = string;
+
+export const NO_AUTH_USER_IDENTIFIER = '0';
+
+/**
+ * AuthUserIdentifier used to indicate that the user cannot be uniquely identifier.
+ */
+export type NoAuthUserIdentifier = typeof NO_AUTH_USER_IDENTIFIER;
+
+
+/**
+ * Creates an AuthUserIdentifier from the input. If the input is undefined, returns the NoAuthUserIdentifier.
+ * 
+ * @param inputId 
+ * @returns 
+ */
+export function authUserIdentifier(inputId: Maybe<AuthUserIdentifier>): AuthUserIdentifier {
+  return (inputId) ? inputId : NO_AUTH_USER_IDENTIFIER;
+}

packages/dbx-core/src/lib/auth/index.ts

@@ -1,7 +1,9 @@
 export * from './router';
 export * from './service';
-export * from './auth.state';
+export * from './auth.user';
 export * from './auth.role';
 export * from './auth.module';
 export * from './auth.role.any.directive';
 export * from './auth.role.has.directive';
+export * from './auth.state.module';
+export * from './auth.state.service';