diff --git a/src/App.tsx b/src/App.tsx index 8cda38e..87314cb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,7 @@ import './App.css'; import Header from 'components/Header'; import Pokedex from 'features/Pokedex'; import Filters from 'features/Filters'; +import InfoDialog from 'features/InfoDialog'; import { useAppSelector } from 'app/hooks'; function App() { @@ -21,6 +22,7 @@ function App() { selectedSort={selectedSort} searchInput={selectedSearchInput} /> + ); } diff --git a/src/features/InfoDialog/InfoDialog.tsx b/src/features/InfoDialog/InfoDialog.tsx index f536555..3325bcc 100644 --- a/src/features/InfoDialog/InfoDialog.tsx +++ b/src/features/InfoDialog/InfoDialog.tsx @@ -1,23 +1,13 @@ -import { useEffect } from 'react'; - -import { useAppDispatch, useAppSelector } from 'app/hooks'; +import { useAppSelector } from 'app/hooks'; import InfoDialogComponent from 'components/InfoDialogComponent'; -import { - useGetPokemonQuery, - useGetPokemonSpeciesQuery, - useGetEvolutionChainQuery, -} from 'app/services/pokeApi'; -import { setPokemonSpeciesIdToFetch } from './infoDialogSlice'; export interface InfoDialogProps { open: boolean; pokemonId: string | number; } -const InfoDialog = ({ pokemonId }: InfoDialogProps) => { - const dispatch = useAppDispatch(); - +const InfoDialog = () => { const isOpen = useAppSelector(state => state.infoDialog.isOpen); const selectedInfoDialogDetails = useAppSelector( state => state.infoDialog.InfoDialogDetails, diff --git a/src/features/InfoDialog/infoDialogSlice.ts b/src/features/InfoDialog/infoDialogSlice.ts index 3b0c459..bcbcc3a 100644 --- a/src/features/InfoDialog/infoDialogSlice.ts +++ b/src/features/InfoDialog/infoDialogSlice.ts @@ -115,47 +115,64 @@ export const constructPokemonInfoFromResponses = ( export const fetchSelectedPokemonInfo = createAsyncThunk( 'infoDialog/fetchSelectedPokemonInfo', async (pokemonId: number, thunkAPI) => { - const { data: selectedPokemon } = await pokeApi.useGetPokemonQuery( - pokemonId, - ); - if (selectedPokemon && selectedPokemon.species) { - const { data: selectedPokemonSpecies } = - await pokeApi.useGetPokemonSpeciesFromUrlQuery( - selectedPokemon.species.url, + const dispatch = thunkAPI.dispatch; + + try { + const selectedPokemon = await dispatch( + pokeApi.endpoints.getPokemon.initiate(pokemonId), + ); + + if (selectedPokemon.data) { + const selectedPokemonSpecies = await dispatch( + pokeApi.endpoints.getPokemonSpeciesFromUrl.initiate( + selectedPokemon.data.species.url, + ), ); - if (selectedPokemonSpecies && selectedPokemonSpecies.evolution_chain) { - const { data: selectedPokemonEvolutionChain } = - await pokeApi.useGetEvolutionChainFromUrlQuery( - selectedPokemonSpecies.evolution_chain.url, - ); - if (selectedPokemonEvolutionChain) { - const evolutionChainNames = constructEvolutionChainFromResponse( - selectedPokemonEvolutionChain, - ); - // for each name in evolutionChain, fetch the pokemon - const evolutionChain: EvolutionSpeciesProps[] = []; - evolutionChainNames.map(async name => { - const { data: evolutionChainPokemon } = - await pokeApi.useGetPokemonQuery(name); - if (evolutionChainPokemon) { - evolutionChain.push({ - types: evolutionChainPokemon.types.map(type => type.type.name), - name: evolutionChainPokemon.name, - image_url: - evolutionChainPokemon.sprites.other.dream_world.front_default, - }); - } - }); - const selectedPokemonInfo = constructPokemonInfoFromResponses( - selectedPokemon, - selectedPokemonSpecies, - evolutionChain, + if (selectedPokemonSpecies.data) { + const selectedPokemonEvolutionChain = await dispatch( + pokeApi.endpoints.getEvolutionChainFromUrl.initiate( + selectedPokemonSpecies.data.evolution_chain.url, + ), ); - return selectedPokemonInfo; + if (selectedPokemonEvolutionChain.data) { + const evolutionChainName = constructEvolutionChainFromResponse( + selectedPokemonEvolutionChain.data, + ); + + // for each name in evolutionChain, fetch the pokemon + const evolutionChain: EvolutionSpeciesProps[] = []; + await Promise.all( + evolutionChainName.map(async name => { + const evolutionChainPokemon = await dispatch( + pokeApi.endpoints.getPokemon.initiate(name), + ); + if (evolutionChainPokemon.data) { + evolutionChain.push({ + types: evolutionChainPokemon.data.types.map( + type => type.type.name, + ), + name: evolutionChainPokemon.data.name, + image_url: + evolutionChainPokemon.data.sprites.other.dream_world + .front_default, + }); + } + }), + ); + + const selectedPokemonInfo = constructPokemonInfoFromResponses( + selectedPokemon.data, + selectedPokemonSpecies.data, + evolutionChain, + ); + return selectedPokemonInfo; + } } } + } catch (err) { + return thunkAPI.rejectWithValue(err); } return null;