first iteration of notification display #55

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

@@ -47,7 +47,9 @@ export class MentionsComponent implements OnInit, OnDestroy {
     }
     
     ngOnDestroy(): void {
-        this.userNotificationServiceSub.unsubscribe();
+        if(this.userNotificationServiceSub){
+            this.userNotificationServiceSub.unsubscribe();
+        }
     }
 
     private loadMentions(){

src/app/components/floating-column/manage-account/notifications/notifications.component.html

@@ -1,3 +1,34 @@
-<p>
-  notifications works!
-</p>
+<div class="stream flexcroll" #statusstream (scroll)="onScroll()">
+    <div class="stream__notification" *ngFor="let notification of notifications">
+        <div *ngIf="notification.type === 'favourite'">
+            <div class="stream__notification--icon">
+
+            </div>
+            <div class="stream__notification--label">
+                <a href class="stream__link">{{ notification.account.username }}</a> favorited your status
+            </div>
+        </div>
+
+        <div *ngIf="notification.type === 'reblog'">
+            <div class="stream__notification--icon">
+
+            </div>
+            <div class="stream__notification--label">
+                <a href class="stream__link">{{ notification.account.username }}</a> boosted your status
+            </div>
+        </div>
+
+        <div *ngIf="notification.type === 'follow'">
+            <div class="stream__notification--icon">
+
+            </div>
+            <div class="stream__notification--label">
+                <a href class="stream__link">{{ notification.account.username }}</a> followed you!
+            </div>
+        </div>
+
+        <app-status *ngIf="notification.status" class="stream__status" [statusWrapper]="notification.status"
+            [isThreadDisplay]="false" (browseAccountEvent)="browseAccount($event)"
+            (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-status>
+    </div>
+</div>

src/app/components/floating-column/manage-account/notifications/notifications.component.scss

@@ -0,0 +1,40 @@
+@import "variables";
+@import "commons";
+@import "mixins";
+
+.stream {
+    height: calc(100%);
+    width: calc(100%);
+    overflow: auto;
+    background-color: $column-background;
+
+    &__error {
+        padding: 20px 20px 0 20px;
+        color: rgb(255, 113, 113);
+    }
+
+    &__notification {
+
+        &--icon {}
+
+        &--label {
+            margin: 0 10px 0 $avatar-column-space;
+            padding-top: 5px;
+        }
+
+
+        &:not(:last-child) {
+            border: solid #06070b;
+            border-width: 0 0 1px 0;
+        }
+    }
+
+    &__link {
+        color: $status-links-color;
+    }
+
+    &__status {
+        display: block;
+        opacity: 0.6;
+    }
+}

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

@@ -1,28 +1,90 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
 
 import { AccountWrapper } from '../../../../models/account.models';
+import { UserNotificationService, UserNotification } from '../../../../services/user-notification.service';
+import { StatusWrapper } from '../../../../models/common.model';
+import { Status, Notification, Account } from '../../../../services/models/mastodon.interfaces';
+import { MastodonService } from '../../../../services/mastodon.service';
+import { NotificationService } from '../../../../services/notification.service';
+import { AccountInfo } from '../../../../states/accounts.state';
 
 @Component({
     selector: 'app-notifications',
     templateUrl: './notifications.component.html',
     styleUrls: ['./notifications.component.scss']
 })
-export class NotificationsComponent implements OnInit {
+export class NotificationsComponent implements OnInit, OnDestroy {
+    notifications: NotificationWrapper[] = [];
+    isLoading = false;
 
     @Input('account')
     set account(acc: AccountWrapper) {
         console.warn('account');
         this._account = acc;
+        this.loadNotifications();
     }
     get account(): AccountWrapper {
         return this._account;
     }
+        
+    @ViewChild('statusstream') public statustream: ElementRef;
 
+    private maxReached = false;
     private _account: AccountWrapper;
+    private userNotificationServiceSub: Subscription;
+    private lastId: string;
 
-    constructor() { }
+    constructor(
+        private readonly notificationService: NotificationService,
+        private readonly userNotificationService: UserNotificationService,
+        private readonly mastodonService: MastodonService) { }
 
     ngOnInit() {
     }
 
+    ngOnDestroy(): void {
+        if(this.userNotificationServiceSub){
+            this.userNotificationServiceSub.unsubscribe();
+        }
+    }
+
+    private loadNotifications(){
+        if(this.userNotificationServiceSub){
+            this.userNotificationServiceSub.unsubscribe();
+        }
+
+        this.notifications.length = 0;
+        this.userNotificationService.markNotificationAsRead(this.account.info);    
+
+        this.userNotificationServiceSub = this.userNotificationService.userNotifications.subscribe((userNotifications: UserNotification[]) => {
+            const userNotification = userNotifications.find(x => x.account.id === this.account.info.id);
+            if(userNotification && userNotification.notifications){
+                userNotification.notifications.forEach((notification: Notification) => {
+                    const notificationWrapper = new NotificationWrapper(notification, this.account.info);
+                    this.notifications.push(notificationWrapper);
+                }); 
+            }
+            this.lastId = userNotification.lastId;
+        });
+    }
+
 }
+
+class NotificationWrapper {
+    constructor(notification: Notification,  provider: AccountInfo) {
+        this.type = notification.type;
+        switch(this.type){            
+            case 'mention': 
+            case 'reblog': 
+            case 'favourite':
+                this.status= new StatusWrapper(notification.status, provider);
+                break;          
+        }    
+        this.account = notification.account;  
+    }
+
+    account: Account;
+    status: StatusWrapper;
+    type: 'mention' | 'reblog' | 'favourite' | 'follow';
+}

src/sass/_variables.scss

@@ -46,4 +46,8 @@ $button-size: 30px;
 $button-color: darken(white, 30);
 $button-color-hover: white;
 $button-background-color: $color-primary;
-$button-background-color-hover: lighten($color-primary, 20);
+$button-background-color-hover: lighten($color-primary, 20);
+
+
+
+$column-background: #0f111a;