I have been working on AroundYou.jsx and shazamcore.js files. this is code of AroundYou.jsx
`
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useSelector } from 'react-redux';
import { Error, Loader, SongCard } from '../components';
import { useGetSongsByCountryQuery } from '../redux/services/shazamCore';
const AroundYou = () => {
const [country, setCountry] = useState('');
const [loading, setLoading] = useState(true);
const { activeSong, isPlaying } = useSelector((state) => state.player);
const { data, isFetching, error } = useGetSongsByCountryQuery(country);
useEffect(() => {
axios
.get('https://geo.ipify.org/api/v2/country?apiKey=at_ef7le15cTGC3YmmUvT5jlY5nUZgUL')
.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;
`
this is code for shazamCore.jsx
`
import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';
export const shazemCoreApi = createApi({
reducerPath: 'shazamCoreApi',
baseQuery: fetchBaseQuery({
baseUrl: 'https://shazam-core.p.rapidapi.com/v1',
prepareHeaders: (headers) => {
headers.set('X-RapidAPI-Key', '43e9e371cfmshbc3fc2a1afeaf39p134a77jsna5e15b538483');
return headers;
}
}),
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}`}),
getArtistDetails: builder.query({ query: (artistId) => `/artists/details?artist_id=${artistId}`}),
getSongsByCountry: builder.query({ query: (countryCode) => `/charts/country?country_code=${countryCode}` }),
}),
})
export const {
useGetTopChartsQuery,
useGetSongDetailsQuery,
useGetSongRelatedQuery,
useGetArtistDetailsQuery,
useGetSongsByCountryQuery,
} = shazemCoreApi;
`
While looking at the console I got error 422.
I don't know why the data is not being retrieved.
I tried using the IP address and it worked. But I want it to work without the IP address so that people from different locations can use them.