Fix sorting indicator being displayed on playlists

martpie · Sep 5, 2024 · 15bec28 · 15bec28
1 parent 13a1628
commit 15bec28
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/src/components/TracksListHeader/TracksListHeader.tsx b/src/components/TracksListHeader/TracksListHeader.tsx
@@ -5,10 +5,15 @@ import TracksListHeaderCell from '../TracksListHeaderCell/TracksListHeaderCell';
 import styles from './TracksListHeader.module.css';
 
 const getIcon = (
+  enableSort: boolean,
   sortBy: SortBy,
   sortOrder: SortOrder,
   sortByTarget: SortBy,
 ) => {
+  if (!enableSort) {
+    return null;
+  }
+
   if (sortBy === sortByTarget) {
     if (sortOrder === 'Asc') {
       return 'angle-up';
@@ -40,31 +45,31 @@ export default function TracksListHeader(props: Props) {
         className={styles.cellTrack}
         title="Title"
         sortBy={enableSort ? 'Title' : null}
-        icon={getIcon(sortBy, sortOrder, 'Title')}
+        icon={getIcon(enableSort, sortBy, sortOrder, 'Title')}
       />
       <TracksListHeaderCell
         className={styles.cellDuration}
         title="Duration"
         sortBy={enableSort ? 'Duration' : null}
-        icon={getIcon(sortBy, sortOrder, 'Duration')}
+        icon={getIcon(enableSort, sortBy, sortOrder, 'Duration')}
       />
       <TracksListHeaderCell
         className={styles.cellArtist}
         title="Artist"
         sortBy={enableSort ? 'Artist' : null}
-        icon={getIcon(sortBy, sortOrder, 'Artist')}
+        icon={getIcon(enableSort, sortBy, sortOrder, 'Artist')}
       />
       <TracksListHeaderCell
         className={styles.cellAlbum}
         title="Album"
         sortBy={enableSort ? 'Album' : null}
-        icon={getIcon(sortBy, sortOrder, 'Album')}
+        icon={getIcon(enableSort, sortBy, sortOrder, 'Album')}
       />
       <TracksListHeaderCell
         className={styles.cellGenre}
         title="Genre"
         sortBy={enableSort ? 'Genre' : null}
-        icon={getIcon(sortBy, sortOrder, 'Genre')}
+        icon={getIcon(enableSort, sortBy, sortOrder, 'Genre')}
       />
     </div>
   );

diff --git a/src/components/TracksListHeaderCell/TracksListHeaderCell.tsx b/src/components/TracksListHeaderCell/TracksListHeaderCell.tsx
@@ -39,13 +39,16 @@ export default function TracksListHeaderCell(props: Props) {
     </React.Fragment>
   );
 
-  if (sortBy) {
-    return (
-      <button type="button" className={classes} onClick={sort}>
-        {content}
-      </button>
-    );
-  }
-
-  return <div className={classes}>{content}</div>;
+  console.log(sortBy);
+
+  return (
+    <button
+      type="button"
+      className={classes}
+      disabled={sortBy === null}
+      onClick={sort}
+    >
+      {content}
+    </button>
+  );
 }