iTunes/dashboard/src/app/artist/artist.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

import { Song } from './../model/song';
import { Artist } from './../model/artist';
import { SongTableComponent } from '../song-table/song-table.component';
import { ElsArtistService } from '../els-service/els-artist.service';
import { ElsService } from '../els-service/els.service';

@Component({
  selector: 'app-artist',
  templateUrl: './artist.component.html',
  styleUrls: [ './../album/album.component.css', './../dashboard/dashboard.component.css', './artist.component.css' ]
})

export class ArtistComponent implements OnInit {
  // Interacte with table to set sortable
  @ViewChild(SongTableComponent) songtable: SongTableComponent;

  // Prevent useless data load + activate button in interface var
  moreDataAvailable = true;

  artistName = '';
  songs: Array<Song> = [];
  artist: Artist = new Artist();
  lockLoadData = false;
  countSong: number;
  toSortFilter: boolean = false; // Show only song to sort

  constructor(
    private elsService: ElsArtistService,
    private route: ActivatedRoute,
  ) { }

  ngOnInit(): void {
    this.route.params.subscribe((params: Params) => this.artistName = params['name']);
    this.route.queryParams.subscribe(params => { this.toSortFilter = params.tosort ?? false; });

    this.elsService.getArtist(this.artistName).subscribe(data => this.artist = data);

    this.elsService.getCountArtistSong(this.artistName, this.toSortFilter).subscribe(data => {
      this.countSong = data
      this.artist['Track Count'] = this.countSong;
      // TODO Async problem: some time, get updated data, some time no
      // TODO Use only this value?
      // TODO ==> Show each time if there are unsorted songs
    });

    this.loadSongs();
  }

  // TODO Duplicate code!
  loadSongs(): void {
    if (this.lockLoadData) {
      console.log('Loading data locked');
      return;
    }

    if (!this.moreDataAvailable) {
      return;
    }

    this.lockLoadData = true;
    this.elsService.getArtistSongs(this.artistName, this.songs.length, this.toSortFilter).subscribe(
      data => {
        this.moreDataAvailable = data.length === ElsService.DEFAULT_SIZE;
        console.log(data.length)
        console.log(this.moreDataAvailable)

        // Erase song array with result for first load, then add elements one by one
        // instead use concat => concat will sort table at each load, very consuming! and not user friendly
        if (this.songs.length === 0) {
          this.songs = data;
        } else {
          this.songtable.setSortable(true);
          data.forEach(song => {
            this.songs.push(song);
          });
        }
        console.log('Unlock load data');
        this.lockLoadData = false;
      }
    );
  }
}