Fixed Filters.test.ts

src/App.tsx

@@ -3,13 +3,24 @@ 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 />
+      <Pokedex
+        selectedRegion={selectedRegion}
+        selectedType={selectedType}
+        selectedSort={selectedSort}
+        searchInput={selectedSearchInput}
+      />
     </div>
   );
 }

src/features/Filters/Filters.test.ts

@@ -1,12 +1,12 @@
 import {
-  useGetRegionPokemons,
+  useGetRegionOptions,
   createRegionPokemonListOptionElements,
 } from './Filters';
 
 describe('Filters', () => {
   describe('test utility functions', () => {
     test('createOptionElements works correctly', () => {
-      const { data } = useGetRegionPokemons();
+      const { data } = useGetRegionOptions();
       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 = (
   });
 };
 
-const useGetRegionOptions = () => {
+export const useGetRegionOptions = () => {
   const data: RegionPokemonRange[] = [
     { region: 'kanto', startId: 1, endId: 151 },
     { region: 'johto', startId: 152, endId: 251 },
@@ -73,7 +73,6 @@ 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,8 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PokemonCard, { PokemonCardProps } from 'components/PokemonCard';
 import Loading from 'components/Loading';
 
-import { useAppSelector } from 'app/hooks';
+import { useAppSelector, useAppDispatch } from 'app/hooks';
+import { fetchPokemonsInTheRegion } from './pokedexSlice';
 
 export const filterPokemonCardsByType = (
   pokemonList: PokemonCardProps[],
@@ -39,10 +40,20 @@ export const searchPokemonCardsByName = (
   );
 };
 
-const Pokedex = () => {
-  const selectedType = useAppSelector(state => state.filter.selectedType);
-  const selectedSort = useAppSelector(state => state.filter.selectedSort);
-  const searchInput = useAppSelector(state => state.filter.searchInput);
+export interface PokedexProps {
+  selectedRegion: string;
+  selectedType: string;
+  selectedSort: string;
+  searchInput: string;
+}
+
+const Pokedex = ({
+  selectedRegion,
+  selectedType,
+  selectedSort,
+  searchInput,
+}: PokedexProps) => {
+  const dispatch = useAppDispatch();
 
   const isLoadingPokemons = useAppSelector(
     state => state.pokedex.isLoadingPokemons,
@@ -62,6 +73,10 @@ const Pokedex = () => {
     searchInput,
   );
 
+  useEffect(() => {
+    dispatch(fetchPokemonsInTheRegion(selectedRegion));
+  }, [selectedRegion]);
+
   return (
     <>
       {isLoadingPokemons ? (