diff --git a/src/features/Pokedex/Filters/Filters.tsx b/src/features/Pokedex/Filters/Filters.tsx index 46d1ae3..629f0b5 100644 --- a/src/features/Pokedex/Filters/Filters.tsx +++ b/src/features/Pokedex/Filters/Filters.tsx @@ -4,6 +4,7 @@ import { setSelectedRegion, setSelectedType, setSelectedSort, + setRegionPokemonIdsList, } from 'features/Pokedex/pokedexSlice'; import { RegionPokemonRange } from 'features/Pokedex/types/slice'; import { useAppDispatch, useAppSelector } from 'app/hooks'; @@ -65,6 +66,8 @@ const Filters = () => { // Action when loading the component useEffect(() => { + dispatch(setRegionPokemonIdsList(regionPokemonListData)); + const initailRegion = Object.keys(regionPokemonListData)[0]; if (initailRegion) { const initialEvent = { diff --git a/src/features/Pokedex/pokedexSlice.ts b/src/features/Pokedex/pokedexSlice.ts index 6b04ee5..d8cc453 100644 --- a/src/features/Pokedex/pokedexSlice.ts +++ b/src/features/Pokedex/pokedexSlice.ts @@ -1,18 +1,22 @@ -import { createSlice } from '@reduxjs/toolkit'; +import { createSlice, Slice } from '@reduxjs/toolkit'; import type { PayloadAction } from '@reduxjs/toolkit'; -import { PokedexState } from 'features/Pokedex/types/slice'; -import type { RootState } from 'app/store'; -import { nameUrlPair } from './types/api'; + +import { startAppListening } from 'app/listenerMiddleware'; +import { PokedexState, RegionPokemonRange } from 'features/Pokedex/types/slice'; + +import { getStartAndEndIdsForRegion } from './utils'; +import { PokemonResponseData } from './types/api'; const initialState: PokedexState = { selectedRegion: '', + regionPokemonIdsList: [], selectedType: '', selectedSort: '', + isLoadingPokemons: true, pokemonList: [], - fetchingRegionPokemonList: false, }; -export const pokedexSlice = createSlice({ +export const pokedexSlice: Slice = createSlice({ name: 'pokedex', initialState, reducers: { @@ -25,8 +29,17 @@ export const pokedexSlice = createSlice({ setSelectedSort: (state, action: PayloadAction) => { state.selectedSort = action.payload; }, - setFetchingRegionPokemonList: (state, action: PayloadAction) => { - state.fetchingRegionPokemonList = action.payload; + setRegionPokemonIdsList: ( + state, + action: PayloadAction, + ) => { + state.regionPokemonIdsList = action.payload; + }, + setIsLoadingPokemons: (state, action: PayloadAction) => { + state.isLoadingPokemons = action.payload; + }, + setPokemonList: (state, action: PayloadAction) => { + state.pokemonList = action.payload; }, }, }); @@ -35,7 +48,9 @@ export const { setSelectedRegion, setSelectedType, setSelectedSort, - setFetchingRegionPokemonList, + setRegionPokemonIdsList, + setIsLoadingPokemons, + setPokemonList, } = pokedexSlice.actions; export default pokedexSlice.reducer; diff --git a/src/features/Pokedex/types/slice.ts b/src/features/Pokedex/types/slice.ts index 09672f7..4c848d8 100644 --- a/src/features/Pokedex/types/slice.ts +++ b/src/features/Pokedex/types/slice.ts @@ -1,11 +1,12 @@ -import { PokemonProps } from 'features/Pokedex/Pokemon'; +import { PokemonResponseData } from './api'; export type PokedexState = { selectedRegion: string; + regionPokemonIdsList: RegionPokemonRange[]; selectedType: string; selectedSort: string; - pokemonList: PokemonProps[]; - fetchingRegionPokemonList: boolean; + isLoadingPokemons: boolean; + pokemonList: PokemonResponseData[]; }; export type RegionPokemonRange = {