Consolidate types/interfaces for api

This commit is contained in:
Jason Zhu 2023-03-27 23:18:34 +11:00
parent 5d6c09642c
commit 9eb1f1f971
3 changed files with 81 additions and 46 deletions

View File

@ -1,14 +1,10 @@
import { import { pokedexApi } from 'features/Pokedex/pokedexApi';
pokedexApi,
PokemonListResponse,
RegionListResponse,
TypeListResponse,
} from 'features/Pokedex/pokedexApi';
import { pokedexSlice } from 'features/Pokedex/pokedexSlice'; import { pokedexSlice } from 'features/Pokedex/pokedexSlice';
import { configureStore } from '@reduxjs/toolkit'; import { configureStore } from '@reduxjs/toolkit';
import region1 from 'features/Pokedex/__test__/responses/region1.json'; import region1 from 'features/Pokedex/__test__/responses/region1.json';
import pokemon1 from 'features/Pokedex/__test__/responses/pokemon1.json'; import pokemon1 from 'features/Pokedex/__test__/responses/pokemon1.json';
import { AppStore } from 'app/store'; import { AppStore } from 'app/store';
import { RegionListResponseData, TypeListResponseData } from '../types/api';
let store: AppStore; let store: AppStore;
describe('pokedexApi', () => { describe('pokedexApi', () => {
@ -89,7 +85,7 @@ describe('pokedexApi', () => {
const regionListData = pokedexApi.endpoints.getRegionList.select()( const regionListData = pokedexApi.endpoints.getRegionList.select()(
store.getState(), store.getState(),
).data as RegionListResponse; ).data as RegionListResponseData;
expect(regionListData?.results).toHaveLength(regionListData.count); expect(regionListData?.results).toHaveLength(regionListData.count);
}); });
@ -98,7 +94,7 @@ describe('pokedexApi', () => {
const typeListData = pokedexApi.endpoints.getTypeList.select()( const typeListData = pokedexApi.endpoints.getTypeList.select()(
store.getState(), store.getState(),
).data as TypeListResponse; ).data as TypeListResponseData;
expect(typeListData?.results).toHaveLength(typeListData.count + 1); expect(typeListData?.results).toHaveLength(typeListData.count + 1);
}); });

View File

@ -1,38 +1,16 @@
import { import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
createApi,
FetchArgs,
fetchBaseQuery,
} from '@reduxjs/toolkit/query/react';
import type { PokemonProps as Pokemon } from './Pokemon';
import { import {
pokeApiAllPagesCustomBaseQuery, pokeApiAllPagesCustomBaseQuery,
pokeApiFullListFetchArgs, pokeApiFullListFetchArgs,
} from './paginationBaseQuery'; } from './paginationBaseQuery';
import {
export interface Region { PokemonListResponseData,
name: string; PokemonResponseData,
url: string; RegionListResponseData,
} RegionResponseData,
TypeListResponseData,
export interface Type { TypeResponseData,
name: string; } from './types/api';
url: string;
}
export interface PokemonListResponse {
count: number;
results: Pokemon[];
}
export interface RegionListResponse {
count: number;
results: Region[];
}
export interface TypeListResponse {
count: number;
results: Type[];
}
const pokeApiBaseQuery = async ( const pokeApiBaseQuery = async (
args: pokeApiFullListFetchArgs, args: pokeApiFullListFetchArgs,
@ -52,28 +30,28 @@ export const pokedexApi = createApi({
reducerPath: 'pokedexApi', reducerPath: 'pokedexApi',
baseQuery: pokeApiBaseQuery, baseQuery: pokeApiBaseQuery,
endpoints: builder => ({ endpoints: builder => ({
getPokemonList: builder.query<PokemonListResponse, void>({ getPokemonList: builder.query<PokemonListResponseData, void>({
query: () => ({ url: `pokemon`, fetchAllPages: true }), query: () => ({ url: `pokemon`, fetchAllPages: true }),
}), }),
getRegionList: builder.query<RegionListResponse, void>({ getRegionList: builder.query<RegionListResponseData, void>({
query: () => ({ url: 'region', fetchAllPages: true }), query: () => ({ url: 'region', fetchAllPages: true }),
}), }),
getTypeList: builder.query<TypeListResponse, void>({ getTypeList: builder.query<TypeListResponseData, void>({
query: () => ({ url: 'type', fetchAllPages: true }), query: () => ({ url: 'type', fetchAllPages: true }),
transformResponse: (response: RegionListResponse) => { transformResponse: (response: RegionListResponseData) => {
return { return {
...response, ...response,
results: [{ name: 'All Types', url: '' }, ...response.results], results: [{ name: 'All Types', url: '' }, ...response.results],
}; };
}, },
}), }),
getPokemon: builder.query<Pokemon, number | string>({ getPokemon: builder.query<PokemonResponseData, number | string>({
query: IdOrName => ({ url: `pokemon/${IdOrName}` }), query: IdOrName => ({ url: `pokemon/${IdOrName}` }),
}), }),
getRegion: builder.query<Region, number | string>({ getRegion: builder.query<RegionResponseData, number | string>({
query: IdOrName => ({ url: `region/${IdOrName}` }), query: IdOrName => ({ url: `region/${IdOrName}` }),
}), }),
getType: builder.query<Type, number | string>({ getType: builder.query<TypeResponseData, number | string>({
query: IdOrName => ({ url: `type/${IdOrName}` }), query: IdOrName => ({ url: `type/${IdOrName}` }),
}), }),
}), }),

View File

@ -0,0 +1,61 @@
export interface nameUrlPair {
name: string;
url: string;
}
export interface ListResponse {
count: number;
results: nameUrlPair[];
}
export type PokemonListResponseData = ListResponse;
export type RegionListResponseData = ListResponse;
export type TypeListResponseData = ListResponse;
export interface RegionResponseData {
// many fields are ignored
id: number;
locations: nameUrlPair[];
name: string;
}
export interface TypeResponseData {
// many fields are ignored
id: number;
name: string;
}
export interface AbilityItem {
ability: nameUrlPair;
is_hidden: boolean;
slot: number;
}
export interface StatItem {
base_stat: number;
effort: number;
stat: nameUrlPair;
}
export interface typeItem {
slot: number;
type: nameUrlPair;
}
export interface PokemonResponseData {
// many fields are ignored
abilities: AbilityItem[];
base_experience: number;
forms: nameUrlPair[];
height: number;
held_items: any[];
id: number;
is_default: boolean;
location_area_encounters: string;
name: string;
order: number;
species: nameUrlPair;
stats: StatItem[];
types: typeItem[];
weight: number;
}