From 3e56a3f8732944b1341572bfaa475c5689de6a64 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Wed, 11 Mar 2020 20:40:20 +1300 Subject: [PATCH] Removing componentWillReceiveProps from base views --- src/js/util/arrays.js | 2 +- src/js/views/Album.js | 177 +++++++++++++++++++++-------------- src/js/views/Artist.js | 34 ++++--- src/js/views/Playlist.js | 42 +++++---- src/js/views/Queue.js | 17 ++-- src/js/views/QueueHistory.js | 7 +- src/js/views/Search.js | 31 +++--- src/js/views/Settings.js | 16 ++-- src/js/views/Track.js | 57 ++++++----- src/js/views/User.js | 24 +++-- 10 files changed, 239 insertions(+), 168 deletions(-) mode change 100644 => 100755 src/js/util/arrays.js diff --git a/src/js/util/arrays.js b/src/js/util/arrays.js old mode 100644 new mode 100755 index e2502d4c..349021ab --- a/src/js/util/arrays.js +++ b/src/js/util/arrays.js @@ -1,4 +1,4 @@ - +import { uriSource } from './helpers'; /** * Digest an array of objects and pull into simple array of one property diff --git a/src/js/views/Album.js b/src/js/views/Album.js index 620c1c89..6f3f83d9 100755 --- a/src/js/views/Album.js +++ b/src/js/views/Album.js @@ -29,124 +29,162 @@ import { import { collate } from '../util/format'; export class Album extends React.Component { - componentDidMount() { + componentDidMount = () => { + const { + uri, + album, + coreActions: { + loadAlbum, + }, + lastfmActions: { + getAlbum, + }, + } = this.props; + this.setWindowTitle(); - this.props.coreActions.loadAlbum(this.props.uri); + loadAlbum(uri); // We already have the album in our index, so it won't fire componentWillReceiveProps - if (this.props.album) { - if (this.props.album.artists && this.props.album.wiki === undefined) { - this.props.lastfmActions.getAlbum( - this.props.album.uri, - this.props.album.artists[0].name, - this.props.album.name, - ); + if (album) { + if (album.artists && album.wiki === undefined) { + getAlbum(album.uri, album.artists[0].name, album.name); } } } - handleContextMenu(e) { + handleContextMenu = (e) => { + const { + uri, + uiActions: { + showContextMenu, + }, + } = this.props; + e.preventDefault(); - const data = { uris: [this.props.uri] }; - this.props.uiActions.showContextMenu(e, data, 'album', 'click'); + const data = { uris: [uri] }; + showContextMenu(e, data, 'album', 'click'); } - componentWillReceiveProps(nextProps) { - // if our URI has changed, fetch new album - if (nextProps.uri != this.props.uri) { - this.props.coreActions.loadAlbum(nextProps.uri); + componentDidUpdate = ({ + uri: prevUri, + album: prevAlbum, + mopidy_connected: prev_mopidy_connected, + }) => { + const { + uri, + album, + mopidy_connected, + coreActions: { + loadAlbum, + }, + lastfmActions: { + getAlbum, + }, + } = this.props; - // if mopidy has just connected AND we're a local album, go get - } else if (!this.props.mopidy_connected && nextProps.mopidy_connected) { - if (uriSource(nextProps.uri) != 'spotify') { - this.props.coreActions.loadAlbum(nextProps.uri); + if (uri !== prevUri) { + loadAlbum(uri); + } else if (!prev_mopidy_connected && mopidy_connected) { + if (uriSource(uri) !== 'spotify') { + loadAlbum(uri); } } // We have just received our full album or our album artists - if ( - (!this.props.album && nextProps.album) - || (!this.props.album.artists && nextProps.album.artists) - ) { - if (nextProps.album.wiki === undefined && nextProps.artists.length > 0) { - this.props.lastfmActions.getAlbum( - nextProps.album.uri, - nextProps.album.artists[0].name, - nextProps.album.name, - ); + if ((!prevAlbum && album) || (!prevAlbum.artists && album.artists)) { + if (album.wiki === undefined && album.artists.length > 0) { + getAlbum(album.uri, album.artists[0].name, album.name); } } - if (!this.props.album && nextProps.album) { - this.setWindowTitle(nextProps.album); - } + if (!prevAlbum && album) this.setWindowTitle(album); } - setWindowTitle(album = this.props.album) { + setWindowTitle = (album = this.props.album) => { + const { uiActions: { setWindowTitle } } = this.props; + if (album) { let artists = ''; - if (album.artists_uris && this.props.artists) { + if (album.artists_uris && artists) { for (let i = 0; i < album.artists_uris.length; i++) { const uri = album.artists_uris[i]; - if (this.props.artists.hasOwnProperty(uri)) { + if (artists.hasOwnProperty(uri)) { if (artists != '') { artists += ', '; } - artists += this.props.artists[uri].name; + artists += artists[uri].name; } } } - this.props.uiActions.setWindowTitle( - `${album.name} by ${artists} (album)`, - ); + setWindowTitle(`${album.name} by ${artists} (album)`); } else { - this.props.uiActions.setWindowTitle('Album'); + setWindowTitle('Album'); } } - handleContextMenu(e) { - const data = { + handleContextMenu = (e) => { + const { album, uri, uiActions: { showContextMenu } } = this.props; + + showContextMenu({ e, context: 'album', - items: [this.props.album], - uris: [this.props.uri], - }; - this.props.uiActions.showContextMenu(data); + items: [album], + uris: [uri], + }); } - loadMore() { - this.props.spotifyActions.getMore( - this.props.album.tracks_more, { + loadMore = () => { + const { + spotifyActions: { + getMore, + }, + album: { + uri, + name, + tracks_more, + } = {}, + } = this.props; + + getMore( + tracks_more, { parent_type: 'album', - parent_key: this.props.album.uri, + parent_key: uri, records_type: 'track', }, null, { album: { - uri: this.props.album.uri, - name: this.props.album.name, + uri, + name, }, }, ); } - play() { - this.props.mopidyActions.playURIs([this.props.uri], this.props.uri); + play = () => { + const { uri, mopidyActions: { playURIs } } = this.props; + playURIs([uri], uri); } - inLibrary() { - const library = `${uriSource(this.props.uri)}_library_albums`; - return ( - this.props[library] && this.props[library].indexOf(this.props.uri) > -1 - ); + inLibrary = () => { + const { uri } = this.props; + const library = `${uriSource(uri)}_library_albums`; + return (this.props[library] && this.props[library].indexOf(this.props.uri) > -1); } - render() { - if (!this.props.album) { + render = () => { + const { + uri, + album: albumProp, + tracks, + artists, + load_queue, + } = this.props; + + if (!albumProp) { if ( - isLoading(this.props.load_queue, [ - `spotify_albums/${getFromUri('albumid', this.props.uri)}`, + isLoading(load_queue, [ + `spotify_albums/${getFromUri('albumid', uri)}`, ]) ) { return ; @@ -154,18 +192,13 @@ export class Album extends React.Component { return (

- Could not find album with URI " - {encodeURIComponent(this.props.uri)} -" + {`Could not find album with URI "${encodeURIComponent(uri)}"`}

); } - const album = collate(this.props.album, { - tracks: this.props.tracks, - artists: this.props.artists, - }); + const album = collate(albumProp, { tracks, artists }); if ( !album.tracks_uris @@ -179,7 +212,7 @@ export class Album extends React.Component { return (
- +
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index b722f618..8262f931 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -39,22 +39,30 @@ class Artist extends React.Component { this.props.coreActions.loadArtist(this.props.uri); } - componentWillReceiveProps(nextProps) { - if (nextProps.uri != this.props.uri) { - this.props.coreActions.loadArtist(nextProps.uri); - } else if (!this.props.mopidy_connected && nextProps.mopidy_connected) { - if (uriSource(this.props.uri) != 'spotify') { - this.props.coreActions.loadArtist(nextProps.uri); + componentDidUpdate = ({ + uri: prevUri, + mopidy_connected: prev_mopidy_connected, + artist: prevArtist, + }) => { + const { + uri, + mopidy_connected, + artist, + coreActions: { + loadArtist, + }, + } = this.props; + + if (uri !== prevUri) { + loadArtist(uri); + } else if (!prev_mopidy_connected && mopidy_connected) { + if (uriSource(uri) != 'spotify') { + loadArtist(uri); } } - if (!this.props.artist && nextProps.artist) { - this.setWindowTitle(nextProps.artist); - } - - if (this.props.uri !== nextProps.uri && nextProps.artist) { - this.setWindowTitle(nextProps.artist); - } + if (!prevArtist && artist) this.setWindowTitle(artist); + if (prevUri !== uri && artist) this.setWindowTitle(artist); } setWindowTitle(artist = this.props.artist) { diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index 57283784..7a207c65 100755 --- a/src/js/views/Playlist.js +++ b/src/js/views/Playlist.js @@ -47,27 +47,37 @@ class Playlist extends React.Component { this.props.coreActions.loadPlaylist(this.props.uri); } - componentWillReceiveProps(nextProps) { - // Follow a URI moved_to instruction - if (this.props.playlist && nextProps.playlist && this.props.playlist.moved_to != nextProps.playlist.moved_to) { - this.props.history.push(`/playlist/${encodeURIComponent(nextProps.playlist.moved_to)}`); + componentDidUpdate = ({ + uri: prevUri, + playlist: prevPlaylist, + mopidy_connected: prev_mopidy_connected, + }) => { + const { + uri, + playlist, + mopidy_connected, + coreActions: { + loadPlaylist, + }, + history: { + push, + }, + } = this.props; + + if (prevPlaylist && playlist && prevPlaylist.moved_to !== playlist.moved_to) { + push(`/playlist/${encodeURIComponent(playlist.moved_to)}`); } - if (nextProps.uri != this.props.uri) { - this.props.coreActions.loadPlaylist(nextProps.uri); - } else if (!this.props.mopidy_connected && nextProps.mopidy_connected) { - if (uriSource(this.props.uri) != 'spotify') { - this.props.coreActions.loadPlaylist(nextProps.uri); + if (uri !== prevUri) { + loadPlaylist(uri); + } else if (!prev_mopidy_connected && mopidy_connected) { + if (uriSource(uri) !== 'spotify') { + loadPlaylist(nextProps.uri); } } - if (!this.props.playlist && nextProps.playlist) { - this.setWindowTitle(nextProps.playlist); - } - - if (this.props.uri !== nextProps.uri && nextProps.playlist) { - this.setWindowTitle(nextProps.playlist); - } + if (!prevPlaylist && playlist) this.setWindowTitle(playlist); + if (prevUri !== uri && playlist) this.setWindowTitle(playlist); } setWindowTitle(playlist = this.props.playlist) { diff --git a/src/js/views/Queue.js b/src/js/views/Queue.js index 22bfd3c0..04099528 100755 --- a/src/js/views/Queue.js +++ b/src/js/views/Queue.js @@ -47,21 +47,22 @@ class Queue extends React.Component { return nextProps !== this.props; } - componentWillReceiveProps(nextProps) { - const { added_from_uri: next_added_from_uri } = nextProps; - const { coreActions, added_from_uri } = this.props; + componentDidUpdate = ({ + added_from_uri: prev_added_from_uri, + }) => { + const { coreActions: { loadPlaylist }, added_from_uri } = this.props; - if (next_added_from_uri && next_added_from_uri !== added_from_uri) { - const item_type = uriType(next_added_from_uri); + if (added_from_uri && added_from_uri !== prev_added_from_uri) { + const item_type = uriType(added_from_uri); switch (item_type) { case 'album': - coreActions.loadAlbum(next_added_from_uri); + loadAlbum(added_from_uri); break; case 'artist': - coreActions.loadArtist(next_added_from_uri); + loadArtist(added_from_uri); break; case 'playlist': - coreActions.loadPlaylist(next_added_from_uri); + loadPlaylist(added_from_uri); break; default: break; diff --git a/src/js/views/QueueHistory.js b/src/js/views/QueueHistory.js index 7ac647fb..3034b1fc 100755 --- a/src/js/views/QueueHistory.js +++ b/src/js/views/QueueHistory.js @@ -16,10 +16,9 @@ class QueueHistory extends React.Component { this.loadHistory(); } - componentWillReceiveProps(nextProps) { - if (!this.props.mopidy_connected && nextProps.mopidy_connected) { - this.loadHistory(nextProps); - } + componentDidUpdate = ({ mopidy_connected: prev_mopidy_connected }) => { + const { mopidy_connected } = this.props; + if (!prev_mopidy_connected && mopidy_connected) this.loadHistory(); } loadHistory(props = this.props) { diff --git a/src/js/views/Search.js b/src/js/views/Search.js index fa9dd8da..ef007e80 100755 --- a/src/js/views/Search.js +++ b/src/js/views/Search.js @@ -47,22 +47,29 @@ class Search extends React.Component { }); } - componentWillReceiveProps(nextProps) { - const { type, term } = this.props; - const { type: nextType, term: nextTerm } = nextProps; - if (nextType !== type || nextTerm !== term) { - this.digestUri({ - type: nextType, - term: nextTerm, - }); + componentDidUpdate = ({ + type: prevType, + term: prevTerm, + mopidy_connected: prev_mopidy_connected, + }) => { + const { + type: typeProp, + term: termProp, + mopidy_connected, + uri_schemes_search_enabled, + } = this.props; + const { type, term } = this.state; + + if (prevType !== typeProp || prevTerm !== termProp) { + this.digestUri({ type: typeProp, term: termProp }); } // Services came online - if (!this.props.mopidy_connected && nextProps.mopidy_connected && nextProps.uri_schemes_search_enabled) { - this.search(this.state.type, this.state.term, 'mopidy'); + if (!prev_mopidy_connected && mopidy_connected && uri_schemes_search_enabled) { + this.search(type, term, 'mopidy'); - if (nextProps.uri_schemes_search_enabled.includes('spotify:')) { - this.search(this.state.type, this.state.term, 'spotify'); + if (uri_schemes_search_enabled.includes('spotify:')) { + this.search(type, term, 'spotify'); } } } diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js index 1c983d68..bc08b49e 100755 --- a/src/js/views/Settings.js +++ b/src/js/views/Settings.js @@ -36,18 +36,16 @@ class Settings extends React.Component { this.props.uiActions.setWindowTitle('Settings'); } - componentWillReceiveProps(nextProps) { - let changed = false; - const { state } = this; + componentDidUpdate = () => { + const { pusher: { username } } = this.props; + const { pusher_username, input_in_focus } = this.state; + let new_username = null; - if (nextProps.pusher.username && nextProps.pusher.username != this.state.pusher_username && this.state.input_in_focus != 'pusher_username') { - state.pusher_username = nextProps.pusher.username; - changed = true; + if (username && username !== pusher_username && input_in_focus !== 'pusher_username') { + new_username = username; } - if (changed) { - this.setState(state); - } + if (new_username) this.setState({ pusher_username: new_username }); } resetAllSettings() { diff --git a/src/js/views/Track.js b/src/js/views/Track.js index ecb47d7a..2a802355 100755 --- a/src/js/views/Track.js +++ b/src/js/views/Track.js @@ -47,40 +47,45 @@ class Track extends React.Component { this.props.uiActions.showContextMenu(e, data, 'track', 'click'); } - componentWillReceiveProps(nextProps) { + componentDidUpdate = ({ + uri: prevUri, + track: prevTrack, + mopidy_connected: prev_mopidy_connected, + }) => { + const { + uri, + track, + genius_authorized, + lastfm_authorized, + mopidy_connected, + coreActions: { + loadTrack, + }, + geniusActions: { + findTrackLyrics, + }, + lastfmActions: { + getTrack, + }, + } = this.props; // if our URI has changed, fetch new track - if (nextProps.uri != this.props.uri) { - this.props.coreActions.loadTrack(nextProps.uri); - - if (nextProps.genius_authorized && nextProps.tracks.artists) { - this.props.geniusActions.findTrackLyrics(nextProps.track); - } + if (prevUri !== uri) { + loadTrack(uri); + if (genius_authorized && track.artists) findTrackLyrics(track); // if mopidy has just connected AND we're not a Spotify track, go get - } else if (!this.props.mopidy_connected && nextProps.mopidy_connected) { - if (helpers.uriSource(this.props.uri) != 'spotify') { - this.props.coreActions.loadTrack(nextProps.uri); - } + } else if (!prev_mopidy_connected && mopidy_connected) { + if (uriSource(uri) !== 'spotify') loadTrack(uri); } // We have just received our full track or our track artists - if ((!this.props.track && nextProps.track) || (!this.props.track.artists && nextProps.track.artists)) { - this.setWindowTitle(nextProps.track); - - // Ready to load LastFM - if (nextProps.lastfm_authorized) { - this.props.lastfmActions.getTrack(nextProps.track.uri); - } - - // Ready to load lyrics - if (nextProps.genius_authorized && !nextProps.track.lyrics_results) { - this.props.geniusActions.findTrackLyrics(nextProps.track); - } + if ((!prevTrack && track) || (!prevTrack.artists && track.artists)) { + this.setWindowTitle(track); + if (lastfm_authorized) getTrack(track.uri); + if (genius_authorized && !track.lyrics_results) findTrackLyrics(track); } - if (!this.props.track && nextProps.track) { - this.setWindowTitle(nextProps.track); - } + if (!prevTrack && track) this.setWindowTitle(track); } setWindowTitle(track = this.props.track) { diff --git a/src/js/views/User.js b/src/js/views/User.js index 1ec18b3e..60647234 100755 --- a/src/js/views/User.js +++ b/src/js/views/User.js @@ -28,15 +28,25 @@ class User extends React.Component { this.props.coreActions.loadUserPlaylists(this.props.uri); } - componentWillReceiveProps(nextProps) { - if (nextProps.uri != this.props.uri) { - this.props.coreActions.loadUser(nextProps.uri); - this.props.coreActions.loadUserPlaylists(this.props.uri); + componentDidUpdate = ({ + uri: prevUri, + user: prevUser, + }) => { + const { + uri, + user, + coreActions: { + loadUser, + loadUserPlaylists, + }, + } = this.props; + + if (prevUri !== uri) { + loadUser(uri); + loadUserPlaylists(uri); } - if (!this.props.user && nextProps.user) { - this.setWindowTitle(nextProps.user); - } + if (!prevUser && user) this.setWindowTitle(user); } setWindowTitle(user = this.props.user) {