Refactoring to functional component

src/js/views/Album.js

@@ -1,9 +1,7 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-
 import sanitizeHtml from 'sanitize-html';
-
 import ErrorMessage from '../components/ErrorMessage';
 import TrackList from '../components/TrackList';
 import Thumbnail from '../components/Thumbnail';
@@ -30,169 +28,69 @@ import { decodeUri } from '../util/format';
 
 const SORT_KEY = 'album_tracks';
 
-class Album extends React.Component {
-  constructor(props) {
-    super(props);
+const Album = ({
+  uri,
+  album: albumProp,
+  sortField,
+  sortReverse,
+  loading,
+  slim_mode,
+  coreActions: {
+    loadAlbum,
+  },
+  lastfmActions: {
+    getAlbum,
+  },
+  uiActions: {
+    setSort,
+    setWindowTitle,
+    showContextMenu,
+    hideContextMenu,
+  },
+  mopidyActions: {
+    playURIs,
+  },
+}) => {
+  const [filter, setFilter] = useState('');
+  const [album, setAlbum] = useState({});
 
-    this.state = {
-      filter: '',
+  let tracks = album ?.tracks || [];
+  if (sortField && tracks) tracks = sortItems(tracks, sortField, sortReverse);
+  if (filter && filter !== '') tracks = applyFilter('name', filter, tracks);
+
+  useEffect(
+    () => {
+      if (uri) {
+        loadAlbum(uri, { full: true });
+      }
+    },
+    [uri],
+  );
+
+  useEffect(() => {
+    if (albumProp && !album) {
+      if (albumProp.artists && albumProp.wiki === undefined) {
+        getAlbum(albumProp.uri, albumProp.artists[0].name, albumProp.name);
+      }
     };
-  }
-
-  componentDidMount = () => {
-    const {
-      uri,
-      album,
-      coreActions: {
-        loadAlbum,
-      },
-      lastfmActions: {
-        getAlbum,
-      },
-    } = this.props;
-
-    this.setWindowTitle();
-    loadAlbum(uri, { full: true });
-
-    if (album) {
-      if (album.artists && album.wiki === undefined) {
-        getAlbum(album.uri, album.artists[0].name, album.name);
-      }
-    }
-  }
-
-  componentDidUpdate = ({
-    uri: prevUri,
-    album: prevAlbum,
-  }) => {
-    const {
-      uri,
-      album,
-      coreActions: {
-        loadAlbum,
-      },
-      lastfmActions: {
-        getAlbum,
-      },
-    } = this.props;
-
-    if (uri !== prevUri) {
-      loadAlbum(uri, { full: true });
-    }
-
-    // We have just received our full album or our album artists
-    if ((!prevAlbum && album)) {
-      if (album.artists && album.wiki === undefined) {
-        getAlbum(album.uri, album.artists[0].name, album.name);
-      }
-    }
-
-    if (!prevAlbum && album) this.setWindowTitle(album);
-  }
-
-  setWindowTitle = (album = this.props.album) => {
-    const { uiActions: { setWindowTitle } } = this.props;
+    setAlbum(albumProp);
+  }, [albumProp])
 
+  useEffect(() => {
     if (album) {
       setWindowTitle(i18n('album.title_window', {
         name: album.name,
-        artist: album.artists?.map((artist) => artist.name).join(),
+        artist: album.artists ? album.artists.map((artist) => artist.name).join(', ') : '',
       }));
     } else {
       setWindowTitle(i18n('album.title'));
     }
-  }
-
-  handleContextMenu = (e) => {
-    const { album, uri, uiActions: { showContextMenu } } = this.props;
-
-    showContextMenu({
-      e,
-      context: 'album',
-      items: [album],
-      uris: [uri],
-    });
-  }
-
-  loadMore = () => {
-    const {
-      spotifyActions: {
-        getMore,
-      },
-      album: {
-        uri,
-        name,
-        tracks_more,
-      } = {},
-    } = this.props;
-
-    getMore(
-      tracks_more, {
-        parent_type: 'album',
-        parent_key: uri,
-        records_type: 'track',
-      },
-      null,
-      {
-        album: {
-          uri,
-          name,
-        },
-      },
-    );
-  }
-
-  play = () => {
-    const { uri, mopidyActions: { playURIs } } = this.props;
-    playURIs([uri], uri);
-  }
-
-  onChangeSort = (field) => {
-    const {
-      sortField,
-      sortReverse,
-      uiActions: {
-        setSort,
-        hideContextMenu,
-      },
-    } = this.props;
-
-    let reverse = false;
-    if (field !== null && sortField === field) {
-      reverse = !sortReverse;
-    }
-
-    setSort(SORT_KEY, field, reverse);
-    hideContextMenu();
-  }
-
-  inLibrary = () => {
-    const { uri } = this.props;
-    const library = `${uriSource(uri)}_library_albums`;
-    return (this.props[library] && this.props[library].indexOf(this.props.uri) > -1);
-  }
-
-  render = () => {
-    const {
-      uri,
-      album,
-      loading,
-      slim_mode,
-      sortField,
-      sortReverse,
-    } = this.props;
-    let {
-      album: {
-        tracks,
-      } = {},
-    } = this.props;
-    const {
-      filter,
-    } = this.state;
+  }, [album]);
 
   if (loading) {
     return <Loader body loading />;
   }
+
   if (!album) {
     return (
       <ErrorMessage type="not-found" title="Not found">
@@ -203,12 +101,25 @@ class Album extends React.Component {
     );
   }
 
-    if (sortField && tracks) {
-      tracks = sortItems(tracks, sortField, sortReverse);
+  const handleContextMenu = (e) => {
+    showContextMenu({
+      e,
+      context: 'album',
+      items: [album],
+      uris: [uri],
+    });
   }
 
-    if (filter && filter !== '') {
-      tracks = applyFilter('name', filter, tracks);
+  const play = () => playURIs([uri], uri);
+
+  const onChangeSort = (field) => {
+    let reverse = false;
+    if (field !== null && sortField === field) {
+      reverse = !sortReverse;
+    }
+
+    setSort(SORT_KEY, field, reverse);
+    hideContextMenu();
   }
 
   const sort_options = [
@@ -282,7 +193,7 @@ class Album extends React.Component {
       <div className="actions">
         <Button
           type="primary"
-            onClick={this.play}
+          onClick={play}
           tracking={{ category: 'Album', action: 'Play' }}
         >
           <I18n path="actions.play" />
@@ -293,7 +204,7 @@ class Album extends React.Component {
             is_following={album.in_library}
           />
         )}
-          <ContextMenuTrigger onTrigger={this.handleContextMenu} />
+        <ContextMenuTrigger onTrigger={handleContextMenu} />
       </div>
 
       <section className="list-wrapper">
@@ -302,8 +213,8 @@ class Album extends React.Component {
           <div className="actions-wrapper">
             <FilterField
               initialValue={filter}
-                handleChange={(value) => this.setState({ filter: value })}
-                onSubmit={() => uiActions.hideContextMenu()}
+              handleChange={setFilter}
+              onSubmit={hideContextMenu}
             />
             <DropdownField
               icon="swap_vert"
@@ -312,7 +223,7 @@ class Album extends React.Component {
               valueAsLabel
               options={sort_options}
               selected_icon={sortField ? (sortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
-                handleChange={this.onChangeSort}
+              handleChange={onChangeSort}
             />
           </div>
         </h4>
@@ -338,7 +249,6 @@ class Album extends React.Component {
       ) : null}
     </div>
   );
-  }
 }
 
 const mapStateToProps = (state, ownProps) => {