diff --git a/src/ts/app/PokemonApp.tsx b/src/ts/app/PokemonApp.tsx index d7ad958..a168bf2 100644 --- a/src/ts/app/PokemonApp.tsx +++ b/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; -interface IConnectedPokemonAppProps extends PokemonAppProps { - dispatch : ThunkDispatchPokemonSelectList; +interface IConnectedPokemonAppProps extends PokemonAppProps, IPokemonAppDispatch { + history : RouteComponentProps['history']; + location : RouteComponentProps['location']; } class PokemonApp extends React.Component { @@ -30,13 +32,27 @@ class PokemonApp extends React.Component { } 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 { } 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 { } } -const mapStateToProps = (state : ReturnType) : 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); diff --git a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx index 66ce20e..b59d800 100644 --- a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx +++ b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx @@ -168,7 +168,7 @@ export class PokemonSelectList extends React.Component 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 } }; diff --git a/src/ts/app/index.tsx b/src/ts/app/index.tsx index 7906b4e..c3544ce 100644 --- a/src/ts/app/index.tsx +++ b/src/ts/app/index.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import React from 'react'; +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'; diff --git a/src/ts/app/types.ts b/src/ts/app/types.ts index 9dd8525..2b9994e 100644 --- a/src/ts/app/types.ts +++ b/src/ts/app/types.ts @@ -22,4 +22,7 @@ export interface IPokemonAppExtraArguments extends IProviderExtraArguments { } export type ThunkResult = ThunkAction; -export type ThunkDispatchPokemonSelectList = ThunkDispatch; +type ThunkDispatchPokemonApp = ThunkDispatch; +export interface IPokemonAppDispatch { + dispatch : ThunkDispatchPokemonApp; +} diff --git a/yarn.lock b/yarn.lock index 3d74a19..4262e67 100644 --- a/yarn.lock +++ b/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" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.2.tgz#fe8101c46aa123f8353523ebdcf5730c2ae493e5" - integrity sha512-VCj5UiSyHBjwfYacmDuc/NOk4QQixbE+Wn7MFJuS0nRuPQbof132Pw4u53dm264O8LPc2MVsc7RJNml5szurkg== + version "3.3.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.3.tgz#f1657fc7daa27e1a8930758ace9ae8da31403221" + integrity sha512-Y21Xqe54TBVp+VDSNbuDYdGw0BpoR/Q6wo/+35M8PAU0vipahnyduJWirxxdxjsAkS7hue53x2zp8gz7F05u0A== unherit@^1.0.4: version "1.1.1"