From c42d23cd35072633a9d63b8a90519e99dd2d93f2 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 7 Apr 2019 20:34:33 -0400
Subject: [PATCH] fix #80

---
 .../my-account/my-account.component.html      |  5 +-
 .../my-account/my-account.component.scss      | 34 ++++++---
 .../my-account/my-account.component.ts        | 73 +++++++++++++++----
 3 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.html b/src/app/components/floating-column/manage-account/my-account/my-account.component.html
index 82d03bde..d7dc463b 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.html
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.html
@@ -1,7 +1,8 @@
 <div class="my-account__body flexcroll">
     <h4 class="my-account__label">add column:</h4>
-    <a class="my-account__link my-account__blue" href *ngFor="let stream of availableStreams" (click)="addStream(stream)">
-        {{ stream.name }}
+    <a class="my-account__link my-account__blue" href *ngFor="let stream of availableStreams" 
+        (click)="addStream(stream)" title="{{ stream.isAdded ? '' : 'add stream'}}" [class.my-account__link--disabled]="stream.isAdded">
+        {{ stream.name }} <fa-icon class="my-account__link--icon" *ngIf="stream.isAdded" [icon]="faCheckSquare"></fa-icon>
     </a>
     <h4 class="my-account__label my-account__margin-top">remove account from sengi:</h4>
     <a class="my-account__link my-account__red" href (click)="removeAccount()">
diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
index 4d7ba144..094bb85d 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
@@ -20,18 +20,6 @@
         margin-left: 5px;
         color: $font-color-secondary;
     }  
-    &__link {
-        text-decoration: none;
-        display: block; // width: calc(100% - 20px);
-        width: 100%; // height: 30px;
-        padding: 5px 10px; // border: solid 1px black;
-        &:not(:last-child) {
-            margin-bottom: 5px;
-        }
-    }
-    &__margin-top {
-        margin-top: 25px;
-    }
     &__blue {
         background-color: $color-primary;
         color: #fff;
@@ -47,4 +35,26 @@
             background-color: lighten($red-button-color, 15);
         }
     }
+    &__link {
+        text-decoration: none;
+        display: block; // width: calc(100% - 20px);
+        width: 100%; // height: 30px;
+        padding: 5px 10px; // border: solid 1px black;
+        &:not(:last-child) {
+            margin-bottom: 5px;
+        }
+        &--icon {
+            float: right;
+        }
+        &--disabled {
+            cursor: default;
+            background-color: darken($color-primary, 4);
+            &:hover {
+                background-color: darken($color-primary, 4);
+            }
+        }
+    }
+    &__margin-top {
+        margin-top: 25px;
+    }   
 }
\ No newline at end of file
diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.ts b/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
index 67a52474..d4e0e9e9 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.ts
@@ -1,5 +1,7 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Store } from '@ngxs/store';
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { Store, Select } from '@ngxs/store';
+import { faCheckSquare } from "@fortawesome/free-regular-svg-icons";
 
 import { NotificationService } from '../../../../services/notification.service';
 import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../../states/streams.state';
@@ -12,11 +14,24 @@ import { NavigationService } from '../../../../services/navigation.service';
     templateUrl: './my-account.component.html',
     styleUrls: ['./my-account.component.scss']
 })
-export class MyAccountComponent implements OnInit {
+export class MyAccountComponent implements OnInit, OnDestroy {
+   
+    faCheckSquare = faCheckSquare;
     
-    availableStreams: StreamElement[] = [];
+    availableStreams: StreamWrapper[] = [];
 
-    @Input() account: AccountWrapper;
+    private _account: AccountWrapper;
+    @Input('account')
+    set account(acc: AccountWrapper) {
+        this._account = acc;
+        this.loadStreams(acc);
+    }
+    get account(): AccountWrapper {
+        return this._account;
+    }
+    
+    @Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
+    private streamChangedSub: Subscription;
 
     constructor(
         private readonly store: Store,
@@ -24,19 +39,41 @@ export class MyAccountComponent implements OnInit {
         private notificationService: NotificationService) { }
 
     ngOnInit() {
-        const instance = this.account.info.instance;
-        this.availableStreams.length = 0;
-        this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Federated Timeline', this.account.info.id, null, null, instance));
-        this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.account.info.id, null, null, instance));
-        this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Home', this.account.info.id, null, null, instance));
+        this.streamChangedSub = this.streamElements$.subscribe((streams: StreamElement[]) => {
+            this.loadStreams(this.account);
+        });
     }
 
-    addStream(stream: StreamElement): boolean {
-        if (stream) {
+    ngOnDestroy(): void {
+        if(this.streamChangedSub) { 
+            this.streamChangedSub.unsubscribe();
+        }
+    }
+
+    private loadStreams(account: AccountWrapper){
+        const instance = account.info.instance;
+        this.availableStreams.length = 0;
+        this.availableStreams.push(new StreamWrapper(new StreamElement(StreamTypeEnum.global, 'Federated Timeline', account.info.id, null, null, instance)));
+        this.availableStreams.push(new StreamWrapper(new StreamElement(StreamTypeEnum.local, 'Local Timeline', account.info.id, null, null, instance)));
+        this.availableStreams.push(new StreamWrapper(new StreamElement(StreamTypeEnum.personnal, 'Home', account.info.id, null, null, instance)));
+
+        const loadedStreams = <StreamElement[]>this.store.snapshot().streamsstatemodel.streams;
+        this.availableStreams.forEach(s => {
+            if(loadedStreams.find(x => x.id === s.id)){
+                s.isAdded = true;
+            } else {
+                s.isAdded = false;
+            }
+        });
+    }
+
+    addStream(stream: StreamWrapper): boolean {
+        if (stream && !stream.isAdded) {
             this.store.dispatch([new AddStream(stream)]).toPromise()
                 .then(() => {
-                    this.notificationService.notify(`stream added`, false);
-                });
+                    stream.isAdded = true;
+                    //this.notificationService.notify(`stream added`, false);
+                });            
         }
         return false;
     }
@@ -48,3 +85,11 @@ export class MyAccountComponent implements OnInit {
         return false;
     }
 }
+
+class StreamWrapper extends StreamElement {
+    constructor(stream: StreamElement) {
+        super(stream.type, stream.name, stream.accountId, stream.tag, stream.list, stream.instance);        
+    }
+
+    isAdded: boolean;
+}
\ No newline at end of file