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 = ({