Added selectors for window, headers, docs and query.

altair-graphql · Jan 11, 2018 · aa57202 · aa57202
1 parent 528a682
commit aa57202
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 16 deletions.
diff --git a/src/app/containers/window/window.component.html b/src/app/containers/window/window.component.html
@@ -12,7 +12,7 @@
       [apiUrl]="apiUrl"
       [httpVerb]="httpVerb"
       [isSubscribed]="isSubscribed"
-      [showDocs]="showDocs"
+      [showDocs]="showDocs$ | async"
 
       (urlChange)="setApiUrl($event)"
       (httpVerbChange)="setApiMethod($event)"
@@ -28,7 +28,7 @@
       (reloadDocsChange)="reloadDocs()"
       (clearEditorChange)="clearEditor()"
       (toggleSubscriptionUrlDialog)="toggleSubscriptionUrlDialog()"
-      [showDocs]="showDocs"
+      [showDocs]="showDocs$ | async"
       [isSubscribed]="isSubscribed"
     ></app-action-bar> -->
     <div class="main-content-area">
@@ -44,7 +44,7 @@
         </div>
         <div class="col-xs-6">
           <app-query-result
-            [queryResult]="queryResult"
+            [queryResult]="queryResult$ | async"
             [responseTime]="responseTime"
             [responseStatus]="responseStatus"
             [responseStatusText]="responseStatusText"
@@ -59,8 +59,8 @@
         <app-doc-viewer
           [gqlSchema]="gqlSchema"
           [allowIntrospection]="allowIntrospection"
-          [ngClass]="{'show-doc': showDocs}"
-          [isLoading]="docsIsLoading"
+          [ngClass]="{'show-doc': showDocs$ | async}"
+          [isLoading]="docsIsLoading$ | async"
           (toggleDocsChange)="toggleDocs()"
           (addQueryToEditorChange)="addQueryToEditor($event)"
         ></app-doc-viewer>
@@ -76,7 +76,7 @@ <h3 class="modal-title">
         </h3>
         <div class="modal-body">
           <div class="app-dialog-body">
-            <div class="set-header-input-container" *ngFor="let header of headers;trackBy:trackByFn; let i = index">
+            <div class="set-header-input-container" *ngFor="let header of headers$ | async;trackBy:trackByFn; let i = index">
               <div class="set-header-input-column">
                 <input type="text" class="set-header-input" placeholder="Header key" value="{{header.key}}" (input)="headerKeyChange($event, i)">
               </div>

diff --git a/src/app/containers/window/window.component.ts b/src/app/containers/window/window.component.ts
@@ -23,30 +23,30 @@ import * as historyActions from '../../actions/history/history';
 
 import { QueryService, GqlService, NotifyService } from '../../services';
 import { graphql } from 'graphql';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'app-window',
   templateUrl: './window.component.html'
 })
 export class WindowComponent implements OnInit {
-  apiUrl$;
+  queryResult$: Observable<any>;
+  showDocs$: Observable<boolean>;
+  docsIsLoading$: Observable<boolean>;
+  headers$: Observable<fromHeader.State>;
 
   @Input() windowId: string;
 
   apiUrl = '';
   httpVerb = '';
   initialQuery = '';
   query = '';
-  queryResult = '';
 
   showHeaderDialog = false;
   showVariableDialog = false;
   showSubscriptionUrlDialog = false;
   showHistoryDialog = false;
 
-  showDocs = true;
-  docsIsLoading = false;
-  headers: fromHeader.State = [];
   variables = '';
   introspectionResult = {};
   gqlSchema = null;
@@ -89,7 +89,11 @@ export class WindowComponent implements OnInit {
   }
 
   ngOnInit() {
-    // this.apiUrl$ = this.store.select(fromRoot.getUrl);
+    this.queryResult$ = this.getWindowState().select(fromRoot.getQueryResult);
+    this.showDocs$ = this.getWindowState().select(fromRoot.getShowDocs);
+    this.docsIsLoading$ = this.getWindowState().select(fromRoot.getDocsLoading);
+    this.headers$ = this.getWindowState().select(fromRoot.getHeaders);
+
     this.store
       .map(data => data.windows[this.windowId])
       .distinctUntilChanged()
@@ -101,18 +105,14 @@ export class WindowComponent implements OnInit {
         this.apiUrl = data.query.url;
         this.query = data.query.query;
         this.httpVerb = data.query.httpVerb;
-        this.queryResult = data.query.response;
-        this.headers = data.headers;
         this.showHeaderDialog = data.dialogs.showHeaderDialog;
         this.showVariableDialog = data.dialogs.showVariableDialog;
         this.showSubscriptionUrlDialog = data.dialogs.showSubscriptionUrlDialog;
         this.showHistoryDialog = data.dialogs.showHistoryDialog;
         this.introspectionResult = data.schema.introspection;
 
         this.variables = data.variables.variables;
-        this.showDocs = data.docs.showDocs;
         this.isLoading = data.layout.isLoading;
-        this.docsIsLoading = data.docs.isLoading;
         this.showUrlAlert = data.query.showUrlAlert;
         this.urlAlertMessage = data.query.urlAlertMessage;
         this.urlAlertSuccess = data.query.urlAlertSuccess;
@@ -297,6 +297,10 @@ export class WindowComponent implements OnInit {
     return index;
   }
 
+  getWindowState(): Store<fromRoot.PerWindowState> {
+    return this.store.select(fromRoot.selectWindowState(this.windowId));
+  }
+
   /**
    * Carry out any necessary house cleaning tasks.
    */

diff --git a/src/app/reducers/docs/selectors.ts b/src/app/reducers/docs/selectors.ts
@@ -0,0 +1,6 @@
+import { createSelector, Store } from '@ngrx/store';
+import { PerWindowState } from '..';
+
+export const getDocsState = (state: PerWindowState) => state.docs;
+export const getShowDocs = createSelector(getDocsState, state => state.showDocs);
+export const getDocsLoading = createSelector(getDocsState, state => state.showDocs);
diff --git a/src/app/reducers/headers/selectors.ts b/src/app/reducers/headers/selectors.ts
@@ -0,0 +1,4 @@
+import { createSelector, Store } from '@ngrx/store';
+import { PerWindowState } from '..';
+
+export const getHeaders = (state: PerWindowState) => state.headers;
diff --git a/src/app/reducers/index.ts b/src/app/reducers/index.ts
@@ -64,3 +64,9 @@ export const reducer: ActionReducerMap<State> = {
   windows: fromWindows.windows(combineReducers(perWindowReducers)),
   windowsMeta: fromWindowsMeta.windowsMetaReducer
 };
+
+export const selectWindowState = (windowId: string) => (state: State) => state.windows[windowId];
+
+export * from './query/selectors';
+export * from './docs/selectors';
+export * from './headers/selectors';
diff --git a/src/app/reducers/query/selectors.ts b/src/app/reducers/query/selectors.ts
@@ -0,0 +1,5 @@
+import { createSelector, Store } from '@ngrx/store';
+import { PerWindowState } from '..';
+
+export const getQueryState = (state: PerWindowState) => state.query;
+export const getQueryResult = createSelector(getQueryState, state => state.response);