Recreate useGetRegionOptions and useGetSortOptions again for getting region and sort options in Filter.tsx

src/features/Pokedex/Filters/Filters.tsx

@@ -5,6 +5,8 @@ import {
   setSelectedType,
   setSelectedSort,
   fetchPokemonsInTheRegion,
+  setRegionOptions,
+  setSortOptions,
 } from 'features/Pokedex/pokedexSlice';
 import { RegionPokemonRange } from 'features/Pokedex/types/slice';
 import { useAppDispatch, useAppSelector } from 'app/hooks';
@@ -25,6 +27,29 @@ export const createRegionPokemonListOptionElements = (
   });
 };
 
+const useGetRegionOptions = () => {
+  const data: RegionPokemonRange[] = [
+    { region: 'kanto', startId: 1, endId: 151 },
+    { region: 'johto', startId: 152, endId: 251 },
+    { region: 'hoenn', startId: 252, endId: 386 },
+    { region: 'sinnoh', startId: 387, endId: 493 },
+    { region: 'unova', startId: 494, endId: 649 },
+    { region: 'kalos', startId: 650, endId: 721 },
+    { region: 'alola', startId: 722, endId: 809 },
+    { region: 'galar', startId: 810, endId: 898 },
+  ];
+  return { data: data };
+};
+
+const useGetSortOptions = () => {
+  const data = [
+    { name: 'ID', value: 'id' },
+    { name: 'Name', value: 'name' },
+  ];
+
+  return { data: data };
+};
+
 const Filters = () => {
   const dispatch = useAppDispatch();
   const selectedRegion = useAppSelector(state => state.pokedex.selectedRegion);
@@ -34,13 +59,18 @@ const Filters = () => {
   const regionPokemonList = useAppSelector(
     state => state.pokedex.regionOptions,
   );
-  const sortOptions = useAppSelector(state => state.pokedex.sortOptions);
 
-  const { data: typesData, isLoading: typesLoading } = useGetTypeListQuery();
+  const { data: fetchedRegionOptions } = useGetRegionOptions();
+  const { data: fetchedTypeOptions, isLoading: isFetchingTypeOptions } =
+    useGetTypeListQuery();
+  const { data: fetchedSortOptions } = useGetSortOptions();
 
   useEffect(() => {
-    dispatch(setSelectedRegion('kanto'));
+    dispatch(setRegionOptions(fetchedRegionOptions));
-    dispatch(fetchPokemonsInTheRegion('kanto'));
+    dispatch(setSortOptions(fetchedSortOptions));
+
+    dispatch(setSelectedRegion(fetchedRegionOptions[0].region));
+    dispatch(fetchPokemonsInTheRegion(fetchedRegionOptions[0].region));
   }, []);
 
   const optionElements =
@@ -72,10 +102,10 @@ const Filters = () => {
               onChange={e => dispatch(setSelectedType(e.target.value))}
               value={selectedType}
             >
-              {typesLoading ? (
+              {isFetchingTypeOptions ? (
                 <option>Loading...</option>
               ) : (
-                typesData?.results.map(type => (
+                fetchedTypeOptions?.results.map(type => (
                   <option key={type.name} value={type.name}>
                     {type.name}
                   </option>
@@ -89,11 +119,11 @@ const Filters = () => {
             <div>SORT BY</div>
             <select
               name="sortSelect"
-              disabled={typesLoading}
+              disabled={isFetchingTypeOptions}
               onChange={e => dispatch(setSelectedSort(e.target.value))}
               value={selectedSort}
             >
-              {sortOptions.map(option => (
+              {fetchedSortOptions.map(option => (
                 <option key={option.value} value={option.value}>
                   {option.name}
                 </option>

src/features/Pokedex/pokedexSlice.ts

@@ -8,20 +8,6 @@ import { PokemonResponseData } from './types/api';
 import { pokedexApi } from './pokedexApi';
 import { RootState } from '../../app/store';
 
-const regionPokemonRange: RegionPokemonRange[] = [
-  { region: 'kanto', startId: 1, endId: 151 },
-  { region: 'johto', startId: 152, endId: 251 },
-  { region: 'hoenn', startId: 252, endId: 386 },
-  { region: 'sinnoh', startId: 387, endId: 493 },
-  { region: 'unova', startId: 494, endId: 649 },
-  { region: 'kalos', startId: 650, endId: 721 },
-  { region: 'alola', startId: 722, endId: 809 },
-  { region: 'galar', startId: 810, endId: 898 },
-];
-const sortOptions = [
-  { name: 'ID', value: 'id' },
-  { name: 'Name', value: 'name' },
-];
 pokedexApi.endpoints.getTypeList.initiate(); // initialize type list fetching
 // typesData will be used in Filters.tsx
 
@@ -54,9 +40,9 @@ export const fetchPokemonsInTheRegion = createAsyncThunk<
 });
 
 const initialState: PokedexState = {
-  regionOptions: regionPokemonRange,
+  regionOptions: [],
   typeOptions: [],
-  sortOptions: sortOptions,
+  sortOptions: [],
   selectedRegion: '',
   selectedType: '',
   selectedSort: '',
@@ -79,21 +65,24 @@ export const pokedexSlice: Slice<PokedexState> = createSlice({
     setSelectedSort: (state, action: PayloadAction<string>) => {
       state.selectedSort = action.payload;
     },
-    setRegionPokemonIdsList: (
+    setRegionOptions: (state, action: PayloadAction<RegionPokemonRange[]>) => {
-      state,
-      action: PayloadAction<RegionPokemonRange[]>,
-    ) => {
       state.regionOptions = action.payload;
     },
+    setTypeOptions: (state, action: PayloadAction<string[]>) => {
+      state.typeOptions = action.payload;
+    },
+    setSortOptions: (
+      state,
+      action: PayloadAction<{ name: string; value: string }[]>,
+    ) => {
+      state.sortOptions = action.payload;
+    },
     setIsLoadingPokemons: (state, action: PayloadAction<boolean>) => {
       state.isLoadingPokemons = action.payload;
     },
     setPokemonList: (state, action: PayloadAction<PokemonResponseData[]>) => {
       state.pokemonList = action.payload;
     },
-    setTypeList: (state, action: PayloadAction<string[]>) => {
-      state.typeOptions = action.payload;
-    },
   },
   extraReducers: builder => {
     // add fetchPokemonsInTheRegion
@@ -119,7 +108,9 @@ export const {
   setSelectedRegion,
   setSelectedType,
   setSelectedSort,
-  setIsLoadingPokemons,
+  setRegionOptions,
+  setTypeOptions,
+  setSortOptions,
   setPokemonList,
 } = pokedexSlice.actions;