added archi to display scheduled statuses

src/app/app.module.ts

@@ -74,6 +74,7 @@ import { StatusSchedulerComponent } from './components/create-status/status-sche
 import { PollEditorComponent } from './components/create-status/poll-editor/poll-editor.component';
 import { PollEntryComponent } from './components/create-status/poll-editor/poll-entry/poll-entry.component';
 import { ScheduledStatusesComponent } from './components/floating-column/scheduled-statuses/scheduled-statuses.component';
+import { ScheduledStatusComponent } from './components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component';
 
 
 const routes: Routes = [
@@ -132,7 +133,8 @@ const routes: Routes = [
         StatusSchedulerComponent,
         PollEditorComponent,
         PollEntryComponent,
-        ScheduledStatusesComponent
+        ScheduledStatusesComponent,
+        ScheduledStatusComponent
     ],
     entryComponents: [
         EmojiPickerComponent

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

@@ -0,0 +1,3 @@
+<p>
+  scheduled-status works!
+</p>

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

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

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

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { AccountInfo } from '../../../../states/accounts.state';
+import { ScheduledStatus } from '../../../../services/models/mastodon.interfaces';
+
+@Component({
+    selector: 'app-scheduled-status',
+    templateUrl: './scheduled-status.component.html',
+    styleUrls: ['./scheduled-status.component.scss']
+})
+export class ScheduledStatusComponent implements OnInit {
+
+    @Input() account: AccountInfo;
+    @Input() status: ScheduledStatus;
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

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

@@ -1,3 +1,11 @@
-<p>
-  scheduled-statuses works!
-</p>
+<div class="panel">
+    <h3 class="panel__title">Scheduled Statuses</h3>
+
+    <div class="scheduled-statuses-display flexcroll">
+        <div *ngFor="let n of scheduledStatuses">
+            <div *ngFor="let s of n.statuses">
+                <app-scheduled-status [account]="n.account" [status]="s" ></app-scheduled-status>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,9 @@
+@import "variables";
+@import "panel";
+@import "commons";
+
+
+.scheduled-statuses-display {
+    overflow: auto;
+    height: calc(100%);
+}

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

@@ -1,15 +1,29 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { ScheduledStatusService, ScheduledStatusNotification } from '../../../services/scheduled-status.service';
 
 @Component({
-  selector: 'app-scheduled-statuses',
-  templateUrl: './scheduled-statuses.component.html',
-  styleUrls: ['./scheduled-statuses.component.scss']
+    selector: 'app-scheduled-statuses',
+    templateUrl: './scheduled-statuses.component.html',
+    styleUrls: ['./scheduled-statuses.component.scss']
 })
-export class ScheduledStatusesComponent implements OnInit {
+export class ScheduledStatusesComponent implements OnInit, OnDestroy {
+    private statusSub: Subscription;
+    scheduledStatuses: ScheduledStatusNotification[] = [];
 
-  constructor() { }
+    constructor(
+        private readonly scheduledStatusService: ScheduledStatusService) {            
+    }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+        this.statusSub = this.scheduledStatusService.scheduledStatuses.subscribe((value: ScheduledStatusNotification[]) => {
+            console.warn(value);
+            this.scheduledStatuses = value;
+        });
+    }
 
+    ngOnDestroy(): void {
+        if (this.statusSub) this.statusSub.unsubscribe();
+    }
 }

src/app/services/models/api.settings.ts

@@ -67,7 +67,7 @@ export class ApiRoutes {
     voteOnPoll = '/api/v1/polls/{0}/votes';
     getPoll = '/api/v1/polls/{0}';
     getConversations = '/api/v1/conversations';
-    getScheduledStatuses: '/api/v1/scheduled_statuses';
-    putScheduleStatus: '/api/v1/scheduled_statuses/{0}';
-    deleteScheduleStatus: '/api/v1/scheduled_statuses/{0}';
+    getScheduledStatuses = '/api/v1/scheduled_statuses';
+    putScheduleStatus = '/api/v1/scheduled_statuses/{0}';
+    deleteScheduleStatus = '/api/v1/scheduled_statuses/{0}';
 }

src/app/services/scheduled-status.service.ts

@@ -1,10 +1,11 @@
 import { Injectable } from '@angular/core';
 import { Store } from '@ngxs/store';
+import { BehaviorSubject } from 'rxjs';
 
 import { MastodonService } from './mastodon.service';
 import { AccountInfo } from '../states/accounts.state';
 import { ScheduledStatus } from './models/mastodon.interfaces';
-import { BehaviorSubject } from 'rxjs';
+import { NotificationService } from './notification.service';
 
 @Injectable({
     providedIn: 'root'
@@ -13,6 +14,7 @@ export class ScheduledStatusService {
     scheduledStatuses = new BehaviorSubject<ScheduledStatusNotification[]>([]);
 
     constructor(
+        private readonly notificationService: NotificationService,
         private readonly mastodonService: MastodonService,
         private readonly store: Store) {
 
@@ -26,10 +28,12 @@ export class ScheduledStatusService {
         accounts.forEach((account: AccountInfo) => {
             let promise = this.mastodonService.getScheduledStatuses(account)
                 .then((statuses: ScheduledStatus[]) => {
-                    this.processStatuses(account, statuses);
+                    if (statuses) {
+                        this.processStatuses(account, statuses);
+                    }
                 })
                 .catch(err => {
-
+                    this.notificationService.notifyHttpError(err);
                 });
             promises.push(promise);
         });
@@ -43,10 +47,18 @@ export class ScheduledStatusService {
     }
 
     private processStatuses(account: AccountInfo, statuses: ScheduledStatus[]) {
-        const previousStatuses = this.scheduledStatuses.value.find(x => x.account.id === account.id).statuses;
-        const uniques = [...new Set([...statuses, ...previousStatuses].map(x => x.id))];
+        let previousStatuses: ScheduledStatus[] = [];
+        const notification = this.scheduledStatuses.value.find(x => x.account.id === account.id);
+        if (notification) {
+            previousStatuses = notification.statuses;
+        }
 
-        if (uniques.length !== statuses.length) {
+        let uniques: string[] = [];
+        if (statuses && previousStatuses) {
+            uniques = [...new Set([...statuses, ...previousStatuses].map(x => x.id))];
+        }
+
+        if (uniques.length !== previousStatuses.length) {
             const currentStatuses = new ScheduledStatusNotification(account, statuses);
 
             const otherNotifications = this.scheduledStatuses.value.filter(x => x.account.id !== account.id);