Refactor AlbumGrid to remove recompose

kwesiopon · Oct 24, 2023 · 92f4d6b · 92f4d6b
1 parent 89ac224
commit 92f4d6b
Showing 1 changed file with 56 additions and 89 deletions.
diff --git a/packages/ui/lib/components/AlbumGrid/index.tsx b/packages/ui/lib/components/AlbumGrid/index.tsx
@@ -1,9 +1,7 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState } from 'react';
 import cx from 'classnames';
 import _ from 'lodash';
 import { Dimmer, Loader } from 'semantic-ui-react';
-import { compose, withState, withHandlers } from 'recompose';
 
 import AlbumPreview from '../AlbumPreview';
 import Card from '../Card';
@@ -13,101 +11,70 @@ import { getThumbnail, getTrackItem } from '../..';
 
 const AlbumGrid = ({
   albums,
-  onAlbumClick,
   removeFavoriteAlbum,
-  selectedAlbum,
   loading,
   trackButtons,
-  onAddToQueue,
-  onPlayAll,
+  addToQueue,
+  selectSong,
+  startPlayback,
   autoSize,
   withArtistNames,
   withAlbumPreview
-}) => (
-  <div className={cx(
-    common.nuclear,
-    styles.album_grid,
-    { [styles.loading]: loading },
-    { [styles.auto_size]: autoSize && !loading }
-  )} >
-    <div className={styles.album_cards}>
-      {
-        !loading &&
-          !_.isEmpty(albums) &&
-          albums.map((album, i) => (
-            <Card
-              key={i}
-              header={album.title}
-              content={withArtistNames && _.get(album, 'artist.name')}
-              image={getThumbnail(album)}
-              onClick={() => onAlbumClick(album)}
-              withMenu={removeFavoriteAlbum ? true : false}
-              menuEntries={[
-                {
-                  type: 'item', props: {
-                    children: 'Remove',
-                    onClick: () => removeFavoriteAlbum(album)
-                  }
-                }
-              ]}
-            />
-          ))
-      }
-    </div>
+}) => {
+  const [selectedAlbum, selectAlbum] = useState(albums.length > 0 ? albums[0] : null);
+  const onAlbumClick = album => _.isNil(onAlbumClick) ? selectAlbum(album) : onAlbumClick(album);
 
-    {
-      !loading && withAlbumPreview &&
-        <Fragment>
-          <hr />
-          <AlbumPreview
-            album={selectedAlbum}
-            trackButtons={trackButtons}
-            handleAddToQueue={onAddToQueue}
-            handlePlayAll={onPlayAll}
-          />
-        </Fragment>
-    }
-    {loading && <Dimmer active><Loader /></Dimmer>}
-  </div>
-);
+  const onAddToQueue = () => {
+    selectedAlbum.tracks.map(track => addToQueue(getTrackItem(track)));
+  };
 
-AlbumGrid.propTypes = {
-  albums: PropTypes.array,
-  streamProviders: PropTypes.array, // eslint-disable-line react/no-unused-prop-types
-  onAlbumClick: PropTypes.func,
-  removeFavoriteAlbum: PropTypes.func,
-  loading: PropTypes.bool,
-  addToQueue: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
-  clearQueue: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
-  selectSong: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
-  startPlayback: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
-  onAddToQueue: PropTypes.func,
-  onPlayAll: PropTypes.func,
+  const onPlayAll = () => {
+    onAddToQueue();
+    selectSong(0);
+    startPlayback(false);
+  };
 
-  autoSize: PropTypes.bool,
-  withArtistNames: PropTypes.bool,
-  withAlbumPreview: PropTypes.bool,
+  return (
+    <div className={cx(
+      common.nuclear,
+      styles.album_grid,
+      { [styles.loading]: loading },
+      { [styles.auto_size]: autoSize && !loading }
+    )}>
+      <div className={styles.album_cards}>
+        {!loading &&
+            !_.isEmpty(albums) &&
+            albums.map((album, i) => (
+              <Card
+                key={i}
+                header={album.title}
+                content={withArtistNames && _.get(album, 'artist.name')}
+                image={getThumbnail(album)}
+                onClick={() => onAlbumClick(album)}
+                withMenu={removeFavoriteAlbum ? true : false}
+                menuEntries={[
+                  {
+                    type: 'item', props: {
+                      children: 'Remove',
+                      onClick: () => removeFavoriteAlbum(album)
+                    }
+                  }
+                ]} />
+            ))}
+      </div>
 
-  trackButtons: PropTypes.object
+      {!loading && withAlbumPreview &&
+      <>
+        <hr />
+        <AlbumPreview
+          album={selectedAlbum}
+          trackButtons={trackButtons}
+          handleAddToQueue={onAddToQueue}
+          handlePlayAll={onPlayAll} />
+      </>}
+      {loading && <Dimmer active><Loader /></Dimmer>}
+    </div>
+  );
 };
 
-export default compose(
-  withState(
-    'selectedAlbum',
-    'selectAlbum',
-    ({ albums }) => _.head(albums)
-  ),
-  withHandlers({
-    onAlbumClick: ({ onAlbumClick, selectAlbum }) => album => _.isNil(onAlbumClick) ? selectAlbum(album) : onAlbumClick(album),
-    onAddToQueue: ({ addToQueue, selectedAlbum }) => () => {
-      selectedAlbum.tracks.map(track => addToQueue(getTrackItem(track)));
-    }
-  }),
-  withHandlers({
-    onPlayAll: ({ selectSong, startPlayback, onAddToQueue }) => () => {
-      onAddToQueue();
-      selectSong(0);
-      startPlayback(false);
-    }
-  })
-)(AlbumGrid);
+export default AlbumGrid;