From 4415a9d6bea1f948e2c9a309d5a75969b2b966bc Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 9 Sep 2018 02:38:59 -0400
Subject: [PATCH] creation of a presentation component to handle accounts
 listing

---
 src/app/app.module.ts                         |  4 ++-
 .../left-side-bar.component.html              |  8 +++--
 .../left-side-bar/left-side-bar.component.ts  |  6 +---
 .../account-icon/account-icon.component.html  |  3 ++
 .../account-icon/account-icon.component.scss  | 21 ++++++++++++++
 .../account-icon.component.spec.ts            | 25 ++++++++++++++++
 .../account-icon/account-icon.component.ts    | 29 +++++++++++++++++++
 7 files changed, 88 insertions(+), 8 deletions(-)
 create mode 100644 src/app/components/left-side-bar/presentation/account-icon/account-icon.component.html
 create mode 100644 src/app/components/left-side-bar/presentation/account-icon/account-icon.component.scss
 create mode 100644 src/app/components/left-side-bar/presentation/account-icon/account-icon.component.spec.ts
 create mode 100644 src/app/components/left-side-bar/presentation/account-icon/account-icon.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ced06ee8..1012f335 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/components/left-side-bar/left-side-bar.component.html b/src/app/components/left-side-bar/left-side-bar.component.html
index 9461ca29..c0787d6b 100644
--- a/src/app/components/left-side-bar/left-side-bar.component.html
+++ b/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>
diff --git a/src/app/components/left-side-bar/left-side-bar.component.ts b/src/app/components/left-side-bar/left-side-bar.component.ts
index 3d13a3f8..3c7d44a9 100644
--- a/src/app/components/left-side-bar/left-side-bar.component.ts
+++ b/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;
   }
diff --git a/src/app/components/left-side-bar/presentation/account-icon/account-icon.component.html b/src/app/components/left-side-bar/presentation/account-icon/account-icon.component.html
new file mode 100644
index 00000000..dd5001cf
--- /dev/null
+++ b/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>
diff --git a/src/app/components/left-side-bar/presentation/account-icon/account-icon.component.scss b/src/app/components/left-side-bar/presentation/account-icon/account-icon.component.scss
new file mode 100644
index 00000000..59d9a68e
--- /dev/null
+++ b/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%;
+    // }
+}
\ No newline at end of file
diff --git a/src/app/components/left-side-bar/presentation/account-icon/account-icon.component.spec.ts b/src/app/components/left-side-bar/presentation/account-icon/account-icon.component.spec.ts
new file mode 100644
index 00000000..de513d9e
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/components/left-side-bar/presentation/account-icon/account-icon.component.ts b/src/app/components/left-side-bar/presentation/account-icon/account-icon.component.ts
new file mode 100644
index 00000000..d974f2c9
--- /dev/null
+++ b/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;    
+  }
+}