diff --git a/src/ts/app/PokemonApp.tsx b/src/ts/app/PokemonApp.tsx index a01098a..5d12f8d 100644 --- a/src/ts/app/PokemonApp.tsx +++ b/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; @@ -45,11 +47,13 @@ class PokemonApp extends React.Component { ]); 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 { 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 { 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); diff --git a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx index 107ef79..23cc32d 100644 --- a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx +++ b/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 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 } }; diff --git a/src/ts/app/utils/navigation.ts b/src/ts/app/utils/navigation.ts new file mode 100644 index 0000000..81abc7a --- /dev/null +++ b/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) => { + const search = new URLSearchParams(location.search); + return keys.map((key) => search.get(key)); +}; + +export const appendQueryString = (location : RouteComponentProps['location'] | Window['location'], parameters : Record) => { + const search = new URLSearchParams(location.search); + Object.entries(parameters).forEach(([ key, value ]) => { + search.set(key, value); + }); + return '?' + search.toString(); +};