diff --git a/src/features/Pokedex/Pokedex.tsx b/src/features/Pokedex/Pokedex.tsx index eaabed8..c30965a 100644 --- a/src/features/Pokedex/Pokedex.tsx +++ b/src/features/Pokedex/Pokedex.tsx @@ -3,44 +3,12 @@ import PokemonCard, { PokemonCardProps } from 'components/PokemonCard'; import Loading from 'components/Loading'; import { useAppSelector, useAppDispatch } from 'app/hooks'; -import { fetchPokemonsInTheRegion } from './pokedexSlice'; +import { + fetchPokemonsInTheRegion, + searchedSortedFilteredPokemonCardList, +} from './pokedexSlice'; import { fetchSelectedPokemonInfo } from 'features/InfoDialog/infoDialogSlice'; -export const filterPokemonCardsByType = ( - pokemonList: PokemonCardProps[], - selectedType: string, -) => { - return pokemonList.filter( - pokemon => - selectedType === 'All Types' || - pokemon.types.some(type => type === selectedType), - ); -}; - -export const sortPokemonCardsByIdOrName = ( - pokemonList: PokemonCardProps[], - selectedSort: string, -) => { - return pokemonList.sort((a, b) => { - if (selectedSort === 'id') { - return a.id - b.id; - } else if (selectedSort === 'name') { - return a.name.localeCompare(b.name); - } else { - return 0; - } - }); -}; - -export const searchPokemonCardsByName = ( - pokemonList: PokemonCardProps[], - searchInput: string, -) => { - return pokemonList.filter(pokemon => - pokemon.name.toLowerCase().includes(searchInput.toLowerCase()), - ); -}; - export interface PokedexProps { selectedRegion: string; selectedType: string; @@ -59,19 +27,8 @@ const Pokedex = ({ const isLoadingPokemons = useAppSelector( state => state.pokedex.isLoadingPokemons, ); - const pokemonList = useAppSelector(state => state.pokedex.pokemonCardList); - - const filteredPokemonList = filterPokemonCardsByType( - pokemonList, - selectedType, - ); - const sortedFilteredPokemonCardList = sortPokemonCardsByIdOrName( - filteredPokemonList, - selectedSort, - ); - const searchedPokemonCardList = searchPokemonCardsByName( - sortedFilteredPokemonCardList, - searchInput, + const pokemonCardListForRendering = searchedSortedFilteredPokemonCardList( + useAppSelector(state => state), ); useEffect(() => { @@ -84,7 +41,7 @@ const Pokedex = ({ ) : (
- {searchedPokemonCardList.map(pokemonCard => ( + {pokemonCardListForRendering.map(pokemonCard => ( = createSlice({ export const { setIsLoadingPokemons } = pokedexSlice.actions; export default pokedexSlice.reducer; + +/// selectors +export const filterPokemonCardsByType = ( + pokemonList: PokemonCardProps[], + selectedType: string, +) => { + return pokemonList.filter( + pokemon => + selectedType === 'All Types' || + pokemon.types.some(type => type === selectedType), + ); +}; + +export const sortPokemonCardsByIdOrName = ( + pokemonList: PokemonCardProps[], + selectedSort: string, +) => { + return pokemonList.sort((a, b) => { + if (selectedSort === 'id') { + return a.id - b.id; + } else if (selectedSort === 'name') { + return a.name.localeCompare(b.name); + } else { + return 0; + } + }); +}; + +export const searchPokemonCardsByName = ( + pokemonList: PokemonCardProps[], + searchInput: string, +) => { + return pokemonList.filter(pokemon => + pokemon.name.toLowerCase().includes(searchInput.toLowerCase()), + ); +}; + +export const filteredPokemonListByType = (state: RootState) => + filterPokemonCardsByType( + state.pokedex.pokemonCardList, + state.filter.selectedType, + ); + +export const sortedFilteredPokemonCardList = (state: RootState) => + sortPokemonCardsByIdOrName( + filteredPokemonListByType(state), + state.filter.selectedSort, + ); + +export const searchedSortedFilteredPokemonCardList = (state: RootState) => + searchPokemonCardsByName( + sortedFilteredPokemonCardList(state), + state.filter.searchInput, + );