Add Song details

.eslintrc.js

@@ -57,5 +57,6 @@ module.exports = {
     'comma-dangle': 0,
     'no-confusing-arrow': 0,
     'import/no-unresolved': 0,
+    'operator-linebreak': 0,
   },
 };

src/components/DetailsHeader.jsx

@@ -1,5 +1,44 @@
-const DetailsHeader = () => (
-  <div>DetailsHeader</div>
-);
+import { Link } from 'react-router-dom';
+
+const DetailsHeader = ({ artistId, artistData, songData }) => {
+  const artist = artistData?.artists[artistId].attributes;
+
+  return (
+    <div className="relative w-full flex flex-col">
+      <div className="w-full bg-gradient-to-l from-transparent to-black sm:h-48 h-28" />
+
+      <div className="absolute inset-0 flex items-center">
+        <img
+          src={
+            artistId
+              ? artist.artwork?.url.replace('{w}', '500').replace('{h}', '500')
+              : songData?.images.coverart
+          }
+          alt="art"
+          className="sm:w-48 w-28 sm:h-48 h-28 rounded-full object-cover border-2 shadow-xl shadow-black"
+        />
+
+        <div className="ml-5">
+          <p className="font-bold sm:text-3xl text-xl text-white">
+            {artistId ? artist.name : songData?.title}
+          </p>
+          {!artistId && (
+            <Link to={`/artists/${songData?.artists[0].adamid}`}>
+              <p className="text-base text-gray-400 mt-2">
+                {songData?.subtitle}
+              </p>
+            </Link>
+          )}
+
+          <p className="text-base text-gray-400 mt-2">
+            {artistId ? artist?.genreNames[0] : songData?.genres?.primary}
+          </p>
+        </div>
+      </div>
+
+      <div className="w-full sm:h-44 h-24" />
+    </div>
+  );
+};
 
 export default DetailsHeader;

src/components/RelatedSongs.jsx

@@ -1,5 +1,30 @@
-const RelatedSongs = () => (
-  <div>Loader</div>
+import SongBar from './SongBar';
+
+const RelatedSongs = ({
+  isPlaying,
+  activeSong,
+  data,
+  handlePlay,
+  handlePause,
+  artistId,
+}) => (
+  <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}-${artistId}`}
+          song={song}
+          i={i}
+          artistId={artistId}
+          isPlaying={isPlaying}
+          activeSong={activeSong}
+          handlePauseClick={handlePause}
+          handlePlayClick={handlePlay}
+        />
+      ))}
+    </div>
+  </div>
 );
 
 export default RelatedSongs;

src/pages/SongDetails.jsx

@@ -1,3 +1,71 @@
-const SongDetails = () => <div>SongDetails</div>;
+import { useParams } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+
+import { DetailsHeader, Error, Loader, RelatedSongs } from '../components';
+import { setActiveSong, playPause } from '../redux/features/playerSlice';
+import {
+  useGetSongDetailsQuery,
+  useGetSongRelatedQuery,
+} from '../redux/services/shazamCore';
+
+const SongDetails = () => {
+  const dispatch = useDispatch();
+  const { activeSong, isPlaying } = useSelector((state) => state.player);
+  const { songid } = useParams();
+  const { data: songData, isFetching: isFetchingSongDetails } =
+    useGetSongDetailsQuery({ songid });
+  const {
+    data: relatedSongs,
+    isFetch: isFetchingRelatedSongs,
+    error,
+  } = useGetSongRelatedQuery({ songid });
+
+  const handlePause = () => {
+    dispatch(playPause(false));
+  };
+
+  const handlePlay = (song, i) => {
+    dispatch(setActiveSong({ song, data: relatedSongs, i }));
+    dispatch(playPause(true));
+  };
+
+  if (isFetchingSongDetails || isFetchingRelatedSongs) {
+    return <Loader title="Searching song details" />;
+  }
+
+  if (error) {
+    return <Error />;
+  }
+
+  return (
+    <div className="flex flex-col ">
+      <DetailsHeader artistId="" songData={songData} />
+      <div className="mb-10">
+        <h2 className="text-white text-3xl font-bold">Lyrics:</h2>
+        <div className="mt-5">
+          {songData?.sections[1].type === 'LYRICS' ? (
+            songData?.sections[1].text.map((line, i) => (
+              <p className="text-gray-400 text-base my-1" key={i}>
+                {line}
+              </p>
+            ))
+          ) : (
+            <p className="text-gray-400 text-base my-1">
+              Sorry, no lyrics found!
+            </p>
+          )}
+        </div>
+      </div>
+
+      <RelatedSongs
+        data={relatedSongs}
+        isPlaying={isPlaying}
+        activeSong={activeSong}
+        handlePause={handlePause}
+        handlePlay={handlePlay}
+      />
+    </div>
+  );
+};
 
 export default SongDetails;

src/redux/services/shazamCore.js

@@ -15,7 +15,17 @@ export const shazamCoreApi = createApi({
   }),
   endpoints: (builder) => ({
     getTopCharts: builder.query({ query: () => '/charts/world' }),
+    getSongDetails: builder.query({
+      query: ({ songid }) => `/tracks/details?track_id=${songid}`,
+    }),
+    getSongRelated: builder.query({
+      query: ({ songid }) => `/tracks/related?track_id=${songid}`,
+    }),
   }),
 });
 
-export const { useGetTopChartsQuery } = shazamCoreApi;
+export const {
+  useGetTopChartsQuery,
+  useGetSongDetailsQuery,
+  useGetSongRelatedQuery,
+} = shazamCoreApi;