Updating featured and mood views; Controls to forceRefetch, fixing #526

2020-09-07 21:04:28 +12:00
parent 60326d9de6
commit 9b3c0bcefe
19 changed files with 752 additions and 553 deletions
--- a/src/js/views/library/LibraryAlbums.js
+++ b/src/js/views/library/LibraryAlbums.js
@ -14,11 +14,9 @@ import * as uiActions from '../../services/ui/actions';
 import * as mopidyActions from '../../services/mopidy/actions';
 import * as googleActions from '../../services/google/actions';
 import * as spotifyActions from '../../services/spotify/actions';
-import {
-  uriSource,
-} from '../../util/helpers';
 import { sortItems, applyFilter } from '../../util/arrays';
-import { collateLibrary, collate } from '../../util/format';
+import { collate } from '../../util/format';
+import Button from '../../components/Button';
 import { i18n, I18n } from '../../locale';

 class LibraryAlbums extends React.Component {
@ -65,7 +63,16 @@ class LibraryAlbums extends React.Component {
    }
  }

-  getMopidyLibrary = () => {
+  onRefresh = () => {
+    const { uiActions: { hideContextMenu } } = this.props;
+
+    hideContextMenu();
+    this.getMopidyLibrary(true);
+    this.getGoogleLibrary(true);
+    this.getSpotifyLibrary(true);
+  }
+
+  getMopidyLibrary = (forceRefresh = false) => {
    const {
      source,
      coreActions: {
@ -75,10 +82,10 @@ class LibraryAlbums extends React.Component {

    if (source !== 'local' && source !== 'all') return;

-    loadLibrary('mopidy:library:albums');
+    loadLibrary('mopidy:library:albums', forceRefresh);
  };

-  getGoogleLibrary = () => {
+  getGoogleLibrary = (forceRefresh = false) => {
    const {
      source,
      google_available,
@ -90,10 +97,10 @@ class LibraryAlbums extends React.Component {
    if (!google_available) return;
    if (source !== 'google' && source !== 'all') return;

-    loadLibrary('google:library:albums');
+    loadLibrary('google:library:albums', forceRefresh);
  };

-  getSpotifyLibrary = () => {
+  getSpotifyLibrary = (forceRefresh = false) => {
    const {
      source,
      spotify_available,
@ -105,7 +112,7 @@ class LibraryAlbums extends React.Component {
    if (!spotify_available) return;
    if (source !== 'spotify' && source !== 'all') return;

-    loadLibrary('spotify:library:albums');
+    loadLibrary('spotify:library:albums', forceRefresh);
  };

  handleContextMenu = (e, item) => {
@ -235,6 +242,7 @@ class LibraryAlbums extends React.Component {
      view,
      source,
      sort_reverse,
+      uiActions,
    } = this.props;
    const {
      filter,
@ -309,7 +317,7 @@ class LibraryAlbums extends React.Component {
        <FilterField
          initialValue={filter}
          handleChange={(value) => this.setState({ filter: value, limit: per_page })}
-          onSubmit={e => this.props.uiActions.hideContextMenu()}
+          onSubmit={() => uiActions.hideContextMenu()}
        />
        <DropdownField
          icon="swap_vert"
@ -318,7 +326,7 @@ class LibraryAlbums extends React.Component {
          valueAsLabel
          options={sort_options}
          selected_icon={sort ? (sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
-          handleChange={(val) => { this.setSort(val); this.props.uiActions.hideContextMenu(); }}
+          handleChange={(val) => { this.setSort(val); uiActions.hideContextMenu(); }}
        />
        <DropdownField
          icon="visibility"
@ -326,7 +334,7 @@ class LibraryAlbums extends React.Component {
          value={view}
          valueAsLabel
          options={view_options}
-          handleChange={(val) => { this.props.uiActions.set({ library_albums_view: val }); this.props.uiActions.hideContextMenu(); }}
+          handleChange={(val) => { uiActions.set({ library_albums_view: val }); uiActions.hideContextMenu(); }}
        />
        <DropdownField
          icon="cloud"
@ -334,14 +342,22 @@ class LibraryAlbums extends React.Component {
          value={source}
          valueAsLabel
          options={source_options}
-          handleChange={(val) => { this.props.uiActions.set({ library_albums_source: val }); this.props.uiActions.hideContextMenu(); }}
+          handleChange={(val) => { uiActions.set({ library_albums_source: val }); uiActions.hideContextMenu(); }}
        />
+        <Button
+          noHover
+          onClick={this.onRefresh}
+          tracking={{ category: 'LibraryAlbums', action: 'Refresh' }}
+        >
+          <Icon name="refresh" />
+          <I18n path="actions.refresh" />
+        </Button>
      </div>
    );

    return (
      <div className="view library-albums-view">
-        <Header options={options} uiActions={this.props.uiActions}>
+        <Header options={options} uiActions={uiActions}>
          <Icon name="album" type="material" />
          <I18n path="library.albums.title" />
        </Header>
--- a/src/js/views/library/LibraryArtists.js
+++ b/src/js/views/library/LibraryArtists.js
@ -17,6 +17,7 @@ import {
 import { sortItems, applyFilter } from '../../util/arrays';
 import { I18n, i18n } from '../../locale';
 import { collate, collateLibrary } from '../../util/format';
+import Button from '../../components/Button';

 class LibraryArtists extends React.Component {
  constructor(props) {
@ -61,7 +62,36 @@ class LibraryArtists extends React.Component {
    }
  }

-  getMopidyLibrary = () => {
+  onRefresh = () => {
+    const { uiActions: { hideContextMenu } } = this.props;
+
+    hideContextMenu();
+    this.getMopidyLibrary(true);
+    this.getGoogleLibrary(true);
+    this.getSpotifyLibrary(true);
+  }
+
+  setSort = (value) => {
+    const { sort, sort_reverse, uiActions: { set } } = this.props;
+    let reverse = false;
+    if (sort === value) reverse = !sort_reverse;
+    set({
+      library_artists_sort_reverse: reverse,
+      library_artists_sort: value,
+    });
+  }
+
+  handleContextMenu = (e, item) => {
+    const { uiActions: { showContextMenu } } = this.props;
+    showContextMenu({
+      e,
+      context: 'artist',
+      uris: [item.uri],
+      items: [item],
+    });
+  }
+
+  getMopidyLibrary = (forceRefetch = false) => {
    const {
      source,
      coreActions: {
@ -71,10 +101,10 @@ class LibraryArtists extends React.Component {

    if (source !== 'local' && source !== 'all') return;

-    loadLibrary('mopidy:library:artists');
+    loadLibrary('mopidy:library:artists', forceRefetch);
  };

-  getGoogleLibrary = () => {
+  getGoogleLibrary = (forceRefetch = false) => {
    const {
      source,
      google_available,
@ -86,10 +116,10 @@ class LibraryArtists extends React.Component {
    if (!google_available) return;
    if (source !== 'google' && source !== 'all') return;

-    loadLibrary('google:library:artists');
+    loadLibrary('google:library:artists', forceRefetch);
  };

-  getSpotifyLibrary = () => {
+  getSpotifyLibrary = (forceRefetch = false) => {
    const {
      source,
      spotify_available,
@ -101,20 +131,10 @@ class LibraryArtists extends React.Component {
    if (!spotify_available) return;
    if (source !== 'spotify' && source !== 'all') return;

-    loadLibrary('spotify:library:artists');
+    loadLibrary('spotify:library:artists', forceRefetch);
  };

-  handleContextMenu(e, item) {
-    const data = {
-      e,
-      context: 'artist',
-      uris: [item.uri],
-      items: [item],
-    };
-    this.props.uiActions.showContextMenu(data);
-  }
-
-  loadMore() {
+  loadMore = () => {
    const new_limit = this.state.limit + this.state.per_page;

    this.setState({ limit: new_limit });
@ -125,17 +145,6 @@ class LibraryArtists extends React.Component {
    this.props.history.replace({ state });
  }

-  setSort(value) {
-    let reverse = false;
-    if (this.props.sort == value) reverse = !this.props.sort_reverse;
-
-    const data = {
-      library_artists_sort_reverse: reverse,
-      library_artists_sort: value,
-    };
-    this.props.uiActions.set(data);
-  }
-
  renderView = () => {
    const {
      spotify_library,
@ -298,6 +307,14 @@ class LibraryArtists extends React.Component {
          options={source_options}
          handleChange={(value) => { this.props.uiActions.set({ library_artists_source: value }); this.props.uiActions.hideContextMenu(); }}
        />
+        <Button
+          noHover
+          onClick={this.onRefresh}
+          tracking={{ category: 'LibraryArtists', action: 'Refresh' }}
+        >
+          <Icon name="refresh" />
+          <I18n path="actions.refresh" />
+        </Button>
      </span>
    );

--- a/src/js/views/library/LibraryPlaylists.js
+++ b/src/js/views/library/LibraryPlaylists.js
@ -30,21 +30,37 @@ class LibraryPlaylists extends React.Component {
  }

  componentDidMount() {
-    // Restore any limit defined in our location state
-    const state = (this.props.location.state ? this.props.location.state : {});
-    if (state.limit) {
+    const {
+      location: {
+        state: {
+          limit,
+        } = {},
+      } = {},
+      uiActions: {
+        setWindowTitle,
+      },
+    } = this.props;
+    if (limit) {
      this.setState({
-        limit: state.limit,
+        limit,
      });
    }

-    this.props.uiActions.setWindowTitle(i18n('library.playlists.title'));
+    setWindowTitle(i18n('library.playlists.title'));

    this.getMopidyLibrary();
    this.getSpotifyLibrary();
  }

-  getMopidyLibrary = () => {
+  onRefresh = () => {
+    const { uiActions: { hideContextMenu } } = this.props;
+
+    hideContextMenu();
+    this.getMopidyLibrary(true);
+    this.getSpotifyLibrary(true);
+  }
+
+  getMopidyLibrary = (forceRefetch = false) => {
    const {
      source,
      coreActions: {
@ -54,10 +70,10 @@ class LibraryPlaylists extends React.Component {

    if (source !== 'local' && source !== 'all') return;

-    loadLibrary('mopidy:library:playlists');
+    loadLibrary('mopidy:library:playlists', forceRefetch);
  };

-  getSpotifyLibrary = () => {
+  getSpotifyLibrary = (forceRefetch = false) => {
    const {
      source,
      spotify_available,
@ -69,7 +85,7 @@ class LibraryPlaylists extends React.Component {
    if (!spotify_available) return;
    if (source !== 'spotify' && source !== 'all') return;

-    loadLibrary('spotify:library:playlists');
+    loadLibrary('spotify:library:playlists', forceRefetch);
  };

  componentDidUpdate = ({ source: prevSource }) => {
@ -81,6 +97,17 @@ class LibraryPlaylists extends React.Component {
    }
  }

+  setSort(value) {
+    let reverse = false;
+    if (this.props.sort == value) reverse = !this.props.sort_reverse;
+
+    const data = {
+      library_playlists_sort_reverse: reverse,
+      library_playlists_sort: value,
+    };
+    this.props.uiActions.set(data);
+  }
+
  handleContextMenu(e, item) {
    const data = {
      e,
@ -102,17 +129,6 @@ class LibraryPlaylists extends React.Component {
    this.props.history.replace({ state });
  }

-  setSort(value) {
-    let reverse = false;
-    if (this.props.sort == value) reverse = !this.props.sort_reverse;
-
-    const data = {
-      library_playlists_sort_reverse: reverse,
-      library_playlists_sort: value,
-    };
-    this.props.uiActions.set(data);
-  }
-
  renderView = () => {
    const {
      spotify_library,
@ -283,6 +299,14 @@ class LibraryPlaylists extends React.Component {
          <Icon name="add_box" />
          <I18n path="actions.add" />
        </Button>
+        <Button
+          noHover
+          onClick={this.onRefresh}
+          tracking={{ category: 'LibraryAlbums', action: 'Refresh' }}
+        >
+          <Icon name="refresh" />
+          <I18n path="actions.refresh" />
+        </Button>
      </span>
    );