Fix to nukeop#192 : added ability to click on album name in dashboard…

… to open the album view If the album is not found, we open the artist view.
puzansakya · Feb 8, 2019 · 9e9a8fc · 9e9a8fc
1 parent a2360d2
commit 9e9a8fc
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 53 deletions.
diff --git a/app/actions/index.js b/app/actions/index.js
@@ -309,10 +309,18 @@ export function albumInfoSearchByName (albumName, history) {
       .then(searchResults => searchResults.json())
       .then(searchResultsJson => {
         let album = searchResultsJson.results[0];
-        dispatch(albumInfoSearch(album.id, album.type));
-        if (history) {
-          history.push('/album/' + album.id);
+        if (album.type == 'artist') {
+          dispatch(lastFmArtistInfoSearch(album.title, album.id));
+          if (history) {
+            history.push('/artist/' + album.id);
+          }
+        } else {
+          dispatch(albumInfoSearch(album.id, album.type));
+          if (history) {
+            history.push('/album/' + album.id);
+          }
         }
+
       })
       .catch(error => {
         logger.error(error);

diff --git a/app/components/Dashboard/BestNewMusicTab/BestNewList/BestNewListActiveItem/index.js b/app/components/Dashboard/BestNewMusicTab/BestNewList/BestNewListActiveItem/index.js
@@ -7,57 +7,75 @@ class BestNewListActiveItem extends React.Component {
     super(props);
   }
 
-  render() {
-    let { item, artistInfoSearchByName, history } = this.props;
+  renderThumbnail (item) {
+    return (<div className={styles.thumbnail_box}>
+      <div
+        className={styles.item_thumbnail}
+        style={{
+          backgroundImage: `url(${item.thumbnail})`
+        }}
+      />
+    </div>);
+  }
+
+  renderArtistTitleBox (item) {
+    return (<div className={styles.artist_title_box}>
+      <div className={styles.title}>
+        {this.props.albumInfoSearchByName ? <a
+          onClick={() => this.props.albumInfoSearchByName(item.title + ' ' + item.artist, this.props.history)}
+          href='#'
+        >
+          {item.title}
+        </a> : item.title}
+      </div>
+      <div className={styles.artist}>
+        by{' '}
+        <a
+          onClick={() => this.props.artistInfoSearchByName(item.artist, this.props.history)}
+          href='#'
+        >
+          {item.artist}
+        </a>
+      </div>
+    </div>);
+  }
+
+  renderReview (item) {
+    return (<div className={styles.review}>
+      {item.abstract ? (
+        <div className={styles.abstract}>{item.abstract}</div>
+      ) : null}
+      <div className={styles.review_content}>
+        {item.review.split('\n').map(i => {
+          return (
+
+            <div key={'item-' + i} className={styles.paragraph}>
+              {i}
+            </div>
+          );
+        })}
+      </div>
+    </div>);
+  }
+  render () {
+    let { item } = this.props;
 
     if (!item) {
       return null;
     }
 
     return (
       <div className={styles.best_new_active_item}>
-        <div className={styles.thumbnail_box}>
-          <div
-            className={styles.item_thumbnail}
-            style={{
-              backgroundImage: `url(${item.thumbnail})`
-            }}
-          />
-        </div>
+        {this.renderThumbnail(item)}
         <div className={styles.review_box}>
           <div className={styles.header_row}>
             {item.score ? (
               <div className={styles.score}>{item.score}</div>
             ) : null}
-
-            <div className={styles.artist_title_box}>
-              <div className={styles.title}>{item.title}</div>
-              <div className={styles.artist}>
-                by{' '}
-                <a
-                  onClick={() => artistInfoSearchByName(item.artist, history)}
-                  href='#'
-                >
-                  {item.artist}
-                </a>
-              </div>
-            </div>
-          </div>
-          <div className={styles.review}>
-            {item.abstract ? (
-              <div className={styles.abstract}>{item.abstract}</div>
-            ) : null}
-            <div className={styles.review_content}>
-              {item.review.split('\n').map(i => {
-                return (
-
-                  <div key={'item-' + i} className={styles.paragraph}>
-                    {i}
-                  </div>
-                );
-              })}
-            </div>
+            {this.renderArtistTitleBox(item)}
           </div>
+          <div />
+          {this.renderReview(item)}
         </div>
       </div>
     );

diff --git a/app/components/Dashboard/BestNewMusicTab/BestNewList/index.js b/app/components/Dashboard/BestNewMusicTab/BestNewList/index.js
@@ -12,10 +12,11 @@ class BestNewList extends React.Component {
     };
   }
 
-  render() {
+  render () {
     let {
       data,
       artistInfoSearchByName,
+      albumInfoSearchByName,
       history
     } = this.props;
 
@@ -26,6 +27,7 @@ class BestNewList extends React.Component {
           <BestNewListActiveItem
             item={data[this.state.activeItem]}
             artistInfoSearchByName={artistInfoSearchByName}
+            albumInfoSearchByName={albumInfoSearchByName}
             history={history}
           />
         </div>

diff --git a/app/components/Dashboard/BestNewMusicTab/index.js b/app/components/Dashboard/BestNewMusicTab/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Dimmer, Loader, Tab} from 'semantic-ui-react';
+import { Tab } from 'semantic-ui-react';
 
 import BestNewList from './BestNewList';
 import styles from './styles.scss';
@@ -9,15 +9,16 @@ class BestNewMusicTab extends React.Component {
     super(props);
   }
 
-  isLoading() {
+  isLoading () {
     return this.props.dashboardData.bestNewAlbums.length < 1 || this.props.dashboardData.bestNewTracks.length < 1;
   }
 
-  render() {
+  render () {
     let {
       dashboardData,
       artistInfoSearchByName,
-      history
+      history,
+      albumInfoSearchByName
     } = this.props;
     return (
       <Tab.Pane loading={this.isLoading()} attached={false} className={styles.best_new_music_tab_pane}>
@@ -29,6 +30,7 @@ class BestNewMusicTab extends React.Component {
             <BestNewList
               data={dashboardData.bestNewAlbums}
               artistInfoSearchByName={artistInfoSearchByName}
+              albumInfoSearchByName={albumInfoSearchByName}
               history={history}
             />
           </div>

diff --git a/app/components/Dashboard/index.js b/app/components/Dashboard/index.js
@@ -7,14 +7,15 @@ import GenresTab from './GenresTab';
 import NewsTab from './NewsTab';
 
 class Dashboard extends React.Component {
-  panes() {
+  panes () {
     return [
       {
         menuItem: 'Best new music',
         render: () => (
           <BestNewMusicTab
             dashboardData={this.props.dashboardData}
             artistInfoSearchByName={this.props.artistInfoSearchByName}
+            albumInfoSearchByName={this.props.albumInfoSearchByName}
             history={this.props.history}
           />
         )
@@ -54,15 +55,15 @@ class Dashboard extends React.Component {
     ];
   }
 
-  componentDidMount() {
+  componentDidMount () {
     this.props.loadBestNewTracks();
     this.props.loadBestNewAlbums();
     this.props.loadNuclearNews();
     this.props.loadTopTags();
     this.props.loadTopTracks();
   }
 
-  render() {
+  render () {
     return (
       <div>
         <Tab menu={{ secondary: true, pointing: true }} panes={this.panes()} />

diff --git a/app/containers/DashboardContainer/index.js b/app/containers/DashboardContainer/index.js
@@ -10,12 +10,13 @@ import * as PlayerActions from '../../actions/player';
 import Dashboard from '../../components/Dashboard';
 
 class DashboardContainer extends React.Component {
-  render() {
-    let { actions, dashboard, history, musicSources } = this.props;
+  render () {
+    let { actions, dashboard, history } = this.props;
 
     return (
       <Dashboard
         albumInfoSearch={actions.albumInfoSearch}
+        albumInfoSearchByName={actions.albumInfoSearchByName}
         artistInfoSearchByName={actions.artistInfoSearchByName}
         loadBestNewAlbums={actions.loadBestNewAlbums}
         loadBestNewTracks={actions.loadBestNewTracks}
@@ -34,14 +35,14 @@ class DashboardContainer extends React.Component {
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps (state) {
   return {
     dashboard: state.dashboard,
     musicSources: state.plugin.plugins.musicSources
   };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps (dispatch) {
   return {
     actions: bindActionCreators(
       Object.assign({}, Actions, DashboardActions, QueueActions, PlayerActions),