feat(admin-ui): Add action logger for debugging

admin-ui/package.json

@@ -36,6 +36,7 @@
     "graphql": "^0.13.2",
     "graphql-tag": "^2.9.2",
     "immer": "^1.3.1",
+    "ngrx-store-logger": "^0.2.2",
     "rxjs": "^6.0.0",
     "rxjs-compat": "^6.2.1",
     "zone.js": "^0.8.26"

admin-ui/src/app/state/action-logger.ts

@@ -0,0 +1,33 @@
+import { ActionReducer } from '@ngrx/store';
+import { AppState } from './app-state';
+import { storeLogger } from 'ngrx-store-logger';
+
+/**
+ * A meta reducer which logs actions to the console for debugging purposes.
+ */
+export function actionLogger(reducer: ActionReducer<AppState>): any {
+    const key = 'vdr_logToConsole';
+    const localSetting = sessionStorage.getItem(key);
+    let logToConsole = localSetting === 'true';
+
+    Object.defineProperty(window, 'vdr_log_actions', {
+        get: () => {
+            return logToConsole ? 'Logging actions enabled' : 'No longer logging actions';
+        },
+        set: (active: any) => {
+            logToConsole = !!active;
+            sessionStorage.setItem(key, logToConsole.toString());
+        },
+    });
+
+    return (state, action) => {
+        if (logToConsole) {
+            return storeLogger({
+                collapsed: true,
+            })(reducer)(state, action);
+        } else {
+            return reducer(state, action);
+        }
+    };
+
+}

admin-ui/src/app/state/state-store.service.ts

@@ -15,11 +15,11 @@ export class StateStore {
 
     constructor(public _internalStore: Store<AppState>) {
         // expose the AppStore on the window for debug purposes
-        Object.defineProperty(window, 'vnd_app_state', {
+        Object.defineProperty(window, 'vdr_app_state', {
             get: () => this.getState(),
         });
         // allow observing of particular state for debug purposes
-        Object.defineProperty(window, 'vnd_observe_state', {
+        Object.defineProperty(window, 'vdr_observe_state', {
             get: () => this.observeState.bind(this),
         });
     }

admin-ui/src/app/state/state.module.ts

@@ -5,6 +5,8 @@ import { InMemoryCache } from 'apollo-cache-inmemory';
 
 import { StateStore } from './state-store.service';
 import { UserActions } from './user/user-actions';
+import { environment } from '../../environments/environment';
+import { actionLogger } from './action-logger';
 import { user } from './user/user-reducer';
 
 export const APOLLO_NGRX_CACHE = new InjectionToken<InMemoryCache>('APOLLO_NGRX_CACHE');
@@ -13,13 +15,15 @@ export function createApolloNgrxCache(ngrxCache: NgrxCache, store: Store<any>):
     return ngrxCache.create();
 }
 
+export const metaReducers = environment.production ? [] : [actionLogger];
+
 @NgModule({
     imports: [
         NgrxCacheModule,
         StoreModule.forRoot({
             entities: apolloReducer,
             user,
-        }),
+        }, { metaReducers }),
         NgrxCacheModule.forRoot('entities'),
     ],
     providers: [

admin-ui/yarn.lock

@@ -4321,6 +4321,10 @@ next-tick@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
 
+ngrx-store-logger@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/ngrx-store-logger/-/ngrx-store-logger-0.2.2.tgz#c1ed4d5f30710bdb4583ddbe488b96fa44b03bda"
+
 no-case@^2.2.0, no-case@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"