songDetails related songs

src/components/RelatedSongs.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import SongBar from './SongBar';
+
+const RelatedSongs = ({ data, artistId, isPlaying, activeSong, handlePauseClick, handlePlayClick }) => (
+  <div className="flex flex-col">
+    <h1 className="font-bold text-3xl text-white">Related Songs:</h1>
+
+    <div className="mt-6 w-full flex flex-col">
+      {data.map((song, i) => (
+        <SongBar
+          key={song.key}
+          song={song}
+          i={i}
+          artistId={artistId}
+          isPlaying={isPlaying}
+          activeSong={activeSong}
+          handlePauseClick={handlePauseClick}
+          handlePlayClick={handlePlayClick}
+        />
+      ))}
+    </div>
+  </div>
+);
+
+export default RelatedSongs;

src/components/index.js

@@ -5,6 +5,7 @@ import TopPlay from './TopPlay';
 import ArtistCard from './ArtistCard';
 import DetailsHeader from './DetailsHeader';
 import SongBar from './SongBar';
+import RelatedSongs from './RelatedSongs';
 
 export {
   TopPlay,
@@ -14,4 +15,5 @@ export {
   ArtistCard,
   DetailsHeader,
   SongBar,
+  RelatedSongs,
 };

src/pages/ArtistDetails.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
-import { DetailsHeader, SongBar } from '../components';
+import { DetailsHeader, RelatedSongs } from '../components';
 
 import { useFetchArtistDetailsQuery, useGetSongDetailsQuery } from '../redux/services/shazamCore';
 import { setActiveSong, playPause } from '../redux/features/playerSlice';
 
 const ArtistDetails = () => {
-  const { songid, id: artistId } = useParams();
   const dispatch = useDispatch();
+  const { songid, id: artistId } = useParams();
   const { activeSong, isPlaying } = useSelector((state) => state.player);
   const { data: songData, isFetching: isFetchinSongDetails } = useGetSongDetailsQuery({ songid });
   const {
@@ -44,25 +44,14 @@ const ArtistDetails = () => {
         songData={songData}
       />
 
-      <div className="flex flex-col">
-        <h1 className="font-bold text-3xl text-white">Related Songs:</h1>
-
-        <div className="mt-6 w-full flex flex-col">
-          {artistData
-          && Object.values(artistData?.songs).map((song, i) => (
-            <SongBar
-              key={song.key}
-              song={song}
-              i={i}
-              artistId={artistId}
-              isPlaying={isPlaying}
-              activeSong={activeSong}
-              handlePauseClick={handlePauseClick}
-              handlePlayClick={handlePlayClick}
-            />
-          ))}
-        </div>
-      </div>
+      <RelatedSongs
+        data={Object.values(artistData?.songs)}
+        artistId={artistId}
+        isPlaying={isPlaying}
+        activeSong={activeSong}
+        handlePauseClick={handlePauseClick}
+        handlePlayClick={handlePlayClick}
+      />
     </div>
   );
 };

src/pages/SongDetails.jsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { DetailsHeader } from '../components';
+import { useSelector, useDispatch } from 'react-redux';
+import { DetailsHeader, RelatedSongs } from '../components';
 
+import { setActiveSong, playPause } from '../redux/features/playerSlice';
 import { useFetchArtistDetailsQuery, useGetSongDetailsQuery } from '../redux/services/shazamCore';
 
 const SongDetails = () => {
+  const dispatch = useDispatch();
   const { songid, id: artistId } = useParams();
+  const { activeSong, isPlaying } = useSelector((state) => state.player);
   const { data: songData, isFetching: isFetchinSongDetails } = useGetSongDetailsQuery({ songid });
   const {
     data: artistData,
@@ -23,6 +27,15 @@ const SongDetails = () => {
 
   if (error) return 'Something went wrong...';
 
+  const handlePauseClick = () => {
+    dispatch(playPause(false));
+  };
+
+  const handlePlayClick = (song, i) => {
+    dispatch(setActiveSong({ song, songData, i }));
+    dispatch(playPause(true));
+  };
+
   return (
     <div className="flex flex-col">
       <DetailsHeader
@@ -34,6 +47,16 @@ const SongDetails = () => {
       <div className="flex flex-col">
         <h1 className="font-bold text-3xl text-white">Related Songs:</h1>
       </div>
+
+      <RelatedSongs
+        data={songData}
+        artistId={artistId}
+        isPlaying={isPlaying}
+        activeSong={activeSong}
+        handlePauseClick={handlePauseClick}
+        handlePlayClick={handlePlayClick}
+      />
+
     </div>
   );
 };