From be0903bd933af3f177bbe5da51c00915e441cdab Mon Sep 17 00:00:00 2001 From: Jason Zhu Date: Fri, 31 Mar 2023 21:58:03 +1100 Subject: [PATCH] Trying to use getRegionPokemonList endpoint for Loading screen --- src/features/Pokedex/Filters/Filters.tsx | 32 ++++++++++++------- src/features/Pokedex/Filters/index.ts | 1 + .../Pokedex/Filters/useFilterLoaded.ts | 18 +++++++++++ src/features/Pokedex/Pokedex.tsx | 10 +++--- .../Pokedex/Pokemon/Pokemon.stories.tsx | 4 +-- src/features/Pokedex/pokedexApi.ts | 6 ++++ src/features/Pokedex/pokedexSlice.ts | 20 ++++++++++-- 7 files changed, 71 insertions(+), 20 deletions(-) create mode 100644 src/features/Pokedex/Filters/useFilterLoaded.ts diff --git a/src/features/Pokedex/Filters/Filters.tsx b/src/features/Pokedex/Filters/Filters.tsx index 01f7a5a..08d1dbb 100644 --- a/src/features/Pokedex/Filters/Filters.tsx +++ b/src/features/Pokedex/Filters/Filters.tsx @@ -2,13 +2,15 @@ import React, { useEffect } from 'react'; import { useGetRegionListQuery, useGetTypeListQuery, + useGetRegionPokemonListQuery, } from 'features/Pokedex/pokedexApi'; import { setSelectedRegion, setSelectedType, setSelectedSort, + setFetchingRegionPokemonList, } from 'features/Pokedex/pokedexSlice'; -import { useAppDispatch } from 'app/hooks'; +import { useAppDispatch, useAppSelector } from 'app/hooks'; const useGetSortOptions = () => { const sortOptions = [ @@ -31,16 +33,9 @@ const Filters = () => { dispatch(setSelectedSort(event.target.value)); }; - const { - data: regionsData, - error: regionsError, - isLoading: regionsLoading, - } = useGetRegionListQuery(); - const { - data: typesData, - error: typesError, - isLoading: typesLoading, - } = useGetTypeListQuery(); + 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 @@ -57,6 +52,21 @@ const Filters = () => { } }, [typesData, dispatch]); + const selectedRegion = useAppSelector(state => state.pokedex.selectedRegion); + + const { refetch: refetchRegionPokemonList } = useGetRegionPokemonListQuery( + selectedRegion, + { skip: !selectedRegion }, + ); + + useEffect(() => { + if (selectedRegion) { + dispatch(setFetchingRegionPokemonList(true)); + refetchRegionPokemonList(); + dispatch(setFetchingRegionPokemonList(false)); + } + }, [selectedRegion, refetchRegionPokemonList]); + return ( <>
diff --git a/src/features/Pokedex/Filters/index.ts b/src/features/Pokedex/Filters/index.ts index 5b18d95..3fdb3d0 100644 --- a/src/features/Pokedex/Filters/index.ts +++ b/src/features/Pokedex/Filters/index.ts @@ -1 +1,2 @@ export { default } from './Filters'; +export { default as useFilterLoaded } from './useFilterLoaded'; diff --git a/src/features/Pokedex/Filters/useFilterLoaded.ts b/src/features/Pokedex/Filters/useFilterLoaded.ts new file mode 100644 index 0000000..52beedc --- /dev/null +++ b/src/features/Pokedex/Filters/useFilterLoaded.ts @@ -0,0 +1,18 @@ +import { useState, useEffect } from 'react'; +import { useGetRegionListQuery, useGetTypeListQuery } from '../pokedexApi'; + +const useFilterLoaded = () => { + const { isLoading: isLoadingRegionList } = useGetRegionListQuery(); + const { isLoading: isLoadingTypeList } = useGetTypeListQuery(); + const [isFilterLoaded, setIsFilterLoaded] = useState(false); + + useEffect(() => { + if (!isLoadingRegionList && !isLoadingTypeList) { + setIsFilterLoaded(true); + } + }, [isLoadingRegionList, isLoadingTypeList]); + + return isFilterLoaded; +}; + +export default useFilterLoaded; diff --git a/src/features/Pokedex/Pokedex.tsx b/src/features/Pokedex/Pokedex.tsx index ea25254..d9cb431 100644 --- a/src/features/Pokedex/Pokedex.tsx +++ b/src/features/Pokedex/Pokedex.tsx @@ -1,19 +1,19 @@ import React from 'react'; import Pokemon from './Pokemon'; import Filters from './Filters'; -import { useGetRegionListQuery, useGetTypeListQuery } from './pokedexApi'; import Loading from 'components/Loading'; import charizard from 'features/Pokedex/Pokemon/assets/stories/charizard.svg'; +import { useAppSelector } from 'app/hooks'; const Pokedex = () => { - const { isLoading: isLoadingRegionList } = useGetRegionListQuery(); - const { isLoading: isLoadingTypeList } = useGetTypeListQuery(); - + const isFetchingRegionPokemonList = useAppSelector( + state => state.pokedex.fetchingRegionPokemonList, + ); return ( <> - {isLoadingRegionList && isLoadingTypeList ? ( + {isFetchingRegionPokemonList ? ( ) : ( ; -const Template: ComponentStory = (args: PokemonProps) => ( +const Template: ComponentStory = (args: PokemonCardProps) => ( ); diff --git a/src/features/Pokedex/pokedexApi.ts b/src/features/Pokedex/pokedexApi.ts index a3328ca..acd906c 100644 --- a/src/features/Pokedex/pokedexApi.ts +++ b/src/features/Pokedex/pokedexApi.ts @@ -3,6 +3,7 @@ import { pokeApiAllPagesCustomBaseQuery, pokeApiFullListFetchArgs, } from './paginationBaseQuery'; +import { setFetchingRegionPokemonList } from './pokedexSlice'; import { AreaResponseData, LocationResponseData, @@ -67,6 +68,8 @@ export const pokedexApi = createApi({ }), getRegionPokemonList: builder.query({ async queryFn(regionIdOrName, api) { + api.dispatch(setFetchingRegionPokemonList(true)); + // Get region data const regionData: RegionResponseData = await api .dispatch(pokedexApi.endpoints.getRegion.initiate(regionIdOrName)) @@ -119,6 +122,8 @@ export const pokedexApi = createApi({ ), ); + api.dispatch(setFetchingRegionPokemonList(false)); + return { data: Array.from(pokemonDataList) }; }, }), @@ -134,4 +139,5 @@ export const { useGetTypeQuery, useGetAreaQuery, useGetLocationQuery, + useGetRegionPokemonListQuery, } = pokedexApi; diff --git a/src/features/Pokedex/pokedexSlice.ts b/src/features/Pokedex/pokedexSlice.ts index e0acc45..0bd613b 100644 --- a/src/features/Pokedex/pokedexSlice.ts +++ b/src/features/Pokedex/pokedexSlice.ts @@ -2,12 +2,15 @@ import { createSlice } from '@reduxjs/toolkit'; import type { PayloadAction } from '@reduxjs/toolkit'; import { PokemonProps } from './Pokemon'; import type { RootState } from 'app/store'; +import { nameUrlPair } from './types/api'; interface PokedexState { selectedRegion: string; selectedType: string; selectedSort: string; pokemonList: PokemonProps[]; + regionPokemonList: nameUrlPair[]; + fetchingRegionPokemonList: boolean; } const initialState: PokedexState = { @@ -15,6 +18,8 @@ const initialState: PokedexState = { selectedType: '', selectedSort: '', pokemonList: [], + regionPokemonList: [], + fetchingRegionPokemonList: false, }; export const pokedexSlice = createSlice({ @@ -30,10 +35,21 @@ export const pokedexSlice = createSlice({ setSelectedSort: (state, action: PayloadAction) => { state.selectedSort = action.payload; }, + setFetchingRegionPokemonList: (state, action: PayloadAction) => { + state.fetchingRegionPokemonList = action.payload; + }, + setRegionPokemonList: (state, action: PayloadAction) => { + state.regionPokemonList = action.payload; + }, }, }); -export const { setSelectedRegion, setSelectedType, setSelectedSort } = - pokedexSlice.actions; +export const { + setSelectedRegion, + setSelectedType, + setSelectedSort, + setFetchingRegionPokemonList, + setRegionPokemonList, +} = pokedexSlice.actions; export default pokedexSlice.reducer;