Added notify service.

package.json

@@ -59,6 +59,7 @@
     "graphql": "^0.10.5",
     "marked": "^0.3.6",
     "ng2-codemirror": "^1.1.2",
+    "ng2-toastr": "^4.1.2",
     "ngrx-store-localstorage": "^0.1.8",
     "rxjs": "^5.4.2",
     "uuid": "^3.0.1",

src/app/app.module.ts

@@ -4,6 +4,8 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
+import { ToastModule, ToastOptions } from 'ng2-toastr/ng2-toastr';
+
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -18,6 +20,8 @@ import { DocViewerModule } from './components/doc-viewer/doc-viewer.module';
 import { AppComponent } from './containers/app/app.component';
 import { WindowComponent } from './containers/window/window.component';
 
+import { CustomOption } from './services/notify/toastr-options';
+
 import * as services from './services';
 
 export function mapValuesToArray(obj: any): Array<any> {
@@ -33,7 +37,9 @@ const providers = [
     services.GqlService,
     services.DbService,
     services.QueryService,
-    services.WindowService
+    services.WindowService,
+    services.NotifyService,
+    { provide: ToastOptions, useClass: CustomOption }
 ];
 
 @NgModule({
@@ -50,7 +56,8 @@ const providers = [
     DocViewerModule,
     StoreModule.provideStore(appReducer),
     EffectsModule.run(QueryEffects),
-    StoreDevtoolsModule.instrumentOnlyWithExtension()
+    StoreDevtoolsModule.instrumentOnlyWithExtension(),
+    ToastModule.forRoot()
   ],
   providers: providers,
   bootstrap: [AppComponent]

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

@@ -2,9 +2,11 @@ import {
   Component,
   ViewChild,
   Input,
-  OnInit
+  OnInit,
+  ViewContainerRef
 } from '@angular/core';
 import { Store } from '@ngrx/store';
+import { ToastsManager } from 'ng2-toastr/ng2-toastr';
 
 import * as fromRoot from '../../reducers';
 import * as fromHeader from '../../reducers/headers/headers';
@@ -63,9 +65,13 @@ export class WindowComponent implements OnInit {
   constructor(
     private queryService: QueryService,
     private gql: GqlService,
-    private store: Store<any>
+    private store: Store<any>,
+    private toastr: ToastsManager,
+    private vRef: ViewContainerRef
   ) {
 
+    // Required by the notify service
+    this.toastr.setRootViewContainerRef(this.vRef);
   }
 
   ngOnInit() {

src/app/effects/query.ts

@@ -5,8 +5,7 @@ import { Observable } from 'rxjs/Observable';
 
 import * as validUrl from 'valid-url';
 
-import { GqlService } from '../services/gql.service';
-import { QueryService } from '../services/query.service';
+import { GqlService, QueryService, NotifyService } from '../services';
 import * as fromRoot from '../reducers';
 
 import * as queryActions from '../actions/query/query';
@@ -32,12 +31,7 @@ export class QueryEffects {
             // If the URL is not set or is invalid, just return
             if (!response.data.query.url || !validUrl.isUri(response.data.query.url)) {
 
-                const opts = {
-                    message: 'The URL is invalid!',
-                    success: false
-                };
-
-                this.store.dispatch(new queryActions.ShowUrlAlertAction(opts, response.windowId));
+                this.notifyService.error('The URL is invalid!');
                 this.store.dispatch(new layoutActions.StopLoadingAction(response.windowId));
                 return Observable.empty();
             }
@@ -86,21 +80,18 @@ export class QueryEffects {
                 });
         });
 
+    // TODO: Clean this effect up!
     @Effect()
     // Shows the URL set alert after the URL is set
     showUrlSetAlert$: Observable<queryActions.Action> = this.actions$
         .ofType(queryActions.SET_URL)
         .do((data: queryActions.Action) => {
-            const opts = {
-                message: 'URL has been set',
-                success: true
-            };
             // If the URL is not valid
             if (!validUrl.isUri(data.payload)) {
-                opts.message = 'The URL is invalid!';
-                opts.success = false;
+                this.notifyService.error('The URL is invalid!');
+            } else {
+              this.notifyService.success('URL has been set.');
             }
-            this.store.dispatch(new queryActions.ShowUrlAlertAction(opts, data.windowId));
 
             return data;
         })
@@ -203,6 +194,7 @@ export class QueryEffects {
         private actions$: Actions,
         private gqlService: GqlService,
         private queryService: QueryService,
+        private notifyService: NotifyService,
         private store: Store<any>
     ) {}
 

src/app/services/index.ts

@@ -3,3 +3,4 @@ export { GqlService } from './gql.service';
 export { DbService } from './db.service';
 export { QueryService } from './query.service';
 export { WindowService } from './window.service';
+export { NotifyService } from './notify/notify.service';

src/app/services/notify/notify.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { NotifyService } from './notify.service';
+
+describe('NotifyService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NotifyService]
+    });
+  });
+
+  it('should be created', inject([NotifyService], (service: NotifyService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/notify/notify.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { ToastsManager } from 'ng2-toastr/ng2-toastr';
+
+@Injectable()
+export class NotifyService {
+
+  constructor(
+    private toastr: ToastsManager
+  ) {
+  }
+
+  success(message, title = 'Altair') {
+    this.toastr.success(message, title);
+  }
+  error(message, title = 'Altair') {
+    this.toastr.error(message, title);
+  }
+  warning(message, title = 'Altair') {
+    this.toastr.warning(message, title);
+  }
+  info(message, title = 'Altair') {
+    this.toastr.info(message, title);
+  }
+
+}

src/app/services/notify/toastr-options.ts

@@ -0,0 +1,7 @@
+import {ToastOptions} from 'ng2-toastr';
+
+export class CustomOption extends ToastOptions {
+  newestOnTop = false;
+  showCloseButton = true;
+  positionClass = 'toast-top-center';
+}

src/styles.scss

@@ -10,6 +10,8 @@
 @import "./../node_modules/codemirror/addon/lint/lint.css";
 @import "scss/editor";
 
+@import "./../node_modules/ng2-toastr/bundles/ng2-toastr.min.css";
+
 @import "app/containers/app/app.component";
 @import "app/containers/window/window.component";
-@import "app/components/doc-viewer/doc-viewer/doc-viewer.component";
+@import "app/components/doc-viewer/doc-viewer/doc-viewer.component";