Used async operator where possible. Closes #199.

src/app/containers/window/window.component.html

@@ -1,6 +1,6 @@
 <div class="content-container">
   <div class="content-area app-content-area">
-    <div class="window-loader" [ngClass]="{ 'window-loader--show': isLoading }">
+    <div class="window-loader" [ngClass]="{ 'window-loader--show': isLoading$ | async }">
       <div class="window-loader__content">
         <img src="assets/img/logo.svg" alt="" class="anim anim-rotate"> {{ 'LOADING_INDICATOR_TEXT' | translate }}
         <div class="window-loader__actions">
@@ -11,7 +11,7 @@
     <app-url-box
       [apiUrl]="apiUrl"
       [httpVerb]="httpVerb"
-      [isSubscribed]="isSubscribed"
+      [isSubscribed]="isSubscribed$ | async"
       [showDocs]="showDocs$ | async"
 
       (urlChange)="setApiUrl($event)"
@@ -29,7 +29,7 @@
       (clearEditorChange)="clearEditor()"
       (toggleSubscriptionUrlDialog)="toggleSubscriptionUrlDialog()"
       [showDocs]="showDocs$ | async"
-      [isSubscribed]="isSubscribed"
+      [isSubscribed]="isSubscribed$ | async"
     ></app-action-bar> -->
     <div class="main-content-area">
       <div class="row main-content-row">
@@ -45,11 +45,11 @@
         <div class="col-xs-6">
           <app-query-result
             [queryResult]="queryResult$ | async"
-            [responseTime]="responseTime"
-            [responseStatus]="responseStatus"
-            [responseStatusText]="responseStatusText"
-            [isSubscribed]="isSubscribed"
-            [subscriptionResponses]="subscriptionResponses"
+            [responseTime]="responseTime$ | async"
+            [responseStatus]="responseStatus$ | async"
+            [responseStatusText]="responseStatusText$ | async"
+            [isSubscribed]="isSubscribed | async"
+            [subscriptionResponses]="subscriptionResponses$ | async"
             [subscriptionUrl]="subscriptionUrl"
 
             (downloadResultChange)="downloadResult()"
@@ -58,7 +58,7 @@
         </div>
         <app-doc-viewer
           [gqlSchema]="gqlSchema"
-          [allowIntrospection]="allowIntrospection"
+          [allowIntrospection]="allowIntrospection$ | async"
           [ngClass]="{'show-doc': showDocs$ | async}"
           [isLoading]="docsIsLoading$ | async"
           (toggleDocsChange)="toggleDocs()"
@@ -95,7 +95,7 @@ <h3 class="modal-title">
         </div>
       </clr-modal>
       <app-set-variable-dialog
-        [variables]="variables"
+        [variables]="variables$ | async"
         [showVariableDialog]="showVariableDialog"
         (toggleVariableDialog)="toggleVariableDialog($event)"
         (variablesChange)="updateVariables($event)"

src/app/containers/window/window.component.ts

@@ -11,6 +11,7 @@ import { ToastsManager } from 'ng2-toastr/ng2-toastr';
 import * as fromRoot from '../../reducers';
 import * as fromHeader from '../../reducers/headers/headers';
 import * as fromHistory from '../../reducers/history/history';
+import * as fromVariable from '../../reducers/variables/variables';
 
 import * as queryActions from '../../actions/query/query';
 import * as headerActions from '../../actions/headers/headers';
@@ -34,6 +35,15 @@ export class WindowComponent implements OnInit {
   showDocs$: Observable<boolean>;
   docsIsLoading$: Observable<boolean>;
   headers$: Observable<fromHeader.State>;
+  variables$: Observable<string>;
+  isLoading$: Observable<boolean>;
+  introspection$: Observable<any>;
+  allowIntrospection$: Observable<boolean>;
+  responseStatus$: Observable<number>;
+  responseTime$: Observable<number>;
+  responseStatusText$: Observable<string>;
+  isSubscribed$: Observable<boolean>;
+  subscriptionResponses$: Observable<Array<string>>;
 
   @Input() windowId: string;
 
@@ -47,29 +57,9 @@ export class WindowComponent implements OnInit {
   showSubscriptionUrlDialog = false;
   showHistoryDialog = false;
 
-  variables = '';
-  introspectionResult = {};
   gqlSchema = null;
 
-  showUrlAlert = false;
-  urlAlertMessage = '';
-  urlAlertSuccess = false;
-
-  showEditorAlert = false;
-  editorAlertMessage = '';
-  editorAlertSuccess = false;
-
-  isLoading = false;
-
-  allowIntrospection = true;
-
-  responseTime = 0;
-  responseStatus = 0;
-  responseStatusText = '';
-
   subscriptionUrl = '';
-  isSubscribed = false;
-  subscriptionResponses = [];
 
   historyList: fromHistory.HistoryList = [];
 
@@ -93,6 +83,15 @@ export class WindowComponent implements OnInit {
     this.showDocs$ = this.getWindowState().select(fromRoot.getShowDocs);
     this.docsIsLoading$ = this.getWindowState().select(fromRoot.getDocsLoading);
     this.headers$ = this.getWindowState().select(fromRoot.getHeaders);
+    this.variables$ = this.getWindowState().select(fromRoot.getVariables);
+    this.isLoading$ = this.getWindowState().select(fromRoot.getIsLoading);
+    this.introspection$ = this.getWindowState().select(fromRoot.getIntrospection);
+    this.allowIntrospection$ = this.getWindowState().select(fromRoot.allowIntrospection);
+    this.responseStatus$ = this.getWindowState().select(fromRoot.getResponseStatus);
+    this.responseTime$ = this.getWindowState().select(fromRoot.getResponseTime);
+    this.responseStatusText$ = this.getWindowState().select(fromRoot.getResponseStatusText);
+    this.isSubscribed$ = this.getWindowState().select(fromRoot.isSubscribed);
+    this.subscriptionResponses$ = this.getWindowState().select(fromRoot.getSubscriptionResponses);
 
     this.store
       .map(data => data.windows[this.windowId])
@@ -109,28 +108,12 @@ export class WindowComponent implements OnInit {
         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.isLoading = data.layout.isLoading;
-        this.showUrlAlert = data.query.showUrlAlert;
-        this.urlAlertMessage = data.query.urlAlertMessage;
-        this.urlAlertSuccess = data.query.urlAlertSuccess;
-        this.allowIntrospection = data.schema.allowIntrospection;
-        this.responseStatus = data.query.responseStatus;
-        this.responseTime = data.query.responseTime;
-        this.responseStatusText = data.query.responseStatusText;
+
         this.subscriptionUrl = data.query.subscriptionUrl;
-        this.isSubscribed = data.query.isSubscribed;
-        this.subscriptionResponses = data.query.subscriptionResponseList;
         if (data.history) { // Remove condition when all users have upgraded to v1.6.0+
           this.historyList = data.history.list;
         }
 
-        this.showEditorAlert = data.query.showEditorAlert;
-        this.editorAlertMessage = data.query.editorAlertMessage;
-        this.editorAlertSuccess = data.query.editorAlertSuccess;
-
         // Schema needs to be valid instances of GQLSchema.
         // Rehydrated schema objects are not valid, so we get the schema again.
         if (this.gql.isSchema(data.schema.schema)) {

src/app/reducers/gql-schema/gql-schema.ts

@@ -2,11 +2,6 @@ import { Action } from '@ngrx/store';
 
 import * as gqlSchema from '../../actions/gql-schema/gql-schema';
 
-export interface Variable {
-    key: string;
-    value: string;
-}
-
 export interface State {
     introspection: object;
     schema: object;

src/app/reducers/gql-schema/selectors.ts

@@ -0,0 +1,7 @@
+import { createSelector, Store } from '@ngrx/store';
+import { PerWindowState } from '..';
+
+export const getSchemaState = (state: PerWindowState) => state.schema;
+export const getSchema = createSelector(getSchemaState, state => state.schema);
+export const getIntrospection = createSelector(getSchemaState, state => state.introspection);
+export const allowIntrospection = createSelector(getSchemaState, state => state.allowIntrospection);

src/app/reducers/index.ts

@@ -86,3 +86,6 @@ export const selectWindowState = (windowId: string) => (state: State) => state.w
 export * from './query/selectors';
 export * from './docs/selectors';
 export * from './headers/selectors';
+export * from './variables/selectors';
+export * from './layout/selectors';
+export * from './gql-schema/selectors';

src/app/reducers/layout/selectors.ts

@@ -0,0 +1,6 @@
+import { createSelector, Store } from '@ngrx/store';
+import { PerWindowState } from '..';
+
+export const getLayout = (state: PerWindowState) => state.layout;
+export const getIsLoading = createSelector(getLayout, layout => layout.isLoading);
+export const getTitle = createSelector(getLayout, layout => layout.title);

src/app/reducers/query/selectors.ts

@@ -3,3 +3,8 @@ import { PerWindowState } from '..';
 
 export const getQueryState = (state: PerWindowState) => state.query;
 export const getQueryResult = createSelector(getQueryState, state => state.response);
+export const getResponseStatus = createSelector(getQueryState, state => state.responseStatus);
+export const getResponseTime = createSelector(getQueryState, state => state.responseTime);
+export const getResponseStatusText = createSelector(getQueryState, state => state.responseStatusText);
+export const isSubscribed = createSelector(getQueryState, state => state.isSubscribed);
+export const getSubscriptionResponses = createSelector(getQueryState, state => state.subscriptionResponseList);

src/app/reducers/variables/selectors.ts

@@ -0,0 +1,4 @@
+import { createSelector, Store } from '@ngrx/store';
+import { PerWindowState } from '..';
+
+export const getVariables = (state: PerWindowState) => state.variables.variables;