Last remaining componentWillReceiveProps, whew

src/js/components/Fields/SearchForm.js

@@ -14,11 +14,15 @@ class SearchForm extends React.Component {
     };
   }
 
-  componentWillReceiveProps = (nextProps) => {
-    const { pristine, term } = this.state;
-    if (pristine && term === '' && term !== nextProps.term) {
-      this.setState({ term: nextProps.term, pristine: false });
+  static getDerivedStateFromProps(props, state) {
+    const { pristine, term } = state;
+    if (pristine && term === '' && term !== props.term) {
+      return {
+        term,
+        pristine: false,
+      };
     }
+    return null;
   }
 
   shouldComponentUpdate = (nextProps, nextState) => {
@@ -73,7 +77,6 @@ class SearchForm extends React.Component {
   }
 
   render() {
-    console.log('rendering', this.state);
     return (
       <form className="search-form" onSubmit={(e) => this.handleSubmit(e)}>
         <label>

src/js/components/Fields/TextField.js

@@ -1,7 +1,7 @@
 
 import React from 'react';
 
-export default class TextField extends React.Component {
+export default class TextField extends React.Component {
   constructor(props) {
     super(props);
 
@@ -11,10 +11,13 @@ export default class TextField extends React.Component {
     };
   }
 
-  componentWillReceiveProps(newProps) {
-    if (!this.state.in_focus) {
-      this.setState({ value: newProps.value });
+  static getDerivedStateFromProps({ value }, state) {
+    if (!state.in_focus && state.value !== value) {
+      return {
+        value,
+      };
     }
+    return null;
   }
 
   handleChange(e) {
@@ -41,8 +44,8 @@ export default class TextField extends React.Component {
         onFocus={(e) => this.handleFocus(e)}
         onBlur={(e) => this.handleBlur(e)}
         value={this.state.value}
-        placeholder={this.props.placeholder ? this.props.placeholder : null}
+        placeholder={this.props.placeholder ? this.props.placeholder : null}
       />
     );
   }
-}
+}

src/js/components/GridItem.js

@@ -113,7 +113,12 @@ export default class GridItem extends React.Component {
         onClick={scrollTo}
         onContextMenu={this.onContextMenu}
       >
-        <Thumbnail glow size="medium" className="grid__item__thumbnail" images={item.images || item.icons} />
+        <Thumbnail
+          glow
+          size="medium"
+          className="grid__item__thumbnail"
+          images={item.images || item.icons}
+        />
         <div className="grid__item__name">
           {item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
         </div>

src/js/components/PusherConnectionList.js

@@ -11,10 +11,9 @@ class PusherConnectionList extends React.Component {
     }
   }
 
-  componentWillReceiveProps(newProps) {
-    if (!this.props.connected && newProps.connected) {
-      this.props.pusherActions.getConnections();
-    }
+  componentDidUpdate = ({ connected: prevConnected }) => {
+    const { connected, pusherActions: { getConnections } } = this.props;
+    if (!prevConnected && connected) getConnections();
   }
 
   render() {

src/js/components/Services.js

@@ -42,23 +42,21 @@ class Services extends React.Component {
     }
   }
 
-  componentWillReceiveProps(newProps) {
+  static getDerivedStateFromProps(props, state) {
     let changed = false;
-    const { state } = this;
+    const changes = {};
 
-    if (newProps.spotify.country != this.state.country && this.state.input_in_focus != 'country') {
-      state.country = newProps.spotify.country;
+    if (props.spotify.country !== state.country && state.input_in_focus !== 'country') {
       changed = true;
+      changes.country = props.spotify.country;
     }
-
-    if (newProps.spotify.locale != this.state.locale && this.state.input_in_focus != 'locale') {
-      state.locale = newProps.spotify.locale;
+    if (props.spotify.locale !== state.locale && state.input_in_focus !== 'locale') {
       changed = true;
+      changes.locale = props.spotify.locale;
     }
 
-    if (changed) {
-      this.setState(state);
-    }
+    if (changed) return changes;
+    return null;
   }
 
   handleBlur(name, value) {

src/js/views/Album.js

@@ -44,7 +44,6 @@ export class Album extends React.Component {
     this.setWindowTitle();
     loadAlbum(uri);
 
-    // We already have the album in our index, so it won't fire componentWillReceiveProps
     if (album) {
       if (album.artists && album.wiki === undefined) {
         getAlbum(album.uri, album.artists[0].name, album.name);

src/js/views/Track.js

@@ -31,7 +31,6 @@ class Track extends React.Component {
   componentDidMount() {
     this.props.coreActions.loadTrack(this.props.uri);
 
-    // We already have the track in our index, so it won't fire componentWillReceiveProps
     if (this.props.track) {
       this.setWindowTitle(this.props.track);
 

src/js/views/library/LibraryArtists.js

@@ -53,35 +53,39 @@ class LibraryArtists extends React.Component {
     }
   }
 
-  componentWillReceiveProps(newProps) {
-    if (newProps.mopidy_connected && (newProps.source == 'all' || newProps.source == 'local')) {
-      // We've just connected
-      if (!this.props.mopidy_connected) {
-        this.props.mopidyActions.getLibraryArtists();
-      }
+  componentDidUpdate = ({
+    mopidy_connected: prev_mopidy_connected,
+  }) => {
+    const {
+      source,
+      mopidy_connected,
+      google_enabled,
+      spotify_enabled,
+      mopidyActions,
+      googleActions,
+      spotifyActions,
+      mopidy_library_artists,
+      google_library_artists,
+      spotify_library_artists_status,
+    } = this.props;
+  
+    if (mopidy_connected && (source === 'all' || source === 'local')) {
+      if (!prev_mopidy_connected) mopidyActions.getLibraryArtists();
 
-      // Filter changed, but we haven't got this provider's library yet
-      if (this.props.source != 'all' && this.props.source != 'local' && !newProps.mopidy_library_artists) {
-        this.props.mopidyActions.getLibraryArtists();
+      if (source !== 'all' && source !== 'local' && !mopidy_library_artists) {
+        mopidyActions.getLibraryArtists();
       }
     }
 
-    if (newProps.mopidy_connected && newProps.google_enabled && (newProps.source == 'all' || newProps.source == 'google')) {
-      // We've just been enabled (or detected as such)
-      if (!this.props.google_enabled) {
-        this.props.googleActions.getLibraryArtists();
-      }
-
-      // Filter changed, but we haven't got this provider's library yet
-      if (this.props.source != 'all' && this.props.source != 'google' && !newProps.google_library_artists) {
-        this.props.googleActions.getLibraryArtists();
+    if (mopidy_connected && google_enabled && (source === 'all' || source === 'google')) {
+      if (source !== 'all' && source !== 'google' && !google_library_artists) {
+        googleActions.getLibraryArtists();
       }
     }
 
-    if (newProps.spotify_enabled && (newProps.source == 'all' || newProps.source == 'spotify')) {
-      // Filter changed, but we haven't got this provider's library yet
-      if (newProps.spotify_library_artists_status != 'finished' && newProps.spotify_library_artists_status != 'started') {
-        this.props.spotifyActions.getLibraryArtists();
+    if (spotify_enabled && (source === 'all' || source === 'spotify')) {
+      if (spotify_library_artists_status !== 'finished' && spotify_library_artists_status !== 'started') {
+        spotifyActions.getLibraryArtists();
       }
     }
   }

src/js/views/library/LibraryBrowse.js

@@ -16,11 +16,9 @@ class LibraryBrowse extends React.Component {
     this.props.uiActions.setWindowTitle('Browse');
   }
 
-  componentWillReceiveProps(nextProps) {
-    // mopidy goes online
-    if (!this.props.mopidy_connected && nextProps.mopidy_connected) {
-      this.loadDirectory(nextProps);
-    }
+  componentDidUpdate = ({ mopidy_connected: prev_mopidy_connected}) => {
+    const { mopidy_connected } = this.props;
+    if (!prev_mopidy_connected && mopidy_connected) this.loadDirectory();
   }
 
   loadDirectory(props = this.props) {

src/js/views/library/LibraryBrowseDirectory.js

@@ -25,16 +25,17 @@ class LibraryBrowseDirectory extends React.Component {
     this.loadDirectory();
   }
 
-  componentWillReceiveProps(nextProps) {
-    // mopidy goes online
-    if (!this.props.mopidy_connected && nextProps.mopidy_connected) {
-      this.loadDirectory(nextProps);
-    }
+  componentDidUpdate = ({
+    mopidy_connected: prev_mopidy_connected,
+    uri: prevUri,
+  }) => {
+    const {
+      uri,
+      mopidy_connected,
+    } = this.props;
 
-    // our uri changes
-    if (nextProps.uri && nextProps.uri !== this.props.uri) {
-      this.loadDirectory(nextProps);
-    }
+    if (!prev_mopidy_connected && mopidy_connected) this.loadDirectory();
+    if (uri && uri !== prevUri) this.loadDirectory();
   }
 
   loadDirectory(props = this.props) {

src/js/views/library/LibraryPlaylists.js

@@ -47,23 +47,30 @@ class LibraryPlaylists extends React.Component {
     }
   }
 
-  componentWillReceiveProps(newProps) {
-    if (newProps.mopidy_connected && (newProps.source == 'all' || newProps.source == 'local')) {
-      // We've just connected
-      if (!this.props.mopidy_connected) {
-        this.props.mopidyActions.getLibraryPlaylists();
-      }
+  componentDidUpdate = ({
+    mopidy_connected: prev_mopidy_connected,
+  }) => {
+    const {
+      source,
+      mopidy_connected,
+      mopidy_library_playlists,
+      spotify_enabled,
+      spotify_library_playlists_status,
+      mopidyActions,
+      spotifyActions,
+    } = this.props;
 
-      // Filter changed, but we haven't got this provider's library yet
-      if (this.props.source != 'all' && this.props.source != 'local' && !newProps.mopidy_library_playlists) {
+    if (mopidy_connected && (source == 'all' || source == 'local')) {
+      if (!prev_mopidy_connected) mopidyActions.getLibraryPlaylists();
+
+      if (source !== 'all' && source !== 'local' && !mopidy_library_playlists) {
         this.props.mopidyActions.getLibraryPlaylists();
       }
     }
 
-    if (newProps.spotify_enabled && (newProps.source == 'all' || newProps.source == 'spotify')) {
-      // Filter changed, but we haven't got this provider's library yet
-      if (newProps.spotify_library_playlists_status != 'finished' && newProps.spotify_library_playlists_status != 'started') {
-        this.props.spotifyActions.getLibraryPlaylists();
+    if (spotify_enabled && (source === 'all' || source === 'spotify')) {
+      if (spotify_library_playlists_status !== 'finished' && spotify_library_playlists_status !== 'started') {
+        spotifyActions.getLibraryPlaylists();
       }
     }
   }

src/js/views/modals/EditPlaylist.js

@@ -13,6 +13,7 @@ class EditPlaylist extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      loaded: false,
       error: null,
       name: '',
       description: '',
@@ -27,13 +28,14 @@ class EditPlaylist extends React.Component {
 
     if (this.props.playlist) {
       this.setState({
+        loaded: true,
         name: this.props.playlist.name,
         description: this.props.playlist.description,
         public: (this.props.playlist.public == true),
         collaborative: (this.props.playlist.collaborative == true),
       });
     } else {
-      switch (helpers.uriSource(this.props.uri)) {
+      switch (uriSource(this.props.uri)) {
         case 'spotify':
           this.props.spotifyActions.getPlaylist(this.props.uri);
           this.props.spotifyActions.following(this.props.uri);
@@ -48,22 +50,36 @@ class EditPlaylist extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    // Playlist just loaded
-    if (!this.props.playlist && nextProps.playlist) {
-      this.setState({
-        name: nextProps.playlist.name,
-        description: nextProps.playlist.description,
-        public: (nextProps.playlist.public == true),
-        collaborative: (nextProps.playlist.collaborative == true),
-      });
+  componentDidUpdate = ({
+    mopidy_connected: prev_mopidy_connected,
+  }) => {
+    const {
+      uri,
+      playlist,
+      mopidy_connected,
+      mopidyActions: {
+        getPlaylist,
+      },
+    } = this.props;
 
-      // Mopidy just connected, and we don't have the playlist yet
-    } else if (this.props.mopidy_connected != nextProps.mopidy_connected && !nextProps.playlist) {
-      this.props.mopidyActions.getPlaylist(this.props.uri);
+    if (!prev_mopidy_connected && mopidy_connected && !playlist) {
+      getPlaylist(uri);
     }
   }
 
+  static getDerivedStateFromProps({ playlist }, state) {
+    if (playlist && !state.loaded) {
+      return {
+        loaded: true,
+        name: playlist.name,
+        description: playlist.description,
+        public: (playlist.public === true),
+        collaborative: (playlist.collaborative === true),
+      };
+    }
+    return null;
+  }
+
   savePlaylist(e) {
     e.preventDefault();
 

src/js/views/modals/EditRadio.js

@@ -33,10 +33,9 @@ class EditRadio extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (!this.props.radio && nextProps.radio) {
-      this.loadRadio(nextProps.radio);
-    }
+  componentDidUpdate = ({ radio: prev_radio }) => {
+    const { radio } = this.props;
+    if (!prev_radio && radio) this.loadRadio(radio);
   }
 
   loadRadio(radio) {

src/js/views/modals/KioskMode.js

@@ -44,27 +44,27 @@ class KioskMode extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate = ({
+    current_track: prev_current_track,
+  }) => {
     const {
       current_track,
       show_lyrics,
-      geniusActions,
+      genius_authorized,
+      geniusActions: {
+        findTrackLyrics,
+      },
     } = this.props;
-    const {
-      current_track: next_current_track,
-      show_lyrics: next_show_lyrics,
-      genius_authorized: next_genius_authorized,
-    } = nextProps;
 
-    if (!current_track && next_current_track) {
-      this.setWindowTitle(next_current_track);
+    if (!prev_current_track && current_track) {
+      this.setWindowTitle(current_track);
 
-      if (show_lyrics && next_genius_authorized && next_current_track && next_current_track.artists && !next_current_track.lyrics_results) {
-        geniusActions.findTrackLyrics(next_current_track);
+      if (show_lyrics && genius_authorized && current_track && current_track.artists && !current_track.lyrics_results) {
+        findTrackLyrics(current_track);
       }
-    } else if (show_lyrics !== next_show_lyrics && next_show_lyrics && next_current_track) {
-      if (next_genius_authorized && next_current_track && next_current_track.artists && !next_current_track.lyrics_results) {
-        geniusActions.findTrackLyrics(next_current_track);
+    } else if (show_lyrics !== show_lyrics && show_lyrics && current_track) {
+      if (genius_authorized && current_track && current_track.artists && !current_track.lyrics_results) {
+        findTrackLyrics(current_track);
       }
     }
   }