Working through ReactJS lifecycle deprecations

src/js/views/Playlist.js

@@ -27,16 +27,14 @@ import * as spotifyActions from '../services/spotify/actions';
 class Playlist extends React.Component {
   constructor(props) {
     super(props);
-  }
 
-  componentWillMount() {
-    let { uri } = this.props;
+    let { uri } = props;
 
     // Spotify upgraded their playlists URI to remove user component (Sept 2018)
     // We accept the old format, and redirect to the new one
     if (uri.includes('spotify:user:')) {
       uri = uri.replace(/spotify:user:([^:]*?):/i, 'spotify:');
-      this.props.history.push(`/playlist/${encodeURIComponent(uri)}`);
+      props.history.push(`/playlist/${encodeURIComponent(uri)}`);
     }
   }
 

src/js/views/Queue.js

@@ -30,17 +30,15 @@ class Queue extends React.Component {
     };
   }
 
-  componentWillMount() {
-    // Before we mount, restore any limit defined in our location state
+  componentDidMount() {
+    // Restore any limit defined in our location state
     const state = this.props.location.state ? this.props.location.state : {};
     if (state.limit) {
       this.setState({
         limit: state.limit,
       });
     }
-  }
 
-  componentDidMount() {
     this.props.uiActions.setWindowTitle('Now playing');
   }
 
@@ -147,7 +145,7 @@ class Queue extends React.Component {
     switch (uri_type){
       case 'radio':
         const radio_seeds = helpers.getFromUri('seeds', added_from_uri);
-        
+
         for (let seed of radio_seeds) {
           let item_type = helpers.uriType(seed);
           let item_library = this.props[`${item_type}s`];
@@ -180,13 +178,13 @@ class Queue extends React.Component {
           <URILink
             uri={items[0].uri}
             className="current-track__added-from__thumbnail"
-          >            
+          >
             <Thumbnail
               images={items[0].images}
               size="small"
               circle={helpers.uriType(items[0].uri) === 'artist'}
             />
-          </URILink>        
+          </URILink>
         )}
         <div className="current-track__added-from__text">
           {'Playing from '}

src/js/views/library/LibraryAlbums.js

@@ -29,17 +29,15 @@ class LibraryAlbums extends React.Component {
     };
   }
 
-  componentWillMount() {
-    // Before we mount, restore any limit defined in our location state
+  componentDidMount() {
+    // Restore any limit defined in our location state
     const state = (this.props.location.state ? this.props.location.state : {});
     if (state.limit) {
       this.setState({
         limit: state.limit,
       });
     }
-  }
 
-  componentDidMount() {
     this.props.uiActions.setWindowTitle('Albums');
 
     if (this.props.mopidy_connected && this.props.mopidy_library_albums_status != 'finished' && this.props.mopidy_library_albums_status != 'started' && (this.props.source == 'all' || this.props.source == 'local')) {

src/js/views/library/LibraryArtists.js

@@ -29,17 +29,15 @@ class LibraryArtists extends React.Component {
     };
   }
 
-  componentWillMount() {
-    // Before we mount, restore any limit defined in our location state
+  componentDidMount() {
+    // Restore any limit defined in our location state
     const state = (this.props.location.state ? this.props.location.state : {});
     if (state.limit) {
       this.setState({
         limit: state.limit,
       });
     }
-  }
 
-  componentDidMount() {
     this.props.uiActions.setWindowTitle('Artists');
 
     if (!this.props.mopidy_library_artists && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')) {

src/js/views/library/LibraryPlaylists.js

@@ -29,17 +29,15 @@ class LibraryPlaylists extends React.Component {
     };
   }
 
-  componentWillMount() {
-    // Before we mount, restore any limit defined in our location state
+  componentDidMount() {
+    // Restore any limit defined in our location state
     const state = (this.props.location.state ? this.props.location.state : {});
     if (state.limit) {
       this.setState({
         limit: state.limit,
       });
     }
-  }
 
-  componentDidMount() {
     this.props.uiActions.setWindowTitle('Playlists');
 
     if (!this.props.mopidy_library_playlists && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')) {

src/js/views/modals/Modal.js

@@ -6,12 +6,12 @@ import { bindActionCreators } from 'redux';
 import * as helpers from '../../helpers';
 import Icon from '../../components/Icon';
 
-class Modal extends React.Component {
+class Modal extends React.Component {
   constructor(props) {
     super(props);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     $('body').addClass('modal-open');
   }
 
@@ -19,7 +19,7 @@ class Modal extends React.Component {
     $('body').removeClass('modal-open');
   }
 
-  render() {
+  render() {
     let className = 'modal';
     if (this.props.className) {
       className += ` ${this.props.className}`;
@@ -29,10 +29,10 @@ class Modal extends React.Component {
       <div className={className}>
 
         <div className="controls">
-          {this.props.noclose ? null : (
+          {this.props.noclose ? null : (
             <div className="control close" onClick={(e) => window.history.back()}>
               <Icon name="close" className="white" />
-            </div>
+            </div>
           ) }
         </div>
 
@@ -50,4 +50,4 @@ const mapStateToProps = (state, ownProps) => ({
 
 const mapDispatchToProps = (dispatch) => ({});
 
-export default connect(mapStateToProps, mapDispatchToProps)(Modal);
+export default connect(mapStateToProps, mapDispatchToProps)(Modal);