Endpoints

Author: Julia Miroshnichenko22

src/pages/Discover.jsx

@@ -1,9 +1,12 @@
 import { Error, Loader, SongCard } from '../components';
 import { genres } from '../assets/constants';
+import { useGetTopChartsQuery } from '../redux/services/shazamCore';
 
 const Discover = () => {
+  const { data, isFetching, error } = useGetTopChartsQuery();
   const genreTitle = 'Pop';
 
+  console.log(data);
   return (
     <div className="flex flex-col">
       <div className="flex flex-col items-center justify-between w-full mt-4 mb-10 sm:flex-row">

src/redux/services/shazamCore.js

@@ -0,0 +1,24 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+//delete - if path is ok
+// fetch('https://shazam.p.rapidapi.com/charts/track', options)
+//   .then((response) => response.json())
+//   .then((response) => console.log(response))
+//   .catch((err) => console.error(err));
+
+export const shazamCoreApi = createApi({
+  reducerPath: 'shazamCoreApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: 'https://shazam.p.rapidapi.com',
+    prepareHeaders: (headers) => {
+      headers.set('X-RapidAPI-Key', '367d97e0d1msh37aed431a4b5cf2p1cd6dcjsn5ab9c1c9041d');
+
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    getTopCharts: builder.query({ query: '/charts/track' }),
+  }),
+});
+
+export const { useGetTopChartsQuery } = shazamCoreApi;

src/redux/store.js

@@ -1,9 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit';
 
 import playerReducer from './features/playerSlice';
+import { shazamCoreApi } from './services/shazamCore';
 
 export const store = configureStore({
   reducer: {
+    [shazamCoreApi.reducerPath]: shazamCoreApi.reducer,
     player: playerReducer,
   },
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(shazamCoreApi.middleware),
 });