Simplify artist view

nukeop · Sep 15, 2024 · 068590d · 068590d
1 parent c2c2fef
commit 068590d
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 34 deletions.
diff --git a/packages/app/app/components/ArtistView/index.tsx b/packages/app/app/components/ArtistView/index.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import cx from 'classnames';
 import { get, isEmpty, take } from 'lodash';
-import { Dimmer, Loader, Icon } from 'semantic-ui-react';
+import { Dimmer, Loader } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router';
 
-import AlbumList from '../AlbumList';
 import SimilarArtists from './SimilarArtists';
 import PopularTracks from './PopularTracks';
 
@@ -111,8 +110,8 @@ const ArtistView: React.FC<ArtistViewProps> = ({
           </>
         }
         {
-          (areReleasesLoading() || artist.releases?.length > 0) && 
-          <ArtistAlbums 
+          (areReleasesLoading() || artist.releases?.length > 0) &&
+          <ArtistAlbums
             albums={artist?.releases ?? []}
             onAlbumClick={onAlbumClick}
             isLoading={areReleasesLoading()}

diff --git a/packages/app/app/containers/ArtistViewContainer/ArtistViewContainer.test.tsx b/packages/app/app/containers/ArtistViewContainer/ArtistViewContainer.test.tsx
@@ -7,7 +7,6 @@ import { AnyProps, configureMockStore, setupI18Next, TestRouterProvider, TestSto
 import MainContentContainer from '../MainContentContainer';
 import { buildElectronStoreState, buildStoreState } from '../../../test/storeBuilders';
 import userEvent from '@testing-library/user-event';
-import { SearchResultsSource } from '@nuclear/core/src/plugins/plugins.types';
 
 describe('Artist view container', () => {
   beforeAll(() => {

diff --git a/...es/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap b/...es/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
@@ -199,10 +199,6 @@ exports[`Artist view container should display an artist 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        class="track_table_header_spacer"
-                        data-testid="track-table-header-spacer"
-                      />
                     </div>
                   </div>
                   <div
@@ -643,7 +639,77 @@ exports[`Artist view container should display an artist 1`] = `
           >
             <div
               class="album_cards"
-            />
+            >
+              <div
+                class="nuclear card_container"
+                data-testid="album-card"
+              >
+                <div
+                  class="card animated"
+                >
+                  <div
+                    class="thumbnail"
+                  >
+                    <div
+                      class="overlay"
+                    />
+                  </div>
+                  <div
+                    class="card_content"
+                  >
+                    <h4>
+                      First test album
+                    </h4>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="nuclear card_container"
+                data-testid="album-card"
+              >
+                <div
+                  class="card animated"
+                >
+                  <div
+                    class="thumbnail"
+                  >
+                    <div
+                      class="overlay"
+                    />
+                  </div>
+                  <div
+                    class="card_content"
+                  >
+                    <h4>
+                      Test album 2
+                    </h4>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="nuclear card_container"
+                data-testid="album-card"
+              >
+                <div
+                  class="card animated"
+                >
+                  <div
+                    class="thumbnail"
+                  >
+                    <div
+                      class="overlay"
+                    />
+                  </div>
+                  <div
+                    class="card_content"
+                  >
+                    <h4>
+                      Test album 1
+                    </h4>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/packages/app/app/containers/ArtistViewContainer/hooks.ts b/packages/app/app/containers/ArtistViewContainer/hooks.ts
@@ -1,10 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router';
-import _ from 'lodash';
+import { find, isEmpty } from 'lodash';
 
 import * as QueueActions from '../../actions/queue';
-import { artistInfoSearchByName, albumInfoSearch } from '../../actions/search';
+import { artistInfoSearchByName, albumInfoSearch, artistReleasesSearch } from '../../actions/search';
 import * as FavoritesActions from '../../actions/favorites';
 import { searchSelectors } from '../../selectors/search';
 import { favoritesSelectors } from '../../selectors/favorites';
@@ -16,7 +16,8 @@ export const useArtistViewProps = () => {
   const { artistId } = useParams<{ artistId: string }>();
   const artistDetails = useSelector(searchSelectors.artistDetails);
   const artist = artistDetails[artistId];
-
+  const source = artist?.source;
+
   const addTrackToQueue = useCallback(async (item) => {
     dispatch(QueueActions.addToQueue(item));
   }, [dispatch]);
@@ -32,7 +33,7 @@ export const useArtistViewProps = () => {
   const favoriteArtists: { id: string }[] = useSelector(favoritesSelectors.artists);
 
   const getIsFavorite = (currentArtist, favoriteArtists) => {
-    const favoriteArtist = _.find(favoriteArtists, {
+    const favoriteArtist = find(favoriteArtists, {
       id: currentArtist?.id
     });
     return Boolean(favoriteArtist);
@@ -48,6 +49,12 @@ export const useArtistViewProps = () => {
     dispatch(FavoritesActions.removeFavoriteArtist(artist));
   }, [artist, dispatch]);
 
+  useEffect(() => {
+    if (artistId !== 'loading' && isEmpty(artist.releases)) {
+      dispatch(artistReleasesSearch(artistId, source));
+    }
+  }, [artistId, source]);
+
   return {
     artist,
     isFavorite,

diff --git a/packages/app/app/containers/ArtistViewContainer/index.tsx b/packages/app/app/containers/ArtistViewContainer/index.tsx
@@ -1,27 +1,10 @@
-import React, { useEffect, useCallback } from 'react';
-import { useParams } from 'react-router';
-import { useDispatch } from 'react-redux';
+import React from 'react';
 
 import ArtistView from '../../components/ArtistView';
-import { artistReleasesSearch } from '../../actions/search';
 import { useArtistViewProps } from './hooks';
-import { SearchResultsSource } from '@nuclear/core/src/plugins/plugins.types';
 
 const ArtistViewContainer: React.FC = () => {
   const props = useArtistViewProps();
-  const { artistId } = useParams<{ artistId: string }>();
-  const source = props.artist?.source;
-  const dispatch = useDispatch();
-  const artistReleasesSearchCallback = useCallback(async (artistId: string, source: SearchResultsSource) => {
-    dispatch(artistReleasesSearch(artistId, source));
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (artistId !== 'loading') {
-      artistReleasesSearchCallback(artistId, source);
-    }
-  }, [artistId, source, artistReleasesSearchCallback]);
-
   return <ArtistView
     {...props}
   />;

diff --git a/packages/app/test/storeBuilders.ts b/packages/app/test/storeBuilders.ts
@@ -326,7 +326,8 @@ export const buildStoreState = () => {
                   default:
                     return { id: 'test-artist-id' };
                   }
-                })
+                }),
+                fetchArtistAlbums: jest.fn()
               } as any as MetaProvider,
               {
                 name: 'Another Meta Provider',