Steop using setRegionPokemonList, as now we link Region with Pokemon ID

src/features/Pokedex/Filters/Filters.test.ts

@@ -0,0 +1,12 @@
+import { createOptionElements } from './Filters';
+
+describe('Filters', () => {
+  describe('test utility functions', () => {
+    test('createOptionElements works correctly', () => {
+      const optionElements = createOptionElements();
+      expect(optionElements[0].props.children).toBe('Kanto (1-151)');
+      expect(optionElements[1].props.children).toBe('Johto (152-251)');
+      expect(optionElements[2].props.children).toBe('Hoenn (252-386)');
+    });
+  });
+});

src/features/Pokedex/Filters/Filters.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import {
-  useGetRegionListQuery,
   useGetTypeListQuery,
   useGetRegionPokemonListQuery,
 } from 'features/Pokedex/pokedexApi';
@@ -11,6 +10,7 @@ import {
   setFetchingRegionPokemonList,
 } from 'features/Pokedex/pokedexSlice';
 import { useAppDispatch, useAppSelector } from 'app/hooks';
+import RegionPokemonList from 'features/Pokedex/RegionPokemonsList.json';
 
 const useGetSortOptions = () => {
   const sortOptions = [
@@ -20,6 +20,32 @@ const useGetSortOptions = () => {
   return { data: sortOptions };
 };
 
+interface RegionPokemonIdRange {
+  startid: number;
+  endid: number;
+}
+
+interface RegionPokemonListData {
+  [key: string]: RegionPokemonIdRange;
+}
+
+const regionPokemonListData: RegionPokemonListData = RegionPokemonList;
+
+export const createOptionElements = () => {
+  const data = regionPokemonListData;
+  return Object.entries(data).map(([region, { startid, endid }]) => {
+    const value = `${region}`;
+    const label = `${
+      region.charAt(0).toUpperCase() + region.slice(1)
+    } (${startid}-${endid})`;
+    return (
+      <option key={region} value={value}>
+        {label}
+      </option>
+    );
+  });
+};
+
 const Filters = () => {
   const dispatch = useAppDispatch();
 
@@ -33,24 +59,36 @@ const Filters = () => {
     dispatch(setSelectedSort(event.target.value));
   };
 
-  const { data: regionsData, isLoading: regionsLoading } =
-    useGetRegionListQuery();
   const { data: typesData, isLoading: typesLoading } = useGetTypeListQuery();
   const { data: sortOptions } = useGetSortOptions();
 
   // Send the first region as the default selected region
   useEffect(() => {
-    if (regionsData && regionsData.results.length > 0) {
-      dispatch(setSelectedRegion(regionsData.results[0].name));
+    const initailRegion = Object.keys(regionPokemonListData)[0];
+    if (initailRegion) {
+      const initialEvent = {
+        target: { value: initailRegion },
+      } as React.ChangeEvent<HTMLSelectElement>;
+      handleRegionChange(initialEvent);
     }
-  }, [regionsData, dispatch]);
+
+    if (sortOptions && sortOptions.length > 0) {
+      const initialSortEvent = {
+        target: { value: sortOptions[0].value },
+      } as React.ChangeEvent<HTMLSelectElement>;
+      handleSortChange(initialSortEvent);
+    }
+  }, []);
 
   // Send the first type as the default selected type
   useEffect(() => {
     if (typesData && typesData.results.length > 0) {
-      dispatch(setSelectedType(typesData.results[0].name));
+      const initialTypeEvent = {
+        target: { value: typesData.results[0].name },
+      } as React.ChangeEvent<HTMLSelectElement>;
+      handleTypeChange(initialTypeEvent);
     }
-  }, [typesData, dispatch]);
+  }, [typesData]);
 
   const selectedRegion = useAppSelector(state => state.pokedex.selectedRegion);
 
@@ -67,6 +105,7 @@ const Filters = () => {
     }
   }, [selectedRegion, refetchRegionPokemonList]);
 
+  const optionElements = createOptionElements();
   return (
     <>
       <div className="filter__container">
@@ -75,29 +114,17 @@ const Filters = () => {
             <div>REGION</div>
             <select
               name="regionSelect"
-              disabled={regionsLoading}
               onChange={handleRegionChange}
+              value={Object.keys(regionPokemonListData)[0]}
             >
-              {regionsLoading ? (
-                <option>Loading...</option>
-              ) : (
-                regionsData?.results.map(region => (
-                  <option key={region.name} value={region.name}>
-                    {region.name}
-                  </option>
-                ))
-              )}
+              {optionElements}
             </select>
           </div>
         </div>
         <div className="filter__items">
           <div>
             <div>TYPE</div>
-            <select
-              name="regionSelect"
-              disabled={regionsLoading}
-              onChange={handleTypeChange}
-            >
+            <select name="regionSelect" onChange={handleTypeChange}>
               {typesLoading ? (
                 <option>Loading...</option>
               ) : (

src/features/Pokedex/RegionPokemonsList.json

@@ -0,0 +1,34 @@
+{
+  "Kanto": {
+    "startid": 1,
+    "endid": 151
+  },
+  "Johto": {
+    "startid": 152,
+    "endid": 251
+  },
+  "Hoenn": {
+    "startid": 252,
+    "endid": 386
+  },
+  "Sinnoh": {
+    "startid": 387,
+    "endid": 494
+  },
+  "Unova": {
+    "startid": 495,
+    "endid": 649
+  },
+  "Kalos": {
+    "startid": 650,
+    "endid": 721
+  },
+  "Alola": {
+    "startid": 722,
+    "endid": 809
+  },
+  "Galar": {
+    "startid": 810,
+    "endid": 898
+  }
+}