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

Removed getRegionPokemonList endpoint and related tests

develop
Jason Zhu 2023-04-02 21:07:53 +10:00
parent f4fd616b34
commit 89b5b976e1
12 changed files with 33 additions and 4314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/features/Pokedex/Filters/Filters.test.ts
View File

@ -1,9 +1,13 @@
import { createOptionElements } from './Filters';
import {
useGetRegionPokemons,
createRegionPokemonListOptionElements,
} from './Filters';
describe('Filters', () => {
describe('test utility functions', () => {
test('createOptionElements works correctly', () => {
const optionElements = createOptionElements();
const { data } = useGetRegionPokemons();
const optionElements = createRegionPokemonListOptionElements(data);
expect(optionElements[0].props.children).toBe('Kanto (1-151)');
expect(optionElements[1].props.children).toBe('Johto (152-251)');
expect(optionElements[2].props.children).toBe('Hoenn (252-386)');

59
src/features/Pokedex/Filters/Filters.tsx
View File

@ -1,8 +1,5 @@
import React, { useEffect } from 'react';
import {
useGetTypeListQuery,
useGetRegionPokemonListQuery,
} from 'features/Pokedex/pokedexApi';
import { useGetTypeListQuery } from 'features/Pokedex/pokedexApi';
import {
setSelectedRegion,
setSelectedType,
@ -10,7 +7,6 @@ import {
setFetchingRegionPokemonList,
} from 'features/Pokedex/pokedexSlice';
import { useAppDispatch, useAppSelector } from 'app/hooks';
import RegionPokemonList from 'features/Pokedex/RegionPokemonsList.json';
const useGetSortOptions = () => {
const sortOptions = [
@ -20,20 +16,31 @@ const useGetSortOptions = () => {
return { data: sortOptions };
};
interface RegionPokemonIdRange {
export const useGetRegionPokemons = () => {
return {
data: [
{ region: 'kanto', startid: 1, endid: 151 },
{ region: 'johto', startid: 152, endid: 251 },
{ region: 'hoenn', startid: 252, endid: 386 },
{ region: 'sinnoh', startid: 387, endid: 493 },
{ region: 'unova', startid: 494, endid: 649 },
{ region: 'kalos', startid: 650, endid: 721 },
{ region: 'alola', startid: 722, endid: 809 },
{ region: 'galar', startid: 810, endid: 898 },
],
};
};
export type RegionPokemonRange = {
region: string;
startid: number;
endid: number;
}
};
interface RegionPokemonListData {
[key: string]: RegionPokemonIdRange;
}
const regionPokemonListData: RegionPokemonListData = RegionPokemonList;
export const createOptionElements = () => {
const data = regionPokemonListData;
return Object.entries(data).map(([region, { startid, endid }]) => {
export const createRegionPokemonListOptionElements = (
data: RegionPokemonRange[],
) => {
return data.map(({ region, startid, endid }) => {
const value = `${region}`;
const label = `${
region.charAt(0).toUpperCase() + region.slice(1)
@ -61,8 +68,9 @@ const Filters = () => {
const { data: typesData, isLoading: typesLoading } = useGetTypeListQuery();
const { data: sortOptions } = useGetSortOptions();
const { data: regionPokemonListData } = useGetRegionPokemons();
// Send the first region as the default selected region
// Action when loading the component
useEffect(() => {
const initailRegion = Object.keys(regionPokemonListData)[0];
if (initailRegion) {
@ -90,22 +98,9 @@ const Filters = () => {
}
}, [typesData]);
const selectedRegion = useAppSelector(state => state.pokedex.selectedRegion);
const { refetch: refetchRegionPokemonList } = useGetRegionPokemonListQuery(
selectedRegion,
{ skip: !selectedRegion },
const optionElements = createRegionPokemonListOptionElements(
regionPokemonListData,
);
useEffect(() => {
if (selectedRegion) {
dispatch(setFetchingRegionPokemonList(true));
refetchRegionPokemonList();
dispatch(setFetchingRegionPokemonList(false));
}
}, [selectedRegion, refetchRegionPokemonList]);
const optionElements = createOptionElements();
return (
<>
<div className="filter__container">

34
src/features/Pokedex/RegionPokemonsList.json
View File

@ -1,34 +0,0 @@
{
"Kanto": {
"startid": 1,
"endid": 151
},
"Johto": {
"startid": 152,
"endid": 251
},
"Hoenn": {
"startid": 252,
"endid": 386
},
"Sinnoh": {
"startid": 387,
"endid": 494
},
"Unova": {
"startid": 495,
"endid": 649
},
"Kalos": {
"startid": 650,
"endid": 721
},
"Alola": {
"startid": 722,
"endid": 809
},
"Galar": {
"startid": 810,
"endid": 898
}
}

12
src/features/Pokedex/__test__/pokedexApi.test.ts
View File

@ -114,17 +114,5 @@ describe('pokedexApi', () => {
// @ts-ignore
expect(pokemonListData?.previous).toBeUndefined();
});
// TODO: decide whether remove these test handlers, as logic of getting Pokemon List for a Region is no longer correct
test('query getRegionPokemonList for johto should return correct data in list', async () => {
await store.dispatch(
pokedexApi.endpoints.getRegionPokemonList.initiate('johto'),
);
const pokemonListData = pokedexApi.endpoints.getRegionPokemonList.select(
'johto',
)(store.getState()).data;
expect(pokemonListData).toHaveLength(19);
}, 100000000000);
});
});

1036
src/features/Pokedex/__test__/responses/area_blackthorn-city-area.json
View File

File diff suppressed because it is too large Load Diff

1090
src/features/Pokedex/__test__/responses/area_burned-tower-1f.json
View File

File diff suppressed because it is too large Load Diff

1868
src/features/Pokedex/__test__/responses/area_burned-tower-b1f.json
View File

File diff suppressed because it is too large Load Diff

36
src/features/Pokedex/__test__/responses/location_blackthorn-city.json
View File

@ -1,36 +0,0 @@
{
"areas": [
{
"name": "blackthorn-city-area",
"url": "https://pokeapi.co/api/v2/location-area/249/"
}
],
"game_indices": [
{
"game_index": 136,
"generation": {
"name": "generation-iv",
"url": "https://pokeapi.co/api/v2/generation/4/"
}
}
],
"id": 65,
"name": "blackthorn-city",
"names": [
{
"language": {
"name": "fr",
"url": "https://pokeapi.co/api/v2/language/5/"
},
"name": "Ebènelle"
},
{
"language": {
"name": "en",
"url": "https://pokeapi.co/api/v2/language/9/"
},
"name": "Blackthorn City"
}
],
"region": { "name": "johto", "url": "https://pokeapi.co/api/v2/region/2/" }
}

40
src/features/Pokedex/__test__/responses/location_burned-tower.json
View File

@ -1,40 +0,0 @@
{
"areas": [
{
"name": "burned-tower-1f",
"url": "https://pokeapi.co/api/v2/location-area/212/"
},
{
"name": "burned-tower-b1f",
"url": "https://pokeapi.co/api/v2/location-area/213/"
}
],
"game_indices": [
{
"game_index": 206,
"generation": {
"name": "generation-iv",
"url": "https://pokeapi.co/api/v2/generation/4/"
}
}
],
"id": 66,
"name": "burned-tower",
"names": [
{
"language": {
"name": "fr",
"url": "https://pokeapi.co/api/v2/language/5/"
},
"name": "Tour Cendrée"
},
{
"language": {
"name": "en",
"url": "https://pokeapi.co/api/v2/language/9/"
},
"name": "Burned Tower"
}
],
"region": { "name": "johto", "url": "https://pokeapi.co/api/v2/region/2/" }
}

74
src/features/Pokedex/__test__/responses/region_johto.json
View File

@ -1,74 +0,0 @@
{
"id": 2,
"locations": [
{
"name": "blackthorn-city",
"url": "https://pokeapi.co/api/v2/location/65/"
},
{ "name": "burned-tower", "url": "https://pokeapi.co/api/v2/location/66/" }
],
"main_generation": {
"name": "generation-ii",
"url": "https://pokeapi.co/api/v2/generation/2/"
},
"name": "johto",
"names": [
{
"language": {
"name": "ja-Hrkt",
"url": "https://pokeapi.co/api/v2/language/1/"
},
"name": "ジョウト地方"
},
{
"language": {
"name": "ko",
"url": "https://pokeapi.co/api/v2/language/3/"
},
"name": "성도지방"
},
{
"language": {
"name": "fr",
"url": "https://pokeapi.co/api/v2/language/5/"
},
"name": "Johto"
},
{
"language": {
"name": "de",
"url": "https://pokeapi.co/api/v2/language/6/"
},
"name": "Johto"
},
{
"language": {
"name": "it",
"url": "https://pokeapi.co/api/v2/language/8/"
},
"name": "Johto"
},
{
"language": {
"name": "en",
"url": "https://pokeapi.co/api/v2/language/9/"
},
"name": "Johto"
}
],
"pokedexes": [
{ "name": "original-johto", "url": "https://pokeapi.co/api/v2/pokedex/3/" },
{ "name": "updated-johto", "url": "https://pokeapi.co/api/v2/pokedex/7/" }
],
"version_groups": [
{
"name": "gold-silver",
"url": "https://pokeapi.co/api/v2/version-group/3/"
},
{ "name": "crystal", "url": "https://pokeapi.co/api/v2/version-group/4/" },
{
"name": "heartgold-soulsilver",
"url": "https://pokeapi.co/api/v2/version-group/10/"
}
]
}

63
src/features/Pokedex/pokedexApi.ts
View File

@ -66,68 +66,6 @@ export const pokedexApi = createApi({
getArea: builder.query<AreaResponseData, number | string>({
query: IdOrName => ({ url: `location-area/${IdOrName}` }),
}),
// TODO: decide whether remove this endpoint, as logic of getting PokemonList for a region is no longer correct
getRegionPokemonList: builder.query<PokemonListItem[], number | string>({
async queryFn(regionIdOrName, api) {
api.dispatch(setFetchingRegionPokemonList(true));
// Get region data
const regionData: RegionResponseData = await api
.dispatch(pokedexApi.endpoints.getRegion.initiate(regionIdOrName))
.unwrap();
// Get location data
const locationDataList: LocationResponseData[] = await Promise.all(
regionData.locations.map(location =>
api
.dispatch(
pokedexApi.endpoints.getLocation.initiate(location.name),
)
.unwrap(),
),
);
// Get area datas
const areaDataList: AreaResponseData[] = await Promise.all(
locationDataList
.flatMap(locationData => locationData.areas)
.map(area =>
api
.dispatch(pokedexApi.endpoints.getArea.initiate(area.name))
.unwrap(),
),
);
// Collect unique Pokemon
const uniquePokemonList = new Set<nameUrlPair>();
areaDataList.forEach(areaData => {
areaData.pokemon_encounters.forEach(pokemon => {
uniquePokemonList.add(pokemon.pokemon);
});
});
// Get Pokemon data
const pokemonDataList: PokemonListItem[] = await Promise.all(
Array.from(uniquePokemonList).map(pokemon =>
api
.dispatch(pokedexApi.endpoints.getPokemon.initiate(pokemon.name))
.unwrap()
.then(pokemonData => {
return {
name: pokemonData.name,
id: pokemonData.id,
type: pokemonData.types.map(type => type.type.name),
image: pokemonData.sprites.other.dream_world.front_default,
};
}),
),
);
api.dispatch(setFetchingRegionPokemonList(false));
return { data: Array.from(pokemonDataList) };
},
}),
}),
});
@ -140,5 +78,4 @@ export const {
useGetTypeQuery,
useGetAreaQuery,
useGetLocationQuery,
useGetRegionPokemonListQuery,
} = pokedexApi;

27
src/mocks/handlers.ts
View File

@ -5,12 +5,6 @@ import regionList from 'features/Pokedex/__test__/responses/regionList.json';
import typeList from 'features/Pokedex/__test__/responses/typeList.json';
import pokemonListPg1 from 'features/Pokedex/__test__/responses/pokemonListPage1.json';
import pokemonListPg2 from 'features/Pokedex/__test__/responses/pokemonListPage2.json';
import region_johto from 'features/Pokedex/__test__/responses/region_johto.json';
import location_blackthorn_city from 'features/Pokedex/__test__/responses/location_blackthorn-city.json';
import location_burned_tower from 'features/Pokedex/__test__/responses/location_burned-tower.json';
import area_blackthorn_city_area from 'features/Pokedex/__test__/responses/area_blackthorn-city-area.json';
import area_burned_tower_1f from 'features/Pokedex/__test__/responses/area_burned-tower-1f.json';
import area_burned_tower_b1f from 'features/Pokedex/__test__/responses/area_burned-tower-b1f.json';
export const handlers = [
// mock https://pokeapi.co/api/v2/region/1
@ -40,25 +34,4 @@ export const handlers = [
return res(ctx.json(pokemonListPg2));
}
}),
// getRegionPokemonList
// TODO: decide whether remove these test handlers, as logic of getting Pokemon List for a Region is no longer correct
rest.get('https://pokeapi.co/api/v2/region/johto', (req, res, ctx) => {
return res(ctx.json(region_johto));
}),
rest.get('https://pokeapi.co/api/v2/location/65', (req, res, ctx) => {
return res(ctx.json(location_blackthorn_city));
}),
rest.get('https://pokeapi.co/api/v2/location/66', (req, res, ctx) => {
return res(ctx.json(location_burned_tower));
}),
rest.get('https://pokeapi.co/api/v2/location-area/249', (req, res, ctx) => {
return res(ctx.json(area_blackthorn_city_area));
}),
rest.get('https://pokeapi.co/api/v2/location-area/212', (req, res, ctx) => {
return res(ctx.json(area_burned_tower_1f));
}),
rest.get('https://pokeapi.co/api/v2/location-area/213', (req, res, ctx) => {
return res(ctx.json(area_burned_tower_b1f));
}),
];