StatusBar and Sidebar views update correctly

src/app/components/browse/browse.component.html

@@ -1,4 +1,4 @@
-<app-search-bar (resultsUpdated)="resultTable.results = $event"></app-search-bar>
+<app-search-bar (resultsUpdated)="onResultsUpdated($event)"></app-search-bar>
 <div class="ui celled two column grid">
   <div id="table-row" class="row">
     <div id="table-column" class="column twelve wide">
@@ -9,4 +9,4 @@
     </div>
   </div>
 </div>
-<app-status-bar></app-status-bar>
+<app-status-bar #statusBar></app-status-bar>

src/app/components/browse/browse.component.ts

@@ -1,15 +1,25 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
+import { ChartSidebarComponent } from './chart-sidebar/chart-sidebar.component'
+import { StatusBarComponent } from './status-bar/status-bar.component'
+import { SongResult } from 'src/electron/shared/interfaces/search.interface'
+import { ResultTableComponent } from './result-table/result-table.component'
 
 @Component({
   selector: 'app-browse',
   templateUrl: './browse.component.html',
   styleUrls: ['./browse.component.scss']
 })
-export class BrowseComponent implements OnInit {
+export class BrowseComponent {
+
+  @ViewChild('resultTable', { static: true }) resultTable: ResultTableComponent
+  @ViewChild('chartSidebar', { static: true }) chartSidebar: ChartSidebarComponent
+  @ViewChild('statusBar', { static: true }) statusBar: StatusBarComponent
 
   constructor() { }
 
-  ngOnInit() {
-    console.log('Browse component loaded.')
+  onResultsUpdated(results: SongResult[]) {
+    this.resultTable.results = results
+    this.chartSidebar.selectedVersion = undefined
+    this.statusBar.resultCount = results.length
   }
 }

src/app/components/browse/status-bar/downloads-modal/downloads-modal.component.ts

@@ -1,7 +1,6 @@
 import { Component, ChangeDetectorRef } from '@angular/core'
 import { Download } from '../../../../../electron/shared/interfaces/download.interface'
 import { DownloadService } from '../../../../core/services/download.service'
-import * as _ from 'underscore'
 
 @Component({
   selector: 'app-downloads-modal',
@@ -12,8 +11,7 @@ export class DownloadsModalComponent {
 
   downloads: Download[] = []
 
-  constructor(downloadService: DownloadService, private ref: ChangeDetectorRef) {
-    const detectChanges = _.throttle(() => this.ref.detectChanges(), 30)
+  constructor(downloadService: DownloadService, ref: ChangeDetectorRef) {
     downloadService.onDownloadUpdated(download => {
       const index = this.downloads.findIndex(thisDownload => thisDownload.versionID == download.versionID)
       if (index == -1) {
@@ -21,7 +19,7 @@ export class DownloadsModalComponent {
       } else {
         this.downloads[index] = download
       }
-      detectChanges()
+      ref.detectChanges()
     })
   }
 

src/app/components/browse/status-bar/status-bar.component.html

@@ -1,9 +1,9 @@
 <div class="ui bottom borderless menu">
-  <div class="item">42 Results</div>
+  <div *ngIf="resultCount > 0" class="item">{{resultCount}} Result{{resultCount == 1 ? '' : 's'}}</div>
   <div class="item">
-    <button class="ui positive button">Download Selected</button>
+    <button *ngIf="selectedResults.length > 0" class="ui positive button">Download Selected</button>
   </div>
-  <a *ngIf="!downloading" class="item right" (click)="showDownloads()">
+  <a *ngIf="downloading" class="item right" (click)="showDownloads()">
     <div #progressBar appProgressBar [percent]="percent" class="ui progress">
       <div class="bar">
         <div class="progress"></div>

src/app/components/browse/status-bar/status-bar.component.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core'
+import { Component, ChangeDetectorRef } from '@angular/core'
+import { SongResult } from 'src/electron/shared/interfaces/search.interface'
+import { DownloadService } from 'src/app/core/services/download.service'
 
 @Component({
   selector: 'app-status-bar',
@@ -7,9 +9,18 @@ import { Component } from '@angular/core'
 })
 export class StatusBarComponent {
 
+  resultCount = 0
   downloading = false
+  percent = 0
+  selectedResults: SongResult[] = []
 
-  constructor() { }
+  constructor(downloadService: DownloadService, ref: ChangeDetectorRef) {
+    downloadService.onDownloadUpdated(() => {
+      this.downloading = downloadService.downloadCount > 0
+      this.percent = downloadService.totalPercent
+      ref.detectChanges()
+    })
+  }
 
   showDownloads() {
     $('#downloadsModal').modal('show')

src/app/core/services/download.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, EventEmitter } from '@angular/core'
 import { ElectronService } from './electron.service'
 import { Download, NewDownload } from '../../../electron/shared/interfaces/download.interface'
+import * as _ from 'underscore'
 
 @Injectable({
   providedIn: 'root'
@@ -8,17 +9,44 @@ import { Download, NewDownload } from '../../../electron/shared/interfaces/downl
 export class DownloadService {
 
   private downloadUpdatedEmitter = new EventEmitter<Download>()
+  private downloads: Download[] = []
 
   constructor(private electronService: ElectronService) { }
 
   addDownload(newDownload: NewDownload) {
     this.electronService.receiveIPC('download-updated', result => {
       this.downloadUpdatedEmitter.emit(result)
+
+      // Update <this.downloads> with result
+      const thisDownloadIndex = this.downloads.findIndex(download => download.versionID == result.versionID)
+      if (thisDownloadIndex == -1) {
+        this.downloads.push(result)
+      } else {
+        this.downloads[thisDownloadIndex] = result
+      }
     })
     this.electronService.sendIPC('add-download', newDownload)
   }
 
   onDownloadUpdated(callback: (download: Download) => void) {
-    this.downloadUpdatedEmitter.subscribe(callback)
+    this.downloadUpdatedEmitter.subscribe(_.throttle(callback, 30))
+  }
+
+  get downloadCount() {
+    return this.downloads.length
+  }
+
+  removeDownload(versionID: number) {
+    const removedDownload = this.downloads.find(download => download.versionID == versionID)
+    this.downloads = this.downloads.filter(download => download.versionID != versionID)
+    this.downloadUpdatedEmitter.emit(removedDownload)
+  }
+
+  get totalPercent() {
+    let total = 0
+    for (const download of this.downloads) {
+      total += download.percent
+    }
+    return total / this.downloads.length
   }
 }