wirering from account presentation comp to smart comp

src/app/components/left-side-bar/left-side-bar.component.html

@@ -1,22 +1,23 @@
 <div id="mam-left-bar">
-  <div id="mam-create-toot">
-    <a href title="write toot!" (click)="createNewToot()">Toot!</a>
-  </div>
+    <div id="mam-create-toot">
+        <a href title="write toot!" (click)="createNewToot()">Toot!</a>
+    </div>
 
-  <div *ngFor="let account of accounts" >
-    <app-account-icon [account]="account" ></app-account-icon>
+    <div *ngFor="let account of accounts">
+        <app-account-icon [account]="account" (toogleAccountNotify)="onToogleAccountNotify($event)" (openMenuNotify)="onOpenMenuNotify($event)">
+        </app-account-icon>
 
-    <!-- <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a> -->
-  </div>
+        <!-- <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a> -->
+    </div>
 
 
 
-  <div id="mam-account-add">
-    <a href title="add new account" [routerLink]="['/register']">+</a>
-  </div>
+    <div id="mam-account-add">
+        <a href title="add new account" [routerLink]="['/register']">+</a>
+    </div>
 
 
 
 
 
-</div>
+</div>

src/app/components/left-side-bar/left-side-bar.component.ts

@@ -17,6 +17,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
   accounts: AccountWrapper[] = [];
   accounts$: Observable<AccountInfo[]>;
 
+  private loadedAccounts: { [index: string]: AccountInfo } = {};
   private sub: Subscription;
 
   constructor(
@@ -29,24 +30,19 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
   private currentLoading: number;
   ngOnInit() {
     this.accounts$.subscribe((accounts: AccountInfo[]) => {
-      console.warn(' this.accounts$.subscribe(');
-      console.warn(accounts);
-     
-
       if (accounts) {
-        for (let acc of accounts) {
+        this.loadedAccounts = {};
+        this.accounts.length = 0;
 
+        for (let acc of accounts) {
           const accWrapper = new AccountWrapper();
           accWrapper.username = `${acc.username}@${acc.instance}`;
           this.accounts.push(accWrapper);
+          this.loadedAccounts[accWrapper.username] = acc;
 
           this.accountsService.retrieveAccountDetails(acc)
             .then((result: Account) => {
-              console.error(result);
-              const accounts = this.accounts.filter(x => result.url.includes(acc.username) && result.url.includes(acc.instance));
-              for (const account of accounts) {
-                account.avatar = result.avatar;
-              }              
+              accWrapper.avatar = result.avatar;
             });
         }
       }
@@ -56,11 +52,15 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.sub.unsubscribe();
   }
-  
-  addNewAccount(): boolean {
-    return false;
+
+  onToogleAccountNotify(username: string) {
+    console.warn(`onToogleAccountNotify username ${username}`);
   }
 
+  onOpenMenuNotify(username: string) {
+    console.warn(`onOpenMenuNotify username ${username}`);
+  }
+  
   createNewToot(): boolean {
     return false;
   }

src/app/components/left-side-bar/presentation/account-icon/account-icon.component.html

@@ -1,3 +1,4 @@
-<a class="account-icon" href title="{{ account.username }}" (click)="toogleAccount()" (contextmenu)="openMenu()">
-  <img class="account-icon__avatar" src="{{ account.avatar }}" />
+<a class="account-icon"
+  href title="{{ account.username }}" (click)="toogleAccount()" (contextmenu)="openMenu()">
+  <img class="account-icon__avatar"  [class.account-icon__avatar--selected]="isSelected" src="{{ account.avatar }}" />
 </a>

src/app/components/left-side-bar/presentation/account-icon/account-icon.component.scss

@@ -1,15 +1,39 @@
 .account-icon {
     display: inline-block;
     width: 50px;
-    padding-top: 4px;
+    // padding-top: 4px;
     // margin-left: 5px;
     margin: 0 0 5px 5px;
+   
+   
+
   
     &__avatar {
         border-radius: 50%;
+        border-radius: 2px;
         width: 40px;
-    }
+        opacity: .3;
+        transition: all .2s;
 
+        &:hover {
+            filter: alpha(opacity=50);
+            opacity: .5;
+        }
+
+        &--selected {
+            // border-radius: 20%;
+            filter: alpha(opacity=100);
+            opacity: 1;
+
+            &:hover {
+                filter: alpha(opacity=100);
+                opacity: 1;
+            }
+    
+        }
+    }
+    
+   
     // & a {
     //     margin-left: 4px;
     //     /*margin-top: 4px;*/

src/app/components/left-side-bar/presentation/account-icon/account-icon.component.ts

@@ -1,8 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { AccountInfo } from '../../../../states/accounts.state';
-import { AccountsService } from '../../../../services/accounts.service';
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 import { AccountWrapper } from '../../../../models/account.models';
-import { Account } from "../../../../services/models/mastodon.interfaces";
 
 @Component({
   selector: 'app-account-icon',
@@ -11,6 +8,10 @@ import { Account } from "../../../../services/models/mastodon.interfaces";
 })
 export class AccountIconComponent implements OnInit {
   @Input() account: AccountWrapper;
+  @Output() toogleAccountNotify = new EventEmitter<string>();
+  @Output() openMenuNotify = new EventEmitter<string>();
+
+  isSelected: boolean = false;
 
   constructor() { }
 
@@ -18,12 +19,13 @@ export class AccountIconComponent implements OnInit {
   }
 
   toogleAccount(): boolean {
-    console.warn(`click`);
+    this.toogleAccountNotify.emit(this.account.username);
+    this.isSelected = !this.isSelected;
     return false;
   }
 
   openMenu(event): boolean {
-    console.warn(`openMenu`);
+    this.openMenuNotify.emit(this.account.username);
     return false;    
   }
 }

src/app/pages/register-new-account/register-new-account.component.ts

@@ -43,8 +43,8 @@ export class RegisterNewAccountComponent implements OnInit {
             this.authService.getToken(appDataWrapper.instance, appInfo.app.client_id, appInfo.app.client_secret, code, appInfo.app.redirect_uri)
                 .then((tokenData: TokenData) => {
                     const accountInfo = new AccountInfo();
-                    accountInfo.username = appDataWrapper.username;
-                    accountInfo.instance = appDataWrapper.instance;
+                    accountInfo.username = appDataWrapper.username.toLowerCase();
+                    accountInfo.instance = appDataWrapper.instance.toLowerCase();
                     accountInfo.token = tokenData;
 
                     this.store.dispatch([new AddAccount(accountInfo)])