Complete InfoDialog feature, now we can click info icon on card to show modal

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}
       />
+      <InfoDialog />
     </div>
   );
 }

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,

src/features/InfoDialog/infoDialogSlice.ts

@@ -115,48 +115,65 @@ export const constructPokemonInfoFromResponses = (
 export const fetchSelectedPokemonInfo = createAsyncThunk(
   'infoDialog/fetchSelectedPokemonInfo',
   async (pokemonId: number, thunkAPI) => {
-    const { data: selectedPokemon } = await pokeApi.useGetPokemonQuery(
-      pokemonId,
+    const dispatch = thunkAPI.dispatch;
+
+    try {
+      const selectedPokemon = await dispatch(
+        pokeApi.endpoints.getPokemon.initiate(pokemonId),
       );
-    if (selectedPokemon && selectedPokemon.species) {
-      const { data: selectedPokemonSpecies } =
-        await pokeApi.useGetPokemonSpeciesFromUrlQuery(
-          selectedPokemon.species.url,
+
+      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 (selectedPokemonSpecies.data) {
+          const selectedPokemonEvolutionChain = await dispatch(
+            pokeApi.endpoints.getEvolutionChainFromUrl.initiate(
+              selectedPokemonSpecies.data.evolution_chain.url,
+            ),
           );
-        if (selectedPokemonEvolutionChain) {
-          const evolutionChainNames = constructEvolutionChainFromResponse(
-            selectedPokemonEvolutionChain,
+
+          if (selectedPokemonEvolutionChain.data) {
+            const evolutionChainName = constructEvolutionChainFromResponse(
+              selectedPokemonEvolutionChain.data,
             );
+
             // for each name in evolutionChain, fetch the pokemon
             const evolutionChain: EvolutionSpeciesProps[] = [];
-          evolutionChainNames.map(async name => {
-            const { data: evolutionChainPokemon } =
-              await pokeApi.useGetPokemonQuery(name);
-            if (evolutionChainPokemon) {
+            await Promise.all(
+              evolutionChainName.map(async name => {
+                const evolutionChainPokemon = await dispatch(
+                  pokeApi.endpoints.getPokemon.initiate(name),
+                );
+                if (evolutionChainPokemon.data) {
                   evolutionChain.push({
-                types: evolutionChainPokemon.types.map(type => type.type.name),
-                name: evolutionChainPokemon.name,
+                    types: evolutionChainPokemon.data.types.map(
+                      type => type.type.name,
+                    ),
+                    name: evolutionChainPokemon.data.name,
                     image_url:
-                  evolutionChainPokemon.sprites.other.dream_world.front_default,
+                      evolutionChainPokemon.data.sprites.other.dream_world
+                        .front_default,
                   });
                 }
-          });
-
-          const selectedPokemonInfo = constructPokemonInfoFromResponses(
-            selectedPokemon,
-            selectedPokemonSpecies,
-            evolutionChain,
+              }),
             );
 
+            const selectedPokemonInfo = constructPokemonInfoFromResponses(
+              selectedPokemon.data,
+              selectedPokemonSpecies.data,
+              evolutionChain,
+            );
             return selectedPokemonInfo;
           }
         }
       }
+    } catch (err) {
+      return thunkAPI.rejectWithValue(err);
+    }
 
     return null;
   },