display avatar on scheduled statuses

src/app/components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component.html

@@ -1,5 +1,6 @@
 <div class="scheduled-status">
     <div class="scheduled-status__avatar">      
+        <img class="scheduled-status__avatar--image" src="{{avatar}}" />
     </div>
 
     <div class="scheduled-status__content">

src/app/components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component.scss

@@ -0,0 +1,16 @@
+.scheduled-status {
+    padding: 5px 5px 0 5px;
+
+    outline: 1px solid greenyellow;
+
+    &__avatar {
+        &--image {
+            width: 40px;
+        }
+    }
+
+    &__content {
+
+    }
+
+}

src/app/components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
 
 import { AccountInfo } from '../../../../states/accounts.state';
 import { ScheduledStatus } from '../../../../services/models/mastodon.interfaces';
+import { ToolsService } from '../../../../services/tools.service';
 
 @Component({
     selector: 'app-scheduled-status',
@@ -10,12 +11,16 @@ import { ScheduledStatus } from '../../../../services/models/mastodon.interfaces
 })
 export class ScheduledStatusComponent implements OnInit {
 
+    avatar: string;
     @Input() account: AccountInfo;
     @Input() status: ScheduledStatus;
 
-    constructor() { }
+    constructor(private readonly toolsService: ToolsService) { }
 
     ngOnInit() {
+        this.toolsService.getAvatar(this.account)
+            .then((avatar: string) => {
+                this.avatar = avatar;
+            });
     }
-
 }

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

@@ -12,6 +12,7 @@ import { NavigationService, LeftPanelType } from "../../services/navigation.serv
 import { MastodonService } from "../../services/mastodon.service";
 import { NotificationService } from "../../services/notification.service";
 import { UserNotificationService, UserNotification } from '../../services/user-notification.service';
+import { ToolsService } from '../../services/tools.service';
 
 @Component({
     selector: "app-left-side-bar",
@@ -33,6 +34,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
     private notificationSub: Subscription;
 
     constructor(
+        private readonly toolsService: ToolsService,
         private readonly userNotificationServiceService: UserNotificationService,
         private readonly notificationService: NotificationService,
         private readonly navigationService: NavigationService,
@@ -56,14 +58,19 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
                         accWrapper.info = acc;
 
                         this.accounts.push(accWrapper);
+                        
+                        this.toolsService.getAvatar(acc)
+                            .then((avatar: string) => {
+                                accWrapper.avatar = avatar;
+                            });                            
 
-                        this.mastodonService.retrieveAccountDetails(acc)
-                            .then((result: Account) => {
-                                accWrapper.avatar = result.avatar;
-                            })
-                            .catch((err: HttpErrorResponse) => {
-                                this.notificationService.notifyHttpError(err);
-                            });
+                        // this.mastodonService.retrieveAccountDetails(acc)
+                        //     .then((result: Account) => {
+                        //         accWrapper.avatar = result.avatar;
+                        //     })
+                        //     .catch((err: HttpErrorResponse) => {
+                        //         this.notificationService.notifyHttpError(err);
+                        //     });
                     }
                 }
 

src/app/services/tools.service.ts

@@ -11,11 +11,28 @@ import { AccountSettings, SaveAccountSettings } from '../states/settings.state';
     providedIn: 'root'
 })
 export class ToolsService {
+    private accountAvatar: { [id: string]: string; } = {};
+
     constructor(
         private readonly mastodonService: MastodonService,
         private readonly store: Store) { }
 
 
+    getAvatar(acc: AccountInfo): Promise<string> {
+        if (this.accountAvatar[acc.id]) {
+            return Promise.resolve(this.accountAvatar[acc.id]);
+        } else {
+            return this.mastodonService.retrieveAccountDetails(acc)
+                .then((result: Account) => {
+                    this.accountAvatar[acc.id] = result.avatar;
+                    return result.avatar;
+                })
+                .catch((err) => {
+                    return "";
+                });
+        }
+    }
+
     getSelectedAccounts(): AccountInfo[] {
         var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
         return regAccounts.filter(x => x.isSelected);