From bae0c934ba433403f666132d7237d07444857726 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Wed, 11 Sep 2024 02:14:32 +0200
Subject: [PATCH] Fixes for the  artist page and spotify metadata downloader

---
 .../ArtistView/PopularTracks/index.tsx        | 10 +++---
 .../app/app/components/ArtistView/index.tsx   | 32 +++++++++++--------
 .../components/FavoriteTracksView/styles.scss |  1 +
 packages/app/app/reducers/search.ts           |  9 ++++--
 packages/core/src/rest/Spotify.ts             |  2 +-
 .../ui/lib/components/AlbumGrid/styles.scss   |  4 +++
 .../lib/components/GridTrackTable/index.tsx   |  1 -
 7 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/packages/app/app/components/ArtistView/PopularTracks/index.tsx b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
index 0d1fe8fa8b..f7fda12676 100644
--- a/packages/app/app/components/ArtistView/PopularTracks/index.tsx
+++ b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
@@ -19,6 +19,8 @@ type AddAllButtonProps = {
   t: TFunction;
 }
 
+const MAX_POPULAR_TRACKS_DISPLAYED = 15;
+
 export const AddAllButton: React.FC<AddAllButtonProps> = ({
   handleAddAll,
   t
@@ -57,7 +59,7 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
   const toggleExpand = () => setExpanded(!expanded);
   const handleAddAll = () => {
     tracks
-      .slice(0, tracks.length > 15 ? 15 : tracks.length)
+      .slice(0, Math.min(tracks.length, MAX_POPULAR_TRACKS_DISPLAYED))
       .forEach(track => {
         addToQueue({
           artist: artist.name,
@@ -85,15 +87,15 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
           handleAddAll={handleAddAll}
           t={t}
         />
-        <div 
+        <div
           className={styles.popular_tracks_table_container}
-          style={{ height: expanded ? `calc(48px + (${tracks.length}*42px))` : undefined }}
+          style={{ height: expanded ? `calc(48px + (${Math.min(tracks.length, MAX_POPULAR_TRACKS_DISPLAYED)}*42px))` : undefined }}
         >
           <TrackTableContainer
             tracks={
               _(tracks)
                 .sortBy('playcount')
-                .takeRight(expanded ? 15 : 5)
+                .takeRight(expanded ? MAX_POPULAR_TRACKS_DISPLAYED : 5)
                 .value()
             }
             displayDeleteButton={false}
diff --git a/packages/app/app/components/ArtistView/index.tsx b/packages/app/app/components/ArtistView/index.tsx
index fdec6d0a74..ae4a2125a0 100644
--- a/packages/app/app/components/ArtistView/index.tsx
+++ b/packages/app/app/components/ArtistView/index.tsx
@@ -41,6 +41,7 @@ const ArtistView: React.FC<ArtistViewProps> = ({
   const { t } = useTranslation('artist');
   const isLoading = () => artist.loading || false;
   const isOnTour = () => artist.onTour || false;
+  const areReleasesLoading = () => artist.releasesLoading || isLoading();
   const onAlbumClick = (album) => {
     albumInfoSearch(album.id, album.type, album);
     history.push('/album/' + album.id);
@@ -109,20 +110,23 @@ const ArtistView: React.FC<ArtistViewProps> = ({
             <hr />
           </>
         }
-        <ArtistAlbums 
-          albums={artist?.releases ?? []}
-          onAlbumClick={onAlbumClick}
-          isLoading={isLoading()}
-          strings={{
-            header: t('artist-albums.header'),
-            sortByReleaseDate: t('artist-albums.sort-by-release-date'),
-            sortByAZ: t('artist-albums.sort-by-az'),
-            sortByMostPlayed: t('artist-albums.sort-by-most-played'),
-            filterPlaceholder: t('artist-albums.filter-placeholder')
-          }}
-          withSortByAZ
-          withSortByReleaseDate
-        />
+        {
+          (areReleasesLoading() || artist.releases?.length > 0) && 
+          <ArtistAlbums 
+            albums={artist?.releases ?? []}
+            onAlbumClick={onAlbumClick}
+            isLoading={areReleasesLoading()}
+            strings={{
+              header: t('artist-albums.header'),
+              sortByReleaseDate: t('artist-albums.sort-by-release-date'),
+              sortByAZ: t('artist-albums.sort-by-az'),
+              sortByMostPlayed: t('artist-albums.sort-by-most-played'),
+              filterPlaceholder: t('artist-albums.filter-placeholder')
+            }}
+            withSortByAZ
+            withSortByReleaseDate
+          />
+        }
       </Dimmer.Dimmable>
     </div>
   );
diff --git a/packages/app/app/components/FavoriteTracksView/styles.scss b/packages/app/app/components/FavoriteTracksView/styles.scss
index 87857c5aa9..fe0e622fe3 100644
--- a/packages/app/app/components/FavoriteTracksView/styles.scss
+++ b/packages/app/app/components/FavoriteTracksView/styles.scss
@@ -17,6 +17,7 @@
   .header_container {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 
   .tracks_container {
diff --git a/packages/app/app/reducers/search.ts b/packages/app/app/reducers/search.ts
index c63289f258..92e7e78cdf 100644
--- a/packages/app/app/reducers/search.ts
+++ b/packages/app/app/reducers/search.ts
@@ -5,8 +5,13 @@ import { YoutubeResult } from '@nuclear/core/src/rest/Youtube';
 import { ActionType, getType } from 'typesafe-actions';
 import { SearchActions } from '../actions/search';
 
-export type ArtistDetailsState = Partial<ArtistDetails> & {loading?: boolean, error?: boolean, releases?: SearchResultsAlbum[],
-  releasesLoading?: boolean, releasesError?: boolean}
+export type ArtistDetailsState = Partial<ArtistDetails> & {
+  loading?: boolean, 
+  error?: boolean, 
+  releases?: SearchResultsAlbum[],
+  releasesLoading?: boolean, 
+  releasesError?: boolean
+}
 
 export type AlbumDetailsState = Partial<AlbumDetails> & {loading?: boolean, error?: boolean}
 
diff --git a/packages/core/src/rest/Spotify.ts b/packages/core/src/rest/Spotify.ts
index 172fed0f50..6d3c1a448f 100644
--- a/packages/core/src/rest/Spotify.ts
+++ b/packages/core/src/rest/Spotify.ts
@@ -184,7 +184,7 @@ class SpotifyClient {
     let data: SpotifyPaginatedResponse<SpotifySimplifiedAlbum> = await this.get(`${SPOTIFY_API_URL}/artists/${id}/albums?include_groups=album`);
     albums = data.items;
 
-    while (data.next) {
+    while (data.next && data.items?.length >= data.limit) {
       const nextData: SpotifyPaginatedResponse<SpotifySimplifiedAlbum> = await this.get(data.next);
       albums = [...albums, ...nextData.items];
       data = nextData;
diff --git a/packages/ui/lib/components/AlbumGrid/styles.scss b/packages/ui/lib/components/AlbumGrid/styles.scss
index efff4ac862..fdf1f1def6 100644
--- a/packages/ui/lib/components/AlbumGrid/styles.scss
+++ b/packages/ui/lib/components/AlbumGrid/styles.scss
@@ -37,4 +37,8 @@
     overflow-y: auto;
     overflow-x: hidden;
   }
+
+  .visible.dimmer {
+    padding: 8em 0;
+  }
 }
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index 442156a26c..160296f1a2 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -230,7 +230,6 @@ export const GridTrackTable = <T extends Track>({
                   {column.render('Header', extraProps)}
                 </div>))
             }
-            <div data-testid='track-table-header-spacer' className={styles.track_table_header_spacer} />
           </div>
         ))}
       </div>