addSearchComp

Author: Julia Miroshnichenko22

src/components/ArtistCard.jsx

@@ -1,5 +1,17 @@
-const ArtistCard = () => {
-  <div>ArtistCard</div>;
+import { useNavigate } from 'react-router-dom';
+
+const ArtistCard = (track) => {
+  const navigate = useNavigate();
+
+  return (
+    <div
+      className="flex flex-col w-[250px] p-4 bg-white/5 bg-opacity-80 backdrop-blur-sm animate-slideup rounded-lg cursor-pointer"
+      onClick={() => navigate(`/artists/${track?.artists[0].adamid}`)}
+    >
+      <img alt="artist" src={track?.images?.coverart} className="w-full h-56 rounded-lg" />
+      <p className="mt-4 font-semibold text-lg text-white  truncate">{track?.subtitle}</p>
+    </div>
+  );
 };
 
 export default ArtistCard;

src/components/TopPlay.jsx

@@ -66,7 +66,7 @@ const TopPlay = () => {
       <div className="w-full flex flex-col">
         <div className="flex flex-row justify-between items-center">
           <h2 className="text-white font-bold text-2xl">Top Charts</h2>
-          <link to="/top charts">
+          <link to="/top-charts">
             <p className="text-gray-300 text-base cursor-pointer">See more</p>
           </link>
         </div>

src/pages/AroundYou.jsx

@@ -1,5 +1,44 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
+import { axios } from 'axios';
+import { useSelector } from 'react-redux';
 
-const CountryTracks = () => <div>CountryTracks</div>;
+import { Error, Loader, SongCard } from '../components';
+import {useGetSongsForCountryQuery} from '../redux/services/shazamCore';
 
-export default CountryTracks;
+const AroundYou = () => {
+  const [country, setcountry] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [activeSong, isPlaying] = useSelector((state) => state.player);
+const {data, isFetching, error} = useGetSongsForCountryQuery (country)
+
+  useEffect(() => {
+    axios
+      .get(`https://geo.ipify.org/api/v2/country?apiKey=at_RQv8NLlRvVkI4Ibti3HqadiCwQxJm`)
+      .then((res) => setCountry(res?.data?.location?.country));
+      .catch((err) =>  console.log(err));
+      .finally(() => setLoading(false))
+  }, [country]);
+
+  if(isFetching && loading) return <Loader title="Loading songs around you"/>;
+
+  if(error && country) return <Error/>;
+
+  return <div className="flex flex-col">
+  <h2 className="font-bold text-3xl text-white text-left mt-4 mb-10">Around You <span className="font-black">{country}</span></h2>
+
+  <div className="flex flex-wrap sm:justify-start justify-center gap-8">
+  {data?.map((song, i) => (
+    <SongCard
+    key={song.key}
+    song={song}
+    isPlaying={isPlaying}
+    activeSong={activeSong}
+    data={data}
+    i={i}
+    />
+  ))}
+  </div>
+  </div>
+
+
+export default AroundYou;

src/pages/Search.jsx

@@ -1,5 +1,3 @@
-const Search = () => (
-  <div>Search</div>
-);
+const Search = () => <div>Search</div>;
 
 export default Search;

src/pages/TopArtists.jsx

@@ -1,3 +1,25 @@
-const TopArtists = () => <div>TopArtists</div>;
+import { ArtistCard, Loader, Error} from '../components';
+import {useGetTopChartsQuery} from '../redux/services/shazamCore';
+
+const TopArtists = () => {
+const {data, isFetching, error} = useGetTopChartsQuery()
+
+  if(isFetching) return <Loader title="Loading top charts"/>;
+
+  if(error) return <Error/>;
+
+  return <div className="flex flex-col">
+  <h2 className="font-bold text-3xl text-white text-left mt-4 mb-10">Top Artists</h2>
+
+  <div className="flex flex-wrap sm:justify-start justify-center gap-8">
+  {data?.map((track) => (
+    <ArtistCard
+    key={track.key}
+    track={track}
+    />
+  ))}
+  </div>
+  </div>
+
 
 export default TopArtists;

src/pages/TopCharts.jsx

@@ -1,3 +1,32 @@
-const TopCharts = () => <div>TopCharts</div>;
+import { useSelector } from 'react-redux';
+
+import { Error, Loader, SongCard } from '../components';
+import {useGetTopChartsQuery} from '../redux/services/shazamCore';
+
+const TopCharts = () => {
+  const [activeSong, isPlaying] = useSelector((state) => state.player);
+const {data, isFetching, error} = useGetTopChartsQuery()
+
+  if(isFetching) return <Loader title="Loading top charts"/>;
+
+  if(error) return <Error/>;
+
+  return <div className="flex flex-col">
+  <h2 className="font-bold text-3xl text-white text-left mt-4 mb-10">Discover Top Charts</h2>
+
+  <div className="flex flex-wrap sm:justify-start justify-center gap-8">
+  {data?.map((song, i) => (
+    <SongCard
+    key={song.key}
+    song={song}
+    isPlaying={isPlaying}
+    activeSong={activeSong}
+    data={data}
+    i={i}
+    />
+  ))}
+  </div>
+  </div>
+
 
 export default TopCharts;

src/redux/services/shazamCore.js

@@ -28,6 +28,9 @@ export const shazamCoreApi = createApi({
     getArtistDetails: builder.query({
       query: ({ artistId }) => `/artists/details?artist_id=${artistId}`,
     }),
+    getSongsForCountry: builder.query({
+      query: (countryCode) => `/charts.country?country_code=${countryCode}`,
+    }),
   }),
 });
 
@@ -36,4 +39,5 @@ export const {
   useGetSongDetailsQuery,
   useGetSongRelatedQuery,
   useGetArtistDetailsQuery,
+  useGetSongsForCountryQuery,
 } = shazamCoreApi;