refactor: improve song item click logic

Author: bastiendmt

src/API.ts

@@ -52,10 +52,7 @@ export const GetUserPlaylists = async (
         Authorization: `Bearer ${auth}`,
       },
     })
-    .then((response) => {
-      console.log(response.data);
-      return response.data;
-    });
+    .then((response) => response.data);
 };
 
 export const GetPlaylistDetail = async (

src/pages/PlaylistDetail/PlaylistDetail.tsx

@@ -6,12 +6,10 @@ import Loader from '../../components/Loader/Loader';
 import NotFound from '../../components/NotFound/NotFound';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { selectCurrentSong } from '../../store/reducers/currentSong.slice';
-import { loadSong } from '../../store/reducers/currentSong.slice';
 import {
   fetchPlaylistById,
   playlistDetailsSelector,
 } from '../../store/reducers/playlistDetail.slice';
-import type { Track } from '../../types/track.interface';
 import msToMinutesAndSeconds from '../../utils/msToMinutes';
 import styles from './PlaylistDetail.module.scss';
 import SongItem from './SongItem/SongItem';
@@ -51,12 +49,6 @@ const PlaylistDetail = () => {
     }
   }, []);
 
-  const songClicked = (clickedSong: Track): void => {
-    if (clickedSong.track?.preview_url !== '') {
-      dispatch(loadSong(clickedSong));
-    }
-  };
-
   const getPlaylistDuration = (): string => {
     let totalMS = 0;
     if (playlist != null) {
@@ -126,7 +118,6 @@ const PlaylistDetail = () => {
                         song={item}
                         index={index}
                         current={item.track.id === song?.track?.id}
-                        songClicked={() => songClicked(item)}
                       />
                     ),
                 )}

src/pages/PlaylistDetail/SongItem/SongItem.tsx

@@ -1,4 +1,6 @@
 import Play from '../../../assets/play.svg?react';
+import { useAppDispatch } from '../../../store/hooks';
+import { loadSong } from '../../../store/reducers/currentSong.slice';
 import type { Track } from '../../../types/track.interface';
 import formatDate from '../../../utils/formatDate';
 import msToMinutesAndSeconds from '../../../utils/msToMinutes';
@@ -8,60 +10,73 @@ interface SongItemPros {
   current: boolean;
   index: number;
   song: Track;
-  songClicked: () => void;
 }
 
-const SongItem = ({ song, index, songClicked, current }: SongItemPros) =>
-  song.track && (
-    <div
-      className={[
-        styles.Item,
-        song.track.preview_url !== null ? styles.Enabled : styles.Disabled,
-      ].join(' ')}
-      // biome-ignore lint/a11y/useSemanticElements: clickable div is fine
-      role="button"
-      tabIndex={0}
-      onClick={songClicked}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter') {
-          songClicked();
-        }
-      }}
-    >
-      <div className={styles.Index}>
-        <span className={current ? 'playing' : ''}>{index + 1}</span>
-        <Play className={styles.IndexPlay} />
-      </div>
+const SongItem = ({ song, index, current }: SongItemPros) => {
+  const dispatch = useAppDispatch();
+  const previewAvailable = song.track?.preview_url !== null;
+
+  const handleSongClick = (): void => {
+    if (previewAvailable) {
+      dispatch(loadSong(song));
+    }
+  };
+
+  return (
+    song.track && (
+      <div
+        className={[
+          styles.Item,
+          previewAvailable ? styles.Enabled : styles.Disabled,
+        ].join(' ')}
+        // biome-ignore lint/a11y/useSemanticElements: clickable div is fine
+        role="button"
+        tabIndex={0}
+        onClick={handleSongClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            handleSongClick();
+          }
+        }}
+      >
+        <div className={styles.Index}>
+          <span className={current ? 'playing' : ''}>{index + 1}</span>
+          <Play className={styles.IndexPlay} />
+        </div>
 
-      <div className={styles.Title}>
-        {song.track.album.images?.[0]?.url && (
-          <img src={song.track.album.images[0].url} alt="cover img" />
-        )}
-        <div className={styles.NameContainer}>
-          <div className={styles.Name}>
-            <span className={current ? 'playing' : ''}>{song.track.name}</span>
+        <div className={styles.Title}>
+          {song.track.album.images?.[0]?.url && (
+            <img src={song.track.album.images[0].url} alt="cover img" />
+          )}
+          <div className={styles.NameContainer}>
+            <div className={styles.Name}>
+              <span className={current ? 'playing' : ''}>
+                {song.track.name}
+              </span>
+            </div>
+            {song.track.explicit && <span className={styles.Explicit}>e</span>}
+            <span
+              className={[
+                styles.Artist,
+                song.track.explicit ? styles.Artist_sub : styles.Artist_badge,
+              ].join(', ')}
+            >
+              {song.track.artists[0].name}
+            </span>
           </div>
-          {song.track.explicit && <span className={styles.Explicit}>e</span>}
-          <span
-            className={[
-              styles.Artist,
-              song.track.explicit ? styles.Artist_sub : styles.Artist_badge,
-            ].join(', ')}
-          >
-            {song.track.artists[0].name}
-          </span>
         </div>
-      </div>
-      <div>{song.track.album.name}</div>
-      <div>{formatDate(song.added_at)}</div>
-      <div className={styles.Length}>
-        {msToMinutesAndSeconds(song.track.duration_ms)}
-        {/* should be in another column */}
-        {/* <button type="button" className={styles.More} tabIndex={-1}>
+        <div>{song.track.album.name}</div>
+        <div>{formatDate(song.added_at)}</div>
+        <div className={styles.Length}>
+          {msToMinutesAndSeconds(song.track.duration_ms)}
+          {/* should be in another column */}
+          {/* <button type="button" className={styles.More} tabIndex={-1}>
                 ...
               </button> */}
+        </div>
       </div>
-    </div>
+    )
   );
+};
 
 export default SongItem;