diff --git a/src/pages/Search.jsx b/src/pages/Search.jsx index 3223815..7288e42 100644 --- a/src/pages/Search.jsx +++ b/src/pages/Search.jsx @@ -1,5 +1,44 @@ -const Search = () => ( -
Search
-); +import { useSelector } from 'react-redux'; +import { useParams } from 'react-router-dom'; + +import { Error, Loader, SongCard } from '../components'; +import { useGetSongsBySearchQuery } from '../redux/services/shazamCore'; + +const Search = () => { + const { searchTerm } = useParams(); + const { activeSong, isPlaying } = useSelector((state) => state.player); + const { data, isFetching, error } = useGetSongsBySearchQuery(searchTerm); + + const songs = data?.tracks?.hits?.map((song) => song.track); + + if (isFetching) { + return ; + } + + if (error) { + return ; + } + + return ( +
+

+ Showing result for {searchTerm} +

+ +
+ {songs?.map((song, i) => ( + + ))} +
+
+ ); +}; export default Search; diff --git a/src/redux/services/shazamCore.js b/src/redux/services/shazamCore.js index d883d79..918ba84 100644 --- a/src/redux/services/shazamCore.js +++ b/src/redux/services/shazamCore.js @@ -30,6 +30,10 @@ export const shazamCoreApi = createApi({ getSongsByGenre: builder.query({ query: (genre) => `/charts/genre-world?genre_code=${genre}`, }), + getSongsBySearch: builder.query({ + query: (searchTerm) => + `/search/multi?search_type=SONGS_ARTISTS&query=${searchTerm}`, + }), }), }); @@ -40,4 +44,5 @@ export const { useGetArtistDetailsQuery, useGetSongsByCountryQuery, useGetSongsByGenreQuery, + useGetSongsBySearchQuery, } = shazamCoreApi;