navigation utility

src/ts/app/PokemonApp.tsx

@@ -19,6 +19,8 @@ import { Header } from './components/Header';
 import { PokemonExplorer } from './components/PokemonExplorer/PokemonExplorer';
 import { PokemonSelectList } from './components/PokemonSelectList/PokemonSelectList';
 
+import { appendQueryString, getCurrentQueryStringVlaues } from 'app/utils/navigation';
+
 import * as styles from './styles/PokemonApp.scss';
 
 type PokemonAppProps = ReturnType<typeof appReducers>;
@@ -45,11 +47,13 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
         ]);
         dispatch(ActionsPokemonSelectList.setIsLoading(false));
 
-        const search = new URLSearchParams(location.search);
+        const [
+            pokemonIdValue,
+            pokemonFormValue,
+            activeLeagueValue,
+         ] = getCurrentQueryStringVlaues(location, 'id', 'form', 'league');
 
-        const pokemonIdValue = search.get('id');
         const pokemonId = pokemonIdValue !== null ? parseInt(pokemonIdValue, 10) : null;
-        const pokemonFormValue = search.get('form');
         const pokemonForm = pokemonFormValue ? parseInt(pokemonFormValue, 10) : null;
         if (pokemonId !== null && typeof POGOProtos.Enums.PokemonId[pokemonId] !== 'undefined' &&
             pokemonForm !== null && typeof POGOProtos.Enums.Form[pokemonForm] !== 'undefined'
@@ -57,7 +61,6 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
             this.handleActivatePokemon(pokemonId, pokemonForm);
         }
 
-        const activeLeagueValue = search.get('league');
         const activeLeague = activeLeagueValue ? parseInt(activeLeagueValue, 10) : null;
         if (activeLeague !== null && typeof League[activeLeague] !== 'undefined') {
             this.handleChangeLeague(activeLeague);
@@ -165,10 +168,8 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
             location,
         } = this.props;
 
-        const search = new URLSearchParams(location.search);
-        search.set('league', league.toString());
         history.push({
-            search: search.toString()
+            search: appendQueryString(location, { league: league.toString() })
         });
 
         this.handleChangeLeague(league);

src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx

@@ -8,6 +8,7 @@ import { VariableSizeList } from 'react-window';
 import classNames from 'classnames';
 
 import { formatDexNumber, formatForm } from 'app/utils/formatter';
+import { appendQueryString } from 'app/utils/navigation';
 
 import { DEFAULT_POKEMON_NAME, IPokemon } from 'app/models/Pokemon';
 
@@ -168,7 +169,10 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
         const onClick = () => this.props.handleActivatePokemon(pokemon.id, pokemon.form);
         const linkTo = {
             // pathname: '/courses',
-            search: `?id=${pokemon.id}&form=${pokemon.form}`,
+            search: appendQueryString(location, {
+                id: pokemon.id.toString(),
+                form: pokemon.form.toString(),
+            }),
             // hash: '#the-hash',
             // state: { fromDashboard: true }
         };

src/ts/app/utils/navigation.ts

@@ -0,0 +1,19 @@
+import { RouteComponentProps } from 'react-router-dom';
+
+export const getCurrentQueryString = (location : RouteComponentProps['location'] | Window['location']) => {
+    const search = new URLSearchParams(location.search);
+    return '?' + search.toString();
+};
+
+export const getCurrentQueryStringVlaues = (location : RouteComponentProps['location'] | Window['location'], ...keys : Array<string>) => {
+    const search = new URLSearchParams(location.search);
+    return keys.map((key) => search.get(key));
+};
+
+export const appendQueryString = (location : RouteComponentProps['location'] | Window['location'], parameters : Record<string, string>) => {
+    const search = new URLSearchParams(location.search);
+    Object.entries(parameters).forEach(([ key, value ]) => {
+        search.set(key, value);
+    });
+    return '?' + search.toString();
+};