diff --git a/src/features/Filters/filterApi.test.ts b/src/app/services/pokeApi.test.ts similarity index 68% rename from src/features/Filters/filterApi.test.ts rename to src/app/services/pokeApi.test.ts index 7a3b995..06a9fd5 100644 --- a/src/features/Filters/filterApi.test.ts +++ b/src/app/services/pokeApi.test.ts @@ -1,6 +1,6 @@ import { pokedexSlice } from 'features/Pokedex/pokedexSlice'; -import { filterApi } from './filterApi'; -import { filterSlice } from './filterSlice'; +import { pokeApi } from 'app/services/pokeApi'; +import { filterSlice } from '../../features/Filters/filterSlice'; import { configureStore } from '@reduxjs/toolkit'; import { AppStore } from 'app/store'; @@ -14,18 +14,18 @@ describe('filterApi', () => { reducer: { pokedex: pokedexSlice.reducer, filter: filterSlice.reducer, - [filterApi.reducerPath]: filterApi.reducer, + [pokeApi.reducerPath]: pokeApi.reducer, }, middleware: getDefaultMiddleware => - getDefaultMiddleware().concat(filterApi.middleware), + getDefaultMiddleware().concat(pokeApi.middleware), }); }); describe('JEST test against mock API', () => { test('visit https://pokeapi.co/api/v2/type should return correct data in list', async () => { - await store.dispatch(filterApi.endpoints.getTypeList.initiate()); + await store.dispatch(pokeApi.endpoints.getTypeList.initiate()); - const typeListData = filterApi.endpoints.getTypeList.select()( + const typeListData = pokeApi.endpoints.getTypeList.select()( store.getState(), ).data as TypeListResponseData; expect(typeListData?.results).toHaveLength(typeListData.count + 1); diff --git a/src/services/pokeapi/paginationBaseQuery.ts b/src/app/services/pokeApi.ts similarity index 70% rename from src/services/pokeapi/paginationBaseQuery.ts rename to src/app/services/pokeApi.ts index b32a3c3..536c5ab 100644 --- a/src/services/pokeapi/paginationBaseQuery.ts +++ b/src/app/services/pokeApi.ts @@ -1,4 +1,9 @@ -import { fetchBaseQuery, FetchArgs } from '@reduxjs/toolkit/query/react'; +import { + fetchBaseQuery, + FetchArgs, + createApi, +} from '@reduxjs/toolkit/query/react'; +import { RegionListResponseData, TypeListResponseData } from 'types/api'; export interface pokeApiFullListFetchArgs extends FetchArgs { fetchAllPages?: boolean; @@ -69,3 +74,21 @@ export const pokeApiBaseQuery = async ( return fetchBaseQuery({ baseUrl })(args, api, extra); } }; + +export const pokeApi = createApi({ + reducerPath: 'pokeApi', + baseQuery: pokeApiBaseQuery, + endpoints: builder => ({ + getTypeList: builder.query({ + query: () => ({ url: 'type', fetchAllPages: true }), + transformResponse: (response: RegionListResponseData) => { + return { + ...response, + results: [{ name: 'All Types', url: '' }, ...response.results], + }; + }, + }), + }), +}); + +export const { useGetTypeListQuery } = pokeApi; diff --git a/src/app/store.ts b/src/app/store.ts index 07be441..d664fde 100644 --- a/src/app/store.ts +++ b/src/app/store.ts @@ -1,7 +1,7 @@ import { configureStore } from '@reduxjs/toolkit'; import { pokedexSlice } from 'features/Pokedex/pokedexSlice'; import { filterSlice } from 'features/Filters/filterSlice'; -import { filterApi } from 'features/Filters/filterApi'; +import { pokeApi } from './services/pokeApi'; export const store = configureStore({ reducer: { @@ -10,10 +10,10 @@ export const store = configureStore({ filter: filterSlice.reducer, // api slices - [filterApi.reducerPath]: filterApi.reducer, + [pokeApi.reducerPath]: pokeApi.reducer, }, middleware: getDefaultMiddleware => - getDefaultMiddleware().concat(filterApi.middleware), + getDefaultMiddleware().concat(pokeApi.middleware), devTools: true, }); diff --git a/src/features/Filters/Filters.tsx b/src/features/Filters/Filters.tsx index a8f50b4..5c10cc6 100644 --- a/src/features/Filters/Filters.tsx +++ b/src/features/Filters/Filters.tsx @@ -11,7 +11,7 @@ import { setSortOptions, setSearchInput, } from './filterSlice'; -import { useGetTypeListQuery } from './filterApi'; +import { useGetTypeListQuery } from 'app/services/pokeApi'; import { RegionPokemonRange } from './types/slice'; import './Filters.css'; diff --git a/src/features/Filters/filterApi.ts b/src/features/Filters/filterApi.ts deleted file mode 100644 index 5cc4faf..0000000 --- a/src/features/Filters/filterApi.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { createApi } from '@reduxjs/toolkit/query/react'; -import { pokeApiBaseQuery } from '../../services/pokeapi/paginationBaseQuery'; -import { RegionListResponseData, TypeListResponseData } from 'types/api'; - -export const filterApi = createApi({ - reducerPath: 'filterApi', - baseQuery: pokeApiBaseQuery, - endpoints: builder => ({ - getTypeList: builder.query({ - query: () => ({ url: 'type', fetchAllPages: true }), - transformResponse: (response: RegionListResponseData) => { - return { - ...response, - results: [{ name: 'All Types', url: '' }, ...response.results], - }; - }, - }), - }), -}); - -export const { useGetTypeListQuery } = filterApi; diff --git a/src/features/Filters/filterSlice.ts b/src/features/Filters/filterSlice.ts index 4bbb8c5..b58bd54 100644 --- a/src/features/Filters/filterSlice.ts +++ b/src/features/Filters/filterSlice.ts @@ -1,9 +1,9 @@ import { createSlice, PayloadAction, Slice } from '@reduxjs/toolkit'; import { FilterState } from './types/slice'; import { RegionPokemonRange } from './types/slice'; -import { filterApi } from './filterApi'; +import { pokeApi } from 'app/services/pokeApi'; -filterApi.endpoints.getTypeList.initiate(); // initialize type list fetching +pokeApi.endpoints.getTypeList.initiate(); // initialize type list fetching const initialState: FilterState = { regionOptions: [], @@ -46,7 +46,7 @@ export const filterSlice: Slice = createSlice({ }, extraReducers: builder => { builder.addMatcher( - filterApi.endpoints.getTypeList.matchFulfilled, + pokeApi.endpoints.getTypeList.matchFulfilled, (state, action) => { if (action.payload && action.payload.results.length > 0) { const regionListResults = action.payload.results; diff --git a/src/features/Pokedex/__test__/pokedex.test.ts b/src/features/Pokedex/__test__/pokedex.test.ts index 0c6bda1..8333f01 100644 --- a/src/features/Pokedex/__test__/pokedex.test.ts +++ b/src/features/Pokedex/__test__/pokedex.test.ts @@ -10,7 +10,7 @@ import { AppStore } from 'app/store'; import { configureStore } from '@reduxjs/toolkit'; import { pokedexSlice } from 'features/Pokedex/pokedexSlice'; import { filterSlice } from 'features/Filters/filterSlice'; -import { filterApi } from 'features/Filters/filterApi'; +import { pokeApi } from 'app/services/pokeApi'; let store: AppStore; @@ -20,10 +20,10 @@ describe('pokedex Component', () => { reducer: { pokedex: pokedexSlice.reducer, filter: filterSlice.reducer, - [filterApi.reducerPath]: filterApi.reducer, + [pokeApi.reducerPath]: pokeApi.reducer, }, middleware: getDefaultMiddleware => - getDefaultMiddleware().concat(filterApi.middleware), + getDefaultMiddleware().concat(pokeApi.middleware), }); });