Jason
/
pokertk
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

Rename pokeApi to pokeRestApi

graphql
Jason Zhu 2023-06-04 12:54:01 +10:00
parent cfd9301793
commit 9cb23006ed
8 changed files with 45 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/services/pokeApi.test.ts → src/app/services/pokeRestApi.test.ts
View File

@ -1,7 +1,7 @@
import { pokedexSlice } from 'features/Pokedex/pokedexSlice'; import { pokedexSlice } from 'features/Pokedex/pokedexSlice';
import { pokeApi } from 'app/services/pokeApi'; import { pokeRestApi } from 'app/services/pokeRestApi';
import { filterSlice } from 'features/Filters/filterSlice'; import { filterSlice } from 'features/Filters/filterSlice';
import { getIdFromUrl } from 'app/services/pokeApi'; import { getIdFromUrl } from 'app/services/pokeRestApi';
import { configureStore } from '@reduxjs/toolkit'; import { configureStore } from '@reduxjs/toolkit';
@ -15,25 +15,25 @@ import {
let store: AppStore; let store: AppStore;
describe('pokeApi', () => { describe('pokeRestApi', () => {
beforeEach(() => { beforeEach(() => {
store = configureStore({ store = configureStore({
reducer: { reducer: {
pokedex: pokedexSlice.reducer, pokedex: pokedexSlice.reducer,
filter: filterSlice.reducer, filter: filterSlice.reducer,
[pokeApi.reducerPath]: pokeApi.reducer, [pokeRestApi.reducerPath]: pokeRestApi.reducer,
}, },
middleware: getDefaultMiddleware => middleware: getDefaultMiddleware =>
getDefaultMiddleware().concat(pokeApi.middleware), getDefaultMiddleware().concat(pokeRestApi.middleware),
}); });
}); });
describe('JEST test against mock API', () => { describe('JEST test against mock API', () => {
describe('test getPokemon query', () => { describe('test getPokemon query', () => {
test('visit https://pokeapi.co/api/v2/pokemon/85 returns Dodrio', async () => { test('visit https://pokeapi.co/api/v2/pokemon/85 returns Dodrio', async () => {
await store.dispatch(pokeApi.endpoints.getPokemon.initiate(85)); await store.dispatch(pokeRestApi.endpoints.getPokemon.initiate(85));
const pokemon = pokeApi.endpoints.getPokemon.select(85)( const pokemon = pokeRestApi.endpoints.getPokemon.select(85)(
store.getState(), store.getState(),
).data as PokemonResponseData; ).data as PokemonResponseData;
expect(pokemon?.name).toBe('dodrio'); expect(pokemon?.name).toBe('dodrio');
@ -48,11 +48,13 @@ describe('pokeApi', () => {
describe('test getPokemonSpecies query', () => { describe('test getPokemonSpecies query', () => {
test('visit https://pokeapi.co/api/v2/pokemon-species/6/', async () => { test('visit https://pokeapi.co/api/v2/pokemon-species/6/', async () => {
await store.dispatch(pokeApi.endpoints.getPokemonSpecies.initiate(6)); await store.dispatch(
pokeRestApi.endpoints.getPokemonSpecies.initiate(6),
);
const pokemonSpecies = pokeApi.endpoints.getPokemonSpecies.select(6)( const pokemonSpecies = pokeRestApi.endpoints.getPokemonSpecies.select(
store.getState(), 6,
).data as PokemonSpeciesResponseData; )(store.getState()).data as PokemonSpeciesResponseData;
expect(pokemonSpecies?.evolution_chain.url).toBe( expect(pokemonSpecies?.evolution_chain.url).toBe(
'https://pokeapi.co/api/v2/evolution-chain/2/', 'https://pokeapi.co/api/v2/evolution-chain/2/',
); );
@ -62,13 +64,13 @@ describe('pokeApi', () => {
describe('test getPokemonSpecies query', () => { describe('test getPokemonSpecies query', () => {
test('visit https://pokeapi.co/api/v2/pokemon-species/6/', async () => { test('visit https://pokeapi.co/api/v2/pokemon-species/6/', async () => {
await store.dispatch( await store.dispatch(
pokeApi.endpoints.getPokemonSpeciesFromUrl.initiate( pokeRestApi.endpoints.getPokemonSpeciesFromUrl.initiate(
'https://pokeapi.co/api/v2/pokemon-species/6/', 'https://pokeapi.co/api/v2/pokemon-species/6/',
), ),
); );
const pokemonSpecies = const pokemonSpecies =
pokeApi.endpoints.getPokemonSpeciesFromUrl.select( pokeRestApi.endpoints.getPokemonSpeciesFromUrl.select(
'https://pokeapi.co/api/v2/pokemon-species/6/', 'https://pokeapi.co/api/v2/pokemon-species/6/',
)(store.getState()).data as PokemonSpeciesResponseData; )(store.getState()).data as PokemonSpeciesResponseData;
expect(pokemonSpecies?.evolution_chain.url).toBe( expect(pokemonSpecies?.evolution_chain.url).toBe(
@ -79,9 +81,9 @@ describe('pokeApi', () => {
describe('test getTypeList query', () => { describe('test getTypeList query', () => {
test('visit https://pokeapi.co/api/v2/type should return correct data in list', async () => { test('visit https://pokeapi.co/api/v2/type should return correct data in list', async () => {
await store.dispatch(pokeApi.endpoints.getTypeList.initiate()); await store.dispatch(pokeRestApi.endpoints.getTypeList.initiate());
const typeListData = pokeApi.endpoints.getTypeList.select()( const typeListData = pokeRestApi.endpoints.getTypeList.select()(
store.getState(), store.getState(),
).data as TypeListResponseData; ).data as TypeListResponseData;
expect(typeListData?.results).toHaveLength(typeListData.count + 1); expect(typeListData?.results).toHaveLength(typeListData.count + 1);
@ -90,11 +92,13 @@ describe('pokeApi', () => {
describe('test getEvolutionChain query', () => { describe('test getEvolutionChain query', () => {
test('visit https://pokeapi.co/api/v2/evolution-chain/2/', async () => { test('visit https://pokeapi.co/api/v2/evolution-chain/2/', async () => {
await store.dispatch(pokeApi.endpoints.getEvolutionChain.initiate(2)); await store.dispatch(
pokeRestApi.endpoints.getEvolutionChain.initiate(2),
);
const evolutionChainData = pokeApi.endpoints.getEvolutionChain.select( const evolutionChainData =
2, pokeRestApi.endpoints.getEvolutionChain.select(2)(store.getState())
)(store.getState()).data as EvolutionChainResponseData; .data as EvolutionChainResponseData;
expect(evolutionChainData?.chain.species.url).toBe( expect(evolutionChainData?.chain.species.url).toBe(
'https://pokeapi.co/api/v2/pokemon-species/4/', 'https://pokeapi.co/api/v2/pokemon-species/4/',
); );
@ -110,13 +114,13 @@ describe('pokeApi', () => {
describe('test getEvolutionChainFromUrl query', () => { describe('test getEvolutionChainFromUrl query', () => {
test('visit https://pokeapi.co/api/v2/evolution-chain/2/', async () => { test('visit https://pokeapi.co/api/v2/evolution-chain/2/', async () => {
await store.dispatch( await store.dispatch(
pokeApi.endpoints.getEvolutionChainFromUrl.initiate( pokeRestApi.endpoints.getEvolutionChainFromUrl.initiate(
'https://pokeapi.co/api/v2/evolution-chain/2/', 'https://pokeapi.co/api/v2/evolution-chain/2/',
), ),
); );
const evolutionChainData = const evolutionChainData =
pokeApi.endpoints.getEvolutionChainFromUrl.select( pokeRestApi.endpoints.getEvolutionChainFromUrl.select(
'https://pokeapi.co/api/v2/evolution-chain/2/', 'https://pokeapi.co/api/v2/evolution-chain/2/',
)(store.getState()).data as EvolutionChainResponseData; )(store.getState()).data as EvolutionChainResponseData;
expect(evolutionChainData?.chain.species.url).toBe( expect(evolutionChainData?.chain.species.url).toBe(

6
src/app/services/pokeApi.ts → src/app/services/pokeRestApi.ts
View File

@ -12,8 +12,8 @@ export const getIdFromUrl = (url: string) => {
return parseInt(urlParts[urlParts.length - 2]); return parseInt(urlParts[urlParts.length - 2]);
}; };
export const pokeApi = createApi({ export const pokeRestApi = createApi({
reducerPath: 'pokeApi', reducerPath: 'pokeRestApi',
baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }), baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
endpoints: builder => ({ endpoints: builder => ({
getTypeList: builder.query<TypeListResponseData, void>({ getTypeList: builder.query<TypeListResponseData, void>({
@ -54,4 +54,4 @@ export const {
useGetPokemonSpeciesFromUrlQuery, useGetPokemonSpeciesFromUrlQuery,
useGetEvolutionChainQuery, useGetEvolutionChainQuery,
useGetEvolutionChainFromUrlQuery, useGetEvolutionChainFromUrlQuery,
} = pokeApi; } = pokeRestApi;

6
src/app/store.ts
View File

@ -2,7 +2,7 @@ import { configureStore } from '@reduxjs/toolkit';
import { pokedexSlice } from 'features/Pokedex/pokedexSlice'; import { pokedexSlice } from 'features/Pokedex/pokedexSlice';
import { filterSlice } from 'features/Filters/filterSlice'; import { filterSlice } from 'features/Filters/filterSlice';
import { infoDialogSlice } from 'features/InfoDialog/infoDialogSlice'; import { infoDialogSlice } from 'features/InfoDialog/infoDialogSlice';
import { pokeApi } from './services/pokeApi'; import { pokeRestApi } from './services/pokeRestApi';
export const store = configureStore({ export const store = configureStore({
reducer: { reducer: {
@ -12,10 +12,10 @@ export const store = configureStore({
infoDialog: infoDialogSlice.reducer, infoDialog: infoDialogSlice.reducer,
// api slices // api slices
[pokeApi.reducerPath]: pokeApi.reducer, [pokeRestApi.reducerPath]: pokeRestApi.reducer,
}, },
middleware: getDefaultMiddleware => middleware: getDefaultMiddleware =>
getDefaultMiddleware().concat(pokeApi.middleware), getDefaultMiddleware().concat(pokeRestApi.middleware),
devTools: true, devTools: true,
}); });

2
src/features/Filters/Filters.tsx
View File

@ -8,7 +8,7 @@ import {
setSearchInput, setSearchInput,
initializeFilterSlice, initializeFilterSlice,
} from './filterSlice'; } from './filterSlice';
import { useGetTypeListQuery } from 'app/services/pokeApi'; import { useGetTypeListQuery } from 'app/services/pokeRestApi';
import { RegionPokemonRange } from './types/slice'; import { RegionPokemonRange } from './types/slice';
import './Filters.css'; import './Filters.css';

6
src/features/Filters/filterSlice.ts
View File

@ -6,7 +6,7 @@ import {
} from '@reduxjs/toolkit'; } from '@reduxjs/toolkit';
import { FilterState } from './types/slice'; import { FilterState } from './types/slice';
import { RegionPokemonRange } from './types/slice'; import { RegionPokemonRange } from './types/slice';
import { pokeApi } from 'app/services/pokeApi'; import { pokeRestApi } from 'app/services/pokeRestApi';
import { fetchPokemonsInTheRegion } from 'features/Pokedex/pokedexSlice'; import { fetchPokemonsInTheRegion } from 'features/Pokedex/pokedexSlice';
const initialState: FilterState = { const initialState: FilterState = {
@ -35,7 +35,7 @@ export const initializeFilterSlice = createAsyncThunk(
{ region: 'galar', startId: 810, endId: 898 }, { region: 'galar', startId: 810, endId: 898 },
]; ];
dispatch(pokeApi.endpoints.getTypeList.initiate()); dispatch(pokeRestApi.endpoints.getTypeList.initiate());
const sortOptions = [ const sortOptions = [
{ name: 'ID', value: 'id' }, { name: 'ID', value: 'id' },
@ -87,7 +87,7 @@ export const filterSlice: Slice<FilterState> = createSlice({
} }
}); });
builder.addMatcher( builder.addMatcher(
pokeApi.endpoints.getTypeList.matchFulfilled, pokeRestApi.endpoints.getTypeList.matchFulfilled,
(state, action) => { (state, action) => {
if (action.payload && action.payload.results.length > 0) { if (action.payload && action.payload.results.length > 0) {
const regionListResults = action.payload.results; const regionListResults = action.payload.results;

10
src/features/InfoDialog/infoDialogSlice.ts
View File

@ -1,7 +1,7 @@
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import type { Slice, PayloadAction } from '@reduxjs/toolkit'; import type { Slice, PayloadAction } from '@reduxjs/toolkit';
import { pokeApi } from 'app/services/pokeApi'; import { pokeRestApi } from 'app/services/pokeRestApi';
import { EvolutionSpeciesProps } from 'components/EvolutionSpecies'; import { EvolutionSpeciesProps } from 'components/EvolutionSpecies';
import { Stat } from 'components/InfoDialogComponent'; import { Stat } from 'components/InfoDialogComponent';
import { import {
@ -119,19 +119,19 @@ export const fetchSelectedPokemonInfo = createAsyncThunk(
try { try {
const selectedPokemon = await dispatch( const selectedPokemon = await dispatch(
pokeApi.endpoints.getPokemon.initiate(pokemonIdOrName), pokeRestApi.endpoints.getPokemon.initiate(pokemonIdOrName),
); );
if (selectedPokemon.data) { if (selectedPokemon.data) {
const selectedPokemonSpecies = await dispatch( const selectedPokemonSpecies = await dispatch(
pokeApi.endpoints.getPokemonSpeciesFromUrl.initiate( pokeRestApi.endpoints.getPokemonSpeciesFromUrl.initiate(
selectedPokemon.data.species.url, selectedPokemon.data.species.url,
), ),
); );
if (selectedPokemonSpecies.data) { if (selectedPokemonSpecies.data) {
const selectedPokemonEvolutionChain = await dispatch( const selectedPokemonEvolutionChain = await dispatch(
pokeApi.endpoints.getEvolutionChainFromUrl.initiate( pokeRestApi.endpoints.getEvolutionChainFromUrl.initiate(
selectedPokemonSpecies.data.evolution_chain.url, selectedPokemonSpecies.data.evolution_chain.url,
), ),
); );
@ -146,7 +146,7 @@ export const fetchSelectedPokemonInfo = createAsyncThunk(
await Promise.all( await Promise.all(
evolutionChainName.map(async name => { evolutionChainName.map(async name => {
const evolutionChainPokemon = await dispatch( const evolutionChainPokemon = await dispatch(
pokeApi.endpoints.getPokemon.initiate(name), pokeRestApi.endpoints.getPokemon.initiate(name),
); );
if (evolutionChainPokemon.data) { if (evolutionChainPokemon.data) {
evolutionChain.push({ evolutionChain.push({

6
src/features/Pokedex/__test__/pokedex.test.ts
View File

@ -10,7 +10,7 @@ import { AppStore } from 'app/store';
import { configureStore } from '@reduxjs/toolkit'; import { configureStore } from '@reduxjs/toolkit';
import { pokedexSlice } from 'features/Pokedex/pokedexSlice'; import { pokedexSlice } from 'features/Pokedex/pokedexSlice';
import { filterSlice } from 'features/Filters/filterSlice'; import { filterSlice } from 'features/Filters/filterSlice';
import { pokeApi } from 'app/services/pokeApi'; import { pokeRestApi } from 'app/services/pokeRestApi';
let store: AppStore; let store: AppStore;
@ -20,10 +20,10 @@ describe('pokedex Component', () => {
reducer: { reducer: {
pokedex: pokedexSlice.reducer, pokedex: pokedexSlice.reducer,
filter: filterSlice.reducer, filter: filterSlice.reducer,
[pokeApi.reducerPath]: pokeApi.reducer, [pokeRestApi.reducerPath]: pokeRestApi.reducer,
}, },
middleware: getDefaultMiddleware => middleware: getDefaultMiddleware =>
getDefaultMiddleware().concat(pokeApi.middleware), getDefaultMiddleware().concat(pokeRestApi.middleware),
}); });
}); });

4
src/features/Pokedex/pokedexSlice.ts
View File

@ -5,7 +5,7 @@ import { PokedexStateProps } from 'features/Pokedex/types/slice';
import { getStartAndEndIdsForRegion } from './utils'; import { getStartAndEndIdsForRegion } from './utils';
import { PokemonResponseData } from 'types/api'; import { PokemonResponseData } from 'types/api';
import { pokeApi } from 'app/services/pokeApi'; import { pokeRestApi } from 'app/services/pokeRestApi';
import { RootState } from 'app/store'; import { RootState } from 'app/store';
export const fetchPokemonsInTheRegion = createAsyncThunk< export const fetchPokemonsInTheRegion = createAsyncThunk<
@ -25,7 +25,7 @@ export const fetchPokemonsInTheRegion = createAsyncThunk<
); );
const pokemonList = pokemonIds.map(id => const pokemonList = pokemonIds.map(id =>
dispatch(pokeApi.endpoints.getPokemon.initiate(id)) dispatch(pokeRestApi.endpoints.getPokemon.initiate(id))
.unwrap() .unwrap()
.then(data => data), .then(data => data),
); );