Merge all pokeapi related code into one single pokeApi.ts, and relocate it into app/services

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);

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<TypeListResponseData, void>({
+      query: () => ({ url: 'type', fetchAllPages: true }),
+      transformResponse: (response: RegionListResponseData) => {
+        return {
+          ...response,
+          results: [{ name: 'All Types', url: '' }, ...response.results],
+        };
+      },
+    }),
+  }),
+});
+
+export const { useGetTypeListQuery } = pokeApi;

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,
 });
 

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';
 

src/features/Filters/filterApi.ts

@@ -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<TypeListResponseData, void>({
-      query: () => ({ url: 'type', fetchAllPages: true }),
-      transformResponse: (response: RegionListResponseData) => {
-        return {
-          ...response,
-          results: [{ name: 'All Types', url: '' }, ...response.results],
-        };
-      },
-    }),
-  }),
-});
-
-export const { useGetTypeListQuery } = filterApi;

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<FilterState> = 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;

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),
     });
   });