add pokemon to url

src/ts/app/PokemonApp.tsx

@@ -2,6 +2,7 @@ import POGOProtos from 'pogo-protos';
 
 import React from 'react';
 import { connect } from 'react-redux';
+import { RouteComponentProps } from 'react-router-dom';
 
 import { League } from 'app/models/League';
 
@@ -9,7 +10,7 @@ import { appReducers } from './index';
 
 import * as ActionsPokemonExplorer from './components/PokemonExplorer/actions';
 import * as ActionsPokemonSelectList from './components/PokemonSelectList/actions';
-import { ThunkDispatchPokemonSelectList } from './types';
+import { IPokemonAppDispatch } from './types';
 
 import { IndividualValueKey } from './components/PokemonExplorer/types';
 
@@ -20,8 +21,9 @@ import * as styles from './styles/PokemonApp.scss';
 
 type PokemonAppProps = ReturnType<typeof appReducers>;
 
-interface IConnectedPokemonAppProps extends PokemonAppProps {
+interface IConnectedPokemonAppProps extends PokemonAppProps, IPokemonAppDispatch {
-    dispatch : ThunkDispatchPokemonSelectList;
+    history : RouteComponentProps['history'];
+    location : RouteComponentProps['location'];
 }
 
 class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
@@ -30,13 +32,27 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
     }
 
     public async componentWillMount() {
-        const { dispatch } = this.props;
+        const {
+            location,
+            dispatch
+        } = this.props;
 
         await Promise.all([
             dispatch(ActionsPokemonExplorer.fetchConfig()),
             dispatch(ActionsPokemonSelectList.fetchPokemonList())
         ]);
         dispatch(ActionsPokemonSelectList.setIsLoading(false));
+
+        const search = new URLSearchParams(location.search);
+        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'
+        ) {
+            this.handleActivatePokemon(pokemonId, pokemonForm);
+        }
     }
 
     public render() {
@@ -104,7 +120,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
     }
 
     private readonly handleChangeIndividualValue = (stat : IndividualValueKey, value : number | null) => {
-        const { dispatch } = this.props;
+        const {
+            dispatch,
+        } = this.props;
 
         switch (stat) {
             case 'level':
@@ -133,11 +151,26 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
     }
 }
 
-const mapStateToProps = (state : ReturnType<typeof appReducers>) : PokemonAppProps => {
+const mapStateToProps = (state : PokemonAppProps) : PokemonAppProps => {
     return {
         pokemonExplorerState: state.pokemonExplorerState,
         pokemonSelectListState: state.pokemonSelectListState,
     };
 };
 
-export const ConnectedPokemonApp = connect(mapStateToProps)(PokemonApp);
+const mapDispatchToProps = (dispatch : IPokemonAppDispatch['dispatch']) : IPokemonAppDispatch => {
+    return {
+        dispatch
+    };
+};
+
+const mergeProps = (state : PokemonAppProps, dispatchProps : IPokemonAppDispatch, ownProps : RouteComponentProps) : IConnectedPokemonAppProps => {
+    return {
+        ...state,
+        ...dispatchProps,
+        history: ownProps.history,
+        location: ownProps.location,
+    };
+};
+
+export const ConnectedPokemonApp = connect(mapStateToProps, mapDispatchToProps, mergeProps)(PokemonApp);

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

@@ -168,7 +168,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
         const onClick = () => this.props.handleActivatePokemon(pokemon.id, pokemon.form);
         const linkTo = {
             // pathname: '/courses',
-            search: `?id=${pokemon.id}`,
+            search: `?id=${pokemon.id}&form=${pokemon.form}`,
             // hash: '#the-hash',
             // state: { fromDashboard: true }
         };

src/ts/app/index.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React from 'react';
-import * as ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
-import * as Redux from 'redux';
+import Redux from 'redux';
 import thunk from 'redux-thunk';
 
 import { IPokemonAppExtraArguments } from 'app/types';

src/ts/app/types.ts

@@ -22,4 +22,7 @@ export interface IPokemonAppExtraArguments extends IProviderExtraArguments {
 }
 
 export type ThunkResult<R> = ThunkAction<R, IPokemonAppStore, IPokemonAppExtraArguments, Action>;
-export type ThunkDispatchPokemonSelectList = ThunkDispatch<IPokemonAppStore, IPokemonAppExtraArguments, Action>;
+type ThunkDispatchPokemonApp = ThunkDispatch<IPokemonAppStore, IPokemonAppExtraArguments, Action>;
+export interface IPokemonAppDispatch {
+    dispatch : ThunkDispatchPokemonApp;
+}

yarn.lock

@@ -7081,9 +7081,9 @@ typesafe-actions@^3.0.0:
   integrity sha512-NLpRc/FY+jPfWL0aUXQzjxPyF0Xug2om6akaoRLQ18KGwP2yYNBJu9vkv2q1q+Cx/+edy2Qf6O8xXnYY/xwz1A==
 
 typescript@^3.2.2:
-  version "3.2.2"
+  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.2.tgz#fe8101c46aa123f8353523ebdcf5730c2ae493e5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.3.tgz#f1657fc7daa27e1a8930758ace9ae8da31403221"
-  integrity sha512-VCj5UiSyHBjwfYacmDuc/NOk4QQixbE+Wn7MFJuS0nRuPQbof132Pw4u53dm264O8LPc2MVsc7RJNml5szurkg==
+  integrity sha512-Y21Xqe54TBVp+VDSNbuDYdGw0BpoR/Q6wo/+35M8PAU0vipahnyduJWirxxdxjsAkS7hue53x2zp8gz7F05u0A==
 
 unherit@^1.0.4:
   version "1.1.1"