creation of a presentation component to handle accounts listing

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { StreamsService } from "./services/streams.service";
 import { StreamingService } from "./services/streaming.service";
 import { RegisteredAppsState } from "./states/registered-apps.state";
 import { AccountsState } from "./states/accounts.state";
+import { AccountIconComponent } from './components/left-side-bar/presentation/account-icon/account-icon.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -39,7 +40,8 @@ const routes: Routes = [
     StreamComponent,
     StreamsSelectionFooterComponent,
     TootComponent,
-    RegisterNewAccountComponent
+    RegisterNewAccountComponent,
+    AccountIconComponent
   ],
   imports: [
     BrowserModule,

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

@@ -3,10 +3,14 @@
     <a href title="write toot!" (click)="createNewToot()">Toot!</a>
   </div>
 
-  <div *ngFor="let account of accounts" class="mam-account-selector">
-    <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a>
+  <div *ngFor="let account of accounts" >
+    <app-account-icon [account]="account" ></app-account-icon>
+
+    <!-- <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>

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

@@ -49,11 +49,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.sub.unsubscribe();
   }
-
-  toogleAccount(accountId: number): boolean {
-    return false;
-  }
-
+  
   addNewAccount(): boolean {
     return false;
   }

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

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

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

@@ -0,0 +1,21 @@
+.account-icon {
+    display: inline-block;
+    width: 50px;
+    padding-top: 4px;
+    // margin-left: 5px;
+    margin: 0 0 5px 5px;
+  
+    &__avatar {
+        border-radius: 50%;
+        width: 40px;
+    }
+
+    // & a {
+    //     margin-left: 4px;
+    //     /*margin-top: 4px;*/
+    // }
+    // & img {
+    //     width: 40px;
+    //     border-radius: 50%;
+    // }
+}

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

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

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

@@ -0,0 +1,29 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { AccountInfo } from '../../../../states/accounts.state';
+import { AccountsService } from '../../../../services/accounts.service';
+import { AccountWrapper } from '../../../../models/account.models';
+import { Account } from "../../../../services/models/mastodon.interfaces";
+
+@Component({
+  selector: 'app-account-icon',
+  templateUrl: './account-icon.component.html',
+  styleUrls: ['./account-icon.component.scss']
+})
+export class AccountIconComponent implements OnInit {
+  @Input() account: AccountWrapper;
+
+  constructor() { }
+
+  ngOnInit() {   
+  }
+
+  toogleAccount(): boolean {
+    console.warn(`click`);
+    return false;
+  }
+
+  openMenu(event): boolean {
+    console.warn(`openMenu`);
+    return false;    
+  }
+}