Various refactoring

src/app/app-routing.module.ts

@@ -1,19 +1,23 @@
 import { NgModule } from '@angular/core'
-import { Routes, RouterModule } from '@angular/router'
+import { Routes, RouterModule, RouteReuseStrategy } from '@angular/router'
 import { BrowseComponent } from './components/browse/browse.component'
 import { SettingsComponent } from './components/settings/settings.component'
+import { TabPersistStrategy } from './core/tab-persist.strategy'
 
-
+// TODO: replace these with the correct components
 const routes: Routes = [
-  { path: 'browse', component: BrowseComponent },
-  { path: 'library', component: BrowseComponent },
-  { path: 'settings', component: SettingsComponent },
-  { path: 'about', component: BrowseComponent }, // TODO: replace these with the correct components
-  { path: '**', redirectTo: '/browse'}
+  { path: 'browse', component: BrowseComponent, data: { shouldReuse: true } },
+  { path: 'library', redirectTo: '/browse' },
+  { path: 'settings', component: SettingsComponent, data: { shouldReuse: true } },
+  { path: 'about', redirectTo: '/browse' },
+  { path: '**', redirectTo: '/browse' }
 ]
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: TabPersistStrategy },
+  ]
 })
 export class AppRoutingModule { }

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component } from '@angular/core'
 import { SettingsService } from './core/services/settings.service'
 
 @Component({
@@ -6,12 +6,7 @@ import { SettingsService } from './core/services/settings.service'
   templateUrl: './app.component.html',
   styles: []
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
 
   constructor(private settingsService: SettingsService) { }
-
-  ngOnInit() {
-    // Load settings
-    this.settingsService.getSettings()
-  }
 }

src/app/app.module.ts

@@ -4,15 +4,15 @@ import { NgModule } from '@angular/core'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { ToolbarComponent } from './components/toolbar/toolbar.component'
-import { BrowseComponent } from './components/browse/browse.component';
-import { SearchBarComponent } from './components/browse/search-bar/search-bar.component';
-import { StatusBarComponent } from './components/browse/status-bar/status-bar.component';
-import { ResultTableComponent } from './components/browse/result-table/result-table.component';
-import { ChartSidebarComponent } from './components/browse/chart-sidebar/chart-sidebar.component';
-import { ResultTableRowComponent } from './components/browse/result-table/result-table-row/result-table-row.component';
-import { DownloadsModalComponent } from './components/browse/status-bar/downloads-modal/downloads-modal.component';
-import { ProgressBarDirective } from './core/directives/progress-bar.directive';
-import { CheckboxDirective } from './core/directives/checkbox.directive';
+import { BrowseComponent } from './components/browse/browse.component'
+import { SearchBarComponent } from './components/browse/search-bar/search-bar.component'
+import { StatusBarComponent } from './components/browse/status-bar/status-bar.component'
+import { ResultTableComponent } from './components/browse/result-table/result-table.component'
+import { ChartSidebarComponent } from './components/browse/chart-sidebar/chart-sidebar.component'
+import { ResultTableRowComponent } from './components/browse/result-table/result-table-row/result-table-row.component'
+import { DownloadsModalComponent } from './components/browse/status-bar/downloads-modal/downloads-modal.component'
+import { ProgressBarDirective } from './core/directives/progress-bar.directive'
+import { CheckboxDirective } from './core/directives/checkbox.directive'
 import { SettingsComponent } from './components/settings/settings.component'
 
 @NgModule({
@@ -34,7 +34,6 @@ import { SettingsComponent } from './components/settings/settings.component'
     BrowserModule,
     AppRoutingModule
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -20,7 +20,7 @@ export class BrowseComponent {
   onResultsUpdated(results: SongResult[]) {
     this.resultTable.results = results
     this.resultTable.onNewSearch()
-    this.resultTable.checkAll
+    this.resultTable.checkAll(false)
     this.chartSidebar.selectedVersion = undefined
     this.statusBar.resultCount = results.length
     this.statusBar.selectedResults = []

src/app/components/browse/chart-sidebar/chart-sidebar.component.ts

@@ -80,7 +80,9 @@ export class ChartSidebarComponent {
       return 'Unknown'
     }
     let seconds = Math.round(this.selectedVersion.song_length / 1000)
-    if (seconds < 60) { return `${seconds} second${seconds == 1 ? '' : 's'}` }
+    if (seconds < 60) {
+      return `${seconds} second${seconds == 1 ? '' : 's'}`
+    }
     let minutes = Math.floor(seconds / 60)
     let hours = 0
     while (minutes > 59) {
@@ -123,11 +125,11 @@ export class ChartSidebarComponent {
   onDownloadClicked() {
     this.downloadService.addDownload(
       this.selectedVersion.versionID, {
-      avTagName: this.selectedVersion.avTagName,
-      artist: this.songResult.artist,
-      charter: this.selectedVersion.charters,
-      links: JSON.parse(this.selectedVersion.downloadLink)
-    })
+        avTagName: this.selectedVersion.avTagName,
+        artist: this.songResult.artist,
+        charter: this.selectedVersion.charters,
+        links: JSON.parse(this.selectedVersion.downloadLink)
+      })
   }
 
   getVersions() {

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

@@ -6,18 +6,18 @@
       <i class="search icon"></i>
     </div>
   </div>
-    <div #typeDropdown class="ui item dropdown">
-      Type <i class="dropdown icon"></i>
-      <div class="menu">
-        <!-- TODO: revise what items are displayed -->
-        <a class="item">Any</a>
-        <a class="item">Name</a>
-        <a class="item">Artist</a>
-        <a class="item">Album</a>
-        <a class="item">Genre</a>
-        <a class="item">Year</a>
-        <a class="item">Charter</a>
-      </div>
+  <div #typeDropdown class="ui item dropdown">
+    Type <i class="dropdown icon"></i>
+    <div class="menu">
+      <!-- TODO: revise what items are displayed -->
+      <a class="item">Any</a>
+      <a class="item">Name</a>
+      <a class="item">Artist</a>
+      <a class="item">Album</a>
+      <a class="item">Genre</a>
+      <a class="item">Year</a>
+      <a class="item">Charter</a>
+    </div>
   </div>
   <!-- <div class="item right">
     <button class="ui positive disabled button">Bulk Download</button>

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

@@ -44,7 +44,7 @@ export class DownloadsModalComponent {
   }
 
   getBackgroundColor(download: DownloadProgress) {
-    switch(download.type) {
+    switch (download.type) {
       case 'good': return 'unset'
       case 'done': return 'unset'
       case 'warning': return 'yellow'

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

@@ -60,15 +60,15 @@ export class StatusBarComponent {
         const downloadSong = this.selectedResults.find(song => song.id == downloadVersion.songID)
         this.downloadService.addDownload(
           downloadVersion.versionID, {
-          avTagName: downloadVersion.avTagName,
-          artist: downloadSong.artist,
-          charter: downloadVersion.charters,
-          links: JSON.parse(downloadVersion.downloadLink)
-        })
+            avTagName: downloadVersion.avTagName,
+            artist: downloadSong.artist,
+            charter: downloadVersion.charters,
+            links: JSON.parse(downloadVersion.downloadLink)
+          })
       }
     } else {
       $('#selectedModal').modal('show')
-      //[download all charts for each song] [deselect these songs] [X]
+      // [download all charts for each song] [deselect these songs] [X]
     }
   }
 
@@ -78,11 +78,11 @@ export class StatusBarComponent {
       const downloadSong = this.selectedResults.find(song => song.id == version.songID)
       this.downloadService.addDownload(
         version.versionID, {
-        avTagName: version.avTagName,
-        artist: downloadSong.artist,
-        charter: version.charters,
-        links: JSON.parse(version.downloadLink)
-      })
+          avTagName: version.avTagName,
+          artist: downloadSong.artist,
+          charter: version.charters,
+          links: JSON.parse(version.downloadLink)
+        })
     }
   }
 

src/app/components/settings/settings.component.ts

@@ -26,7 +26,7 @@ export class SettingsComponent implements OnInit, AfterViewInit {
       }
     })
   }
-  
+
   async clearCache() {
     this.cacheSize = 'Please wait...'
     await this.settingsService.clearCache()
@@ -46,7 +46,7 @@ export class SettingsComponent implements OnInit, AfterViewInit {
     }
   }
 
-  async openLibraryDirectory() {
+  openLibraryDirectory() {
     this.electronService.openFolder(this.settingsService.libraryDirectory)
   }
 

src/app/core/directives/checkbox.directive.ts

@@ -19,7 +19,7 @@ export class CheckboxDirective implements AfterViewInit {
     })
   }
 
-  async check(isChecked: boolean) {
+  check(isChecked: boolean) {
     if (isChecked) {
       $(this.checkbox.nativeElement).checkbox('check')
     } else {

src/app/core/directives/progress-bar.directive.ts

@@ -17,4 +17,4 @@ export class ProgressBarDirective {
     this.progress = _.throttle((percent: number) => $progressBar.progress({ percent }), 100)
     this.percent = 0
   }
-}
+}

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

@@ -26,19 +26,20 @@ export class DownloadService {
   }
 
   addDownload(versionID: number, newDownload: NewDownload) {
-    if (this.downloads.findIndex(download => download.versionID == versionID) != -1) { return } // Don't download something twice
-    this.electronService.receiveIPC('download-updated', result => {
-      this.downloadUpdatedEmitter.emit(result)
+    if (this.downloads.findIndex(download => download.versionID == versionID) == -1) { // Don't download something twice
+      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('download', { action: 'add', versionID, data: newDownload })
+        // 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('download', { action: 'add', versionID, data: newDownload })
+    }
   }
 
   onDownloadUpdated(callback: (download: DownloadProgress) => void) {

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

@@ -11,21 +11,25 @@ export class SettingsService {
   private settings: Settings
   private currentThemeLink: HTMLLinkElement
 
-  constructor(private electronService: ElectronService) { }
+  constructor(private electronService: ElectronService) {
+    this.getSettings() // Should resolve immediately because GetSettingsHandler returns a value, not a promise
+    console.log(`QUICKLY RESOLVED SETTINGS: ${this.settings}`)
+  }
 
   async getSettings() {
     if (this.settings == undefined) {
-      this.settings = await this.electronService.invoke('init-settings', undefined)
+      this.settings = await this.electronService.invoke('get-settings', undefined)
     }
     return this.settings
   }
 
   saveSettings() {
     if (this.settings != undefined) {
-      this.electronService.sendIPC('update-settings', this.settings)
+      this.electronService.sendIPC('set-settings', this.settings)
     }
   }
 
+  // TODO: research how to make theme changes with fomantic UI
   changeTheme(theme: string) {
     if (this.currentThemeLink != undefined) this.currentThemeLink.remove()
     if (theme == 'Default') { return }
@@ -40,12 +44,14 @@ export class SettingsService {
   async getCacheSize() {
     return this.electronService.defaultSession.getCacheSize()
   }
-  
+
   async clearCache() {
     this.saveSettings()
     return this.electronService.defaultSession.clearCache()
   }
 
+  // Individual getters/setters
+  // TODO: remove the undefined checks if the constructor gets the settings every time
   get libraryDirectory() {
     return this.settings == undefined ? '' : this.settings.libraryPath
   }

src/app/core/tab-persist.strategy.ts

@@ -0,0 +1,27 @@
+import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router'
+
+/**
+ * This makes each route with the 'reuse' data flag persist when not in focus.
+ */
+export class TabPersistStrategy extends RouteReuseStrategy {
+  private handles: { [path: string]: DetachedRouteHandle } = {}
+
+  shouldDetach(route: ActivatedRouteSnapshot) {
+    return route.data.shouldReuse || false
+  }
+  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle) {
+    if (route.data.shouldReuse) {
+      this.handles[route.routeConfig.path] = handle
+    }
+  }
+  shouldAttach(route: ActivatedRouteSnapshot) {
+    return !!route.routeConfig && !!this.handles[route.routeConfig.path]
+  }
+  retrieve(route: ActivatedRouteSnapshot) {
+    if (!route.routeConfig) return null
+    return this.handles[route.routeConfig.path]
+  }
+  shouldReuseRoute(future: ActivatedRouteSnapshot, _curr: ActivatedRouteSnapshot) {
+    return future.data.shouldReuse || false
+  }
+}