src/App.tsx

@@ -3,24 +3,13 @@ import './App.css';
 import Header from 'components/Header';
 import Pokedex from 'features/Pokedex';
 import Filters from 'features/Filters';
-import { useAppSelector } from 'app/hooks';
 
 function App() {
-  const selectedRegion = useAppSelector(state => state.filter.selectedRegion);
-  const selectedType = useAppSelector(state => state.filter.selectedType);
-  const selectedSort = useAppSelector(state => state.filter.selectedSort);
-  const selectedSearchInput = useAppSelector(state => state.filter.searchInput);
-
   return (
     <div className="App app_container">
       <Header />
       <Filters />
-      <Pokedex
-        selectedRegion={selectedRegion}
-        selectedType={selectedType}
-        selectedSort={selectedSort}
-        searchInput={selectedSearchInput}
-      />
+      <Pokedex />
     </div>
   );
 }

src/features/Filters/Filters.test.ts

@@ -1,12 +1,12 @@
 import {
-  useGetRegionOptions,
+  useGetRegionPokemons,
   createRegionPokemonListOptionElements,
 } from './Filters';
 
 describe('Filters', () => {
   describe('test utility functions', () => {
     test('createOptionElements works correctly', () => {
-      const { data } = useGetRegionOptions();
+      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)');

src/features/Filters/Filters.tsx

@@ -31,7 +31,7 @@ export const createRegionPokemonListOptionElements = (
   });
 };
 
-export const useGetRegionOptions = () => {
+const useGetRegionOptions = () => {
   const data: RegionPokemonRange[] = [
     { region: 'kanto', startId: 1, endId: 151 },
     { region: 'johto', startId: 152, endId: 251 },
@@ -73,6 +73,7 @@ const Filters = () => {
     dispatch(setSortOptions(fetchedSortOptions));
 
     dispatch(setSelectedRegion(fetchedRegionOptions[0].region));
+    dispatch(fetchPokemonsInTheRegion(fetchedRegionOptions[0].region));
 
     dispatch(setSelectedSort(fetchedSortOptions[0].value));
   }, []);

src/features/Pokedex/Pokedex.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import PokemonCard, { PokemonCardProps } from 'components/PokemonCard';
 import Loading from 'components/Loading';
 
-import { useAppSelector, useAppDispatch } from 'app/hooks';
-import { fetchPokemonsInTheRegion } from './pokedexSlice';
+import { useAppSelector } from 'app/hooks';
 
 export const filterPokemonCardsByType = (
   pokemonList: PokemonCardProps[],
@@ -40,20 +39,10 @@ export const searchPokemonCardsByName = (
   );
 };
 
-export interface PokedexProps {
-  selectedRegion: string;
-  selectedType: string;
-  selectedSort: string;
-  searchInput: string;
-}
-
-const Pokedex = ({
-  selectedRegion,
-  selectedType,
-  selectedSort,
-  searchInput,
-}: PokedexProps) => {
-  const dispatch = useAppDispatch();
+const Pokedex = () => {
+  const selectedType = useAppSelector(state => state.filter.selectedType);
+  const selectedSort = useAppSelector(state => state.filter.selectedSort);
+  const searchInput = useAppSelector(state => state.filter.searchInput);
 
   const isLoadingPokemons = useAppSelector(
     state => state.pokedex.isLoadingPokemons,
@@ -73,10 +62,6 @@ const Pokedex = ({
     searchInput,
   );
 
-  useEffect(() => {
-    dispatch(fetchPokemonsInTheRegion(selectedRegion));
-  }, [selectedRegion]);
-
   return (
     <>
       {isLoadingPokemons ? (