Replace AlbumGrid with ArtistAlbums

nukeop · Aug 12, 2024 · ad22ab1 · ad22ab1
1 parent d19a709
commit ad22ab1
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 33 deletions.
diff --git a/packages/app/app/components/ArtistView/index.tsx b/packages/app/app/components/ArtistView/index.tsx
@@ -14,6 +14,7 @@ import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { ArtistDetailsState } from '../../reducers/search';
 import { SearchResultsAlbum } from '@nuclear/core/src/plugins/plugins.types';
 import { ArtistHeader } from './ArtistHeader';
+import { ArtistAlbums } from '@nuclear/ui';
 
 type ReleaseTypeProps = 'master' | 'release'
 
@@ -37,10 +38,13 @@ const ArtistView: React.FC<ArtistViewProps> = ({
   addFavoriteArtist
 }) => {
   const history = useHistory();
-
+  const { t } = useTranslation('artist');
   const isLoading = () => artist.loading || false;
-
   const isOnTour = () => artist.onTour || false;
+  const onAlbumClick = (album) => {
+    albumInfoSearch(album.id, album.type, album);
+    history.push('/album/' + album.id);
+  };
 
   return (
     <div className={styles.artist_view_container}>
@@ -105,13 +109,19 @@ const ArtistView: React.FC<ArtistViewProps> = ({
             <hr />
           </>
         }
-        <AlbumList
-          albums={get(artist, 'releases', []).sort((a, b) => {
-            return b.year - a.year;
-          })}
-          albumInfoSearch={albumInfoSearch}
-          history={history}
-          loading={isLoading()}
+        <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
         />
       </Dimmer.Dimmable>
     </div>

diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
@@ -47,7 +47,14 @@
     "similar": "Similar artists",
     "title": "Title",
     "tour": "On tour",
-    "popular-tracks": "Popular tracks"
+    "popular-tracks": "Popular tracks",
+    "artist-albums": {
+      "header": "Albums",
+      "sort-by-release-date": "Sort by release date",
+      "sort-by-az": "Sort by A-Z",
+      "sort-by-most-played": "Sort by most played",
+      "filter-placeholder": "Filter..."
+    }
   },
   "dashboard": {
     "add-all": "Add all",

diff --git a/packages/ui/lib/components/ArtistAlbums/index.tsx b/packages/ui/lib/components/ArtistAlbums/index.tsx
@@ -83,31 +83,33 @@ export const ArtistAlbums: React.FC<ArtistAlbumsProps> = ({
 
   return (
     <div className={styles.artist_albums}>
-      <div className={styles.artist_albums_toolbar}>
-        <h3>{strings.header}</h3>
-        <hr />
-
-        <Dropdown
-          className={styles.artist_albums_sort_dropdown} 
-          selection
-          variant='lighter'
-          options={sortOptions}
-          value={sortBy}
-          onChange={(e, { value }) => setSortBy(value as SortBy)}
-        />
-        <div className={styles.artist_albums_filter}>
-          <FormInput 
-            className={styles.artist_albums_filter_input} 
-            placeholder={strings.filterPlaceholder}
-            onChange={setFilter}
-          />
-          <Button 
-            className={styles.artist_albums_filter_button}
-            color='blue'
-            icon='filter'
+      {
+        !isLoading &&
+        <div className={styles.artist_albums_toolbar}>
+          <h3>{strings.header}</h3>
+          <hr />
+          <Dropdown
+            className={styles.artist_albums_sort_dropdown} 
+            selection
+            variant='lighter'
+            options={sortOptions}
+            value={sortBy}
+            onChange={(e, { value }) => setSortBy(value as SortBy)}
           />
+          <div className={styles.artist_albums_filter}>
+            <FormInput 
+              className={styles.artist_albums_filter_input} 
+              placeholder={strings.filterPlaceholder}
+              onChange={setFilter}
+            />
+            <Button 
+              className={styles.artist_albums_filter_button}
+              color='blue'
+              icon='filter'
+            />
+          </div>
         </div>
-      </div>
+      }
 
       <AlbumGrid
         albums={sortedAlbums}