Add fetchPokemonRequested action and related saga loop.

frontend/src/HOC/withDataFetching.tsx

@@ -14,7 +14,7 @@ const withDataFetching = (fetchActionDispatcher: Function) => (
 
   return (
     <Style.DataFetching>
-      <BaseComponent {...props} />
+      {(props.pokemon || props.pokemons) && <BaseComponent {...props} />}
     </Style.DataFetching>
   );
 };

frontend/src/pages/Home/Home.wrap.ts

@@ -2,7 +2,7 @@ import { RouteComponentProps } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 import Home from './Home';
-import { fetchPokemonsSuccess, fetchPokemonsRequested, PokemonAction } from '../../redux/Pokemon';
+import { fetchPokemonsRequested, PokemonAction } from '../../redux/Pokemon';
 import withDataFetching from '../../HOC/withDataFetching';
 import { getPokemons } from '../../redux/Pokemon';
 
@@ -25,5 +25,5 @@ const withDataFetchingHome = withDataFetching(
 
 export default connect(
   getPokemons,
-  { fetchPokemonsSuccess, fetchPokemonsRequested },
+  { fetchPokemonsRequested },
 )(withDataFetchingHome);

frontend/src/pages/Pokemon/Pokemon.wrap.ts

@@ -1,12 +1,22 @@
+import { RouteComponentProps } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 import Pokemon from './Pokemon';
-import { fetchPokemonSuccess } from '../../redux/Pokemon';
+import { fetchPokemonRequested, PokemonAction } from '../../redux/Pokemon';
 import { getPokemon } from '../../redux/Pokemon';
+import withDataFetching from '../../HOC/withDataFetching';
 
-const withDataFetchingPokemon = Pokemon;
+const withDataFetchingPokemon = withDataFetching(
+  (
+    props: RouteComponentProps<{ id: string }> & {
+      fetchPokemonRequested(id: string): PokemonAction;
+    },
+  ) => {
+    props.fetchPokemonRequested(props.match.params.id);
+  },
+)(Pokemon);
 
 export default connect(
   getPokemon,
-  { fetchPokemonSuccess },
+  { fetchPokemonRequested },
 )(withDataFetchingPokemon);

frontend/src/redux/Pokemon/actions.ts

@@ -11,5 +11,13 @@ export const fetchPokemonSuccess = createStandardAction('Pokemon/FETCH_POKEMON_S
 export const fetchPokemonsRequested = createStandardAction('Pokemon/FETCH_POKEMONS_REQUESTED')<
   string
 >();
+export const fetchPokemonRequested = createStandardAction('Pokemon/FETCH_POKEMON_REQUESTED')<
+  string
+>();
 
-export default { fetchPokemonsSuccess, fetchPokemonSuccess, fetchPokemonsRequested };
+export default {
+  fetchPokemonsSuccess,
+  fetchPokemonSuccess,
+  fetchPokemonsRequested,
+  fetchPokemonRequested,
+};

frontend/src/redux/Pokemon/sagas.ts

@@ -2,13 +2,24 @@ import { call, put, takeEvery } from 'redux-saga/effects';
 import { ActionType } from 'typesafe-actions';
 import { makeGetRequest } from 'services/networking/request';
 import { normalize } from '../../services/PokemonNormalizer';
-import { fetchPokemonsSuccess, fetchPokemonsRequested } from './actions';
+import {
+  fetchPokemonsSuccess,
+  fetchPokemonsRequested,
+  fetchPokemonSuccess,
+  fetchPokemonRequested,
+} from './actions';
 
 function* fetchPokemons(action: ActionType<typeof fetchPokemonsRequested>) {
   const response = yield call(makeGetRequest, `/pokemon?page=${action.payload}`);
   yield put(fetchPokemonsSuccess(normalize(response.body)));
 }
 
+function* fetchPokemon(action: ActionType<typeof fetchPokemonRequested>) {
+  const response = yield call(makeGetRequest, `/pokemon/${action.payload}`);
+  yield put(fetchPokemonSuccess(response.body));
+}
+
 export default function* pokemonSaga() {
   yield takeEvery('Pokemon/FETCH_POKEMONS_REQUESTED', fetchPokemons);
+  yield takeEvery('Pokemon/FETCH_POKEMON_REQUESTED', fetchPokemon);
 }