added first iteration of notification center

src/app/app.component.html

@@ -7,7 +7,8 @@
 <div id="display-zone">
     <app-tutorial id="tutorial" *ngIf="tutorialActive"></app-tutorial>
     <app-floating-column id="floating-column" *ngIf="floatingColumnActive"></app-floating-column>
-    <router-outlet></router-outlet> 
+    <app-notification-hub></app-notification-hub>
+    <router-outlet></router-outlet>     
 </div>
 
 <app-streams-selection-footer>

src/app/app.module.ts

@@ -46,6 +46,8 @@ import { TimeAgoPipe } from './pipes/time-ago.pipe';
 import { StreamStatusesComponent } from './components/stream/stream-statuses/stream-statuses.component';
 import { StreamEditionComponent } from './components/stream/stream-edition/stream-edition.component';
 import { TutorialComponent } from './components/tutorial/tutorial.component';
+import { NotificationHubComponent } from './components/notification-hub/notification-hub.component';
+import { NotificationService } from "./services/notification.service";
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -82,7 +84,8 @@ const routes: Routes = [
     TimeAgoPipe,
     StreamStatusesComponent,
     StreamEditionComponent,
-    TutorialComponent
+    TutorialComponent,
+    NotificationHubComponent
   ],
   imports: [
     FontAwesomeModule,
@@ -100,7 +103,7 @@ const routes: Routes = [
     ]),
     NgxsStoragePluginModule.forRoot()
   ],
-  providers: [AuthService, NavigationService, MastodonService, StreamingService],
+  providers: [AuthService, NavigationService, NotificationService, MastodonService, StreamingService],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

src/app/components/floating-column/manage-account/manage-account.component.ts

@@ -4,6 +4,7 @@ import { Store } from '@ngxs/store';
 import { AccountsStateModel, AccountInfo, RemoveAccount } from '../../../states/accounts.state';
 import { AccountWrapper } from '../../../models/account.models';
 import { NavigationService } from '../../../services/navigation.service';
+import { NotificationService } from '../../../services/notification.service';
 
 @Component({
     selector: 'app-manage-account',
@@ -17,7 +18,8 @@ export class ManageAccountComponent implements OnInit {
 
     constructor(
         private readonly store: Store,
-        private readonly navigationService: NavigationService) { }
+        private readonly navigationService: NavigationService,
+        private notificationService: NotificationService) { }
 
     ngOnInit() {
         const instance = this.account.info.instance;
@@ -29,7 +31,9 @@ export class ManageAccountComponent implements OnInit {
 
     addStream(stream: StreamElement): boolean {
         if (stream) {
-            this.store.dispatch([new AddStream(stream)]);
+            this.store.dispatch([new AddStream(stream)]).toPromise().then(() => {
+                this.notificationService.notify(`added ${stream.displayableFullName}`, false);
+            });
         }
         return false;
     }

src/app/components/notification-hub/notification-hub.component.html

@@ -0,0 +1,5 @@
+<div class="notification-hub">
+    <div class="notification-hub__notification" *ngFor="let notification of notifications" (click)="onClick(notification)">
+        {{ notification.message }}
+    </div>
+</div>  

src/app/components/notification-hub/notification-hub.component.scss

@@ -0,0 +1,14 @@
+.notification-hub {
+    position: fixed;
+    bottom: 30px;
+    z-index: 9999999;
+    margin: 0 0 10px 0;
+    
+    &__notification{
+        background-color: #22b90e;
+        color: black;
+        padding: 5px 10px;
+        border-radius: 2px;
+        margin: 0 0 5px 15px;
+    }
+}

src/app/components/notification-hub/notification-hub.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationHubComponent } from './notification-hub.component';
+
+xdescribe('NotificationHubComponent', () => {
+  let component: NotificationHubComponent;
+  let fixture: ComponentFixture<NotificationHubComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationHubComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationHubComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/notification-hub/notification-hub.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { NotificationService, NotificatioData } from '../../services/notification.service';
+
+@Component({
+    selector: 'app-notification-hub',
+    templateUrl: './notification-hub.component.html',
+    styleUrls: ['./notification-hub.component.scss']
+})
+export class NotificationHubComponent implements OnInit {
+    notifications: NotificatioData[] = [];
+
+    constructor(private notificationService: NotificationService) { }
+
+    ngOnInit() {
+        this.notificationService.notifactionStream.subscribe((notification: NotificatioData) => {
+            this.notifications.push(notification);
+
+            setTimeout(() => {
+                this.notifications = this.notifications.filter(x => x.id === notification.id);
+            }, 2000);
+        });
+
+        // this.autoSubmit();       
+    }
+    
+    autoSubmit(): any {
+        this.notificationService.notify("test message", false);
+
+        setTimeout(() => {
+            this.autoSubmit();
+        }, 5000);
+    }
+
+    onClick(notification: NotificatioData): void{
+        this.notifications = this.notifications.filter(x => x.id === notification.id);
+
+        setTimeout(() => {
+            this.notifications.length = 0;
+        }, 2000);
+    }
+}

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

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

src/app/services/notification.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class NotificationService {
+    public notifactionStream = new Subject<NotificatioData>();
+
+    constructor() {
+    }
+
+    public notify(message: string, isError: boolean){
+        let newNotification = new NotificatioData(message, isError);
+        this.notifactionStream.next(newNotification);
+    }
+}
+
+export class NotificatioData {
+    public id: string;
+
+    constructor(
+        public message: string,
+        public isError: boolean
+    ) { 
+        this.id = `${message}${new Date().getTime()}`;
+    }
+}