put selected moves on state

dist/app.css

@@ -373,7 +373,7 @@
   z-index: 2;
   top: 25%;
   left: 50%;
-  margin-left: -160px;
+  margin-left: -212.5px;
   padding: 0; }
   .MovesDropdown__menu__2yxRm .list-item.active::before,
   .MovesDropdown__menu__2yxRm .list-item:hover::before {

dist/main-bundle.js

@@ -36942,6 +36942,11 @@ function (_react_1$default$Comp) {
         dispatch(ActionsPokemonExplorer.setIvAtk(null));
         dispatch(ActionsPokemonExplorer.setIvDef(null));
         dispatch(ActionsPokemonExplorer.setLeaguePokemon(leaguePokemon));
+        dispatch(ActionsPokemonExplorer.setSelectedCombatMoves({
+          quickMove: null,
+          chargeMove1: null,
+          chargeMove2: null
+        }));
       }).catch(function (error) {
         // tslint:disable-next-line:no-console
         console.error(error);
@@ -36988,8 +36993,8 @@ function (_react_1$default$Comp) {
       _this.props.dispatch(ActionsPokemonExplorer.maximizeLevel());
     };
 
-    _this.handleChangeTypeCoverage = function (coverage) {
+    _this.handleChangeSelectedMove = function (moves) {
-      _this.props.dispatch(ActionsPokemonExplorer.setTypeCoverage(coverage));
+      _this.props.dispatch(ActionsPokemonExplorer.setSelectedCombatMoves(moves));
     };
 
     _this.handleChangeLeagueNavigation = function (league) {
@@ -37074,7 +37079,8 @@ function (_react_1$default$Comp) {
           league = _this$props$pokemonEx.league,
           individualValues = _this$props$pokemonEx.individualValues,
           leaguePokemon = _this$props$pokemonEx.leaguePokemon,
-          combatMoves = _this$props$pokemonEx.combatMoves;
+          combatMoves = _this$props$pokemonEx.combatMoves,
+          selectedCombatMoves = _this$props$pokemonEx.selectedCombatMoves;
       var _this$state = this.state,
           isInterruption = _this$state.isInterruption,
           activeNavigation = _this$state.activeNavigation,
@@ -37137,8 +37143,9 @@ function (_react_1$default$Comp) {
         movesById: combatMoves,
         quickMoves: leaguePokemon.moves.quick,
         chargeMoves: leaguePokemon.moves.cinematic,
+        selectedMoves: selectedCombatMoves,
         handleToggleDropdownOpen: this.handleToggleInterruption,
-        handleChangeTypeCoverage: this.handleChangeTypeCoverage
+        handleChangeSelectedMove: this.handleChangeSelectedMove
       })), react_1.default.createElement("div", {
         className: leftNavCss
       }, react_1.default.createElement("button", {
@@ -37295,9 +37302,9 @@ exports.setActiveLeague = function (league) {
   });
 };
 
-exports.setTypeCoverage = function (typeCoverage) {
+exports.setSelectedCombatMoves = function (moves) {
-  return typesafe_actions_1.action(types_1.PokemonExplorerActionTypes.SET_TYPE_COVERAGE, {
+  return typesafe_actions_1.action(types_1.PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES, {
-    typeCoverage: typeCoverage
+    moves: moves
   });
 };
 
@@ -38673,12 +38680,12 @@ var MovesExplorer =
 function (_react_1$default$Comp) {
   _inherits(MovesExplorer, _react_1$default$Comp);
 
-  function MovesExplorer(props) {
+  function MovesExplorer() {
     var _this;
 
     _classCallCheck(this, MovesExplorer);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(MovesExplorer).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(MovesExplorer).apply(this, arguments));
 
     _this.getMoveType = function (move) {
       var moveStats = null;
@@ -38695,58 +38702,23 @@ function (_react_1$default$Comp) {
     };
 
     _this.handleChangeQuickMove = function (option) {
-      var _this$state = _this.state,
+      _this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, {
-          chargeMove1 = _this$state.chargeMove1,
-          chargeMove2 = _this$state.chargeMove2;
-
-      _this.setState({
         quickMove: option
-      });
+      }));
-
-      _this.props.handleChangeTypeCoverage({
-        type1: _this.getMoveType(option),
-        type2: _this.getMoveType(chargeMove1),
-        type3: _this.getMoveType(chargeMove2)
-      });
     };
 
     _this.handleChangeChargeMove1 = function (option) {
-      var _this$state2 = _this.state,
+      _this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, {
-          quickMove = _this$state2.quickMove,
-          chargeMove2 = _this$state2.chargeMove2;
-
-      _this.setState({
         chargeMove1: option
-      });
+      }));
-
-      _this.props.handleChangeTypeCoverage({
-        type1: _this.getMoveType(quickMove),
-        type2: _this.getMoveType(option),
-        type3: _this.getMoveType(chargeMove2)
-      });
     };
 
     _this.handleChangeChargeMove2 = function (option) {
-      var _this$state3 = _this.state,
+      _this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, {
-          quickMove = _this$state3.quickMove,
-          chargeMove1 = _this$state3.chargeMove1;
-
-      _this.setState({
         chargeMove2: option
-      });
+      }));
-
-      _this.props.handleChangeTypeCoverage({
-        type1: _this.getMoveType(quickMove),
-        type2: _this.getMoveType(chargeMove1),
-        type3: _this.getMoveType(option)
-      });
     };
 
-    _this.state = {
-      quickMove: null,
-      chargeMove1: null,
-      chargeMove2: null
-    };
     return _this;
   }
 
@@ -38758,10 +38730,10 @@ function (_react_1$default$Comp) {
           quickMoves = _this$props.quickMoves,
           chargeMoves = _this$props.chargeMoves,
           handleToggleDropdownOpen = _this$props.handleToggleDropdownOpen;
-      var _this$state4 = this.state,
+      var _this$props$selectedM = this.props.selectedMoves,
-          quickMove = _this$state4.quickMove,
+          quickMove = _this$props$selectedM.quickMove,
-          chargeMove1 = _this$state4.chargeMove1,
+          chargeMove1 = _this$props$selectedM.chargeMove1,
-          chargeMove2 = _this$state4.chargeMove2;
+          chargeMove2 = _this$props$selectedM.chargeMove2;
       var wrapperCss = classnames_1.default('nes-container', styles.wrapper);
       var quickMoveType = this.getMoveType(quickMove);
       var quickMoveCss = classnames_1.default(_defineProperty({}, styles.legacy, quickMove ? quickMove.isLegacy : false));
@@ -40192,10 +40164,10 @@ exports.initialState = {
   },
   league: League_1.League.GREAT,
   combatMoves: new Map(),
-  typeCoverage: {
+  selectedCombatMoves: {
-    type1: null,
+    quickMove: null,
-    type2: null,
+    chargeMove1: null,
-    type3: null
+    chargeMove2: null
   }
 };
 
@@ -40261,9 +40233,9 @@ var reduceSetActiveLeague = function reduceSetActiveLeague(state, action) {
   });
 };
 
-var reduceSetTypeCoverage = function reduceSetTypeCoverage(state, action) {
+var reduceSetSelectedCombatMoves = function reduceSetSelectedCombatMoves(state, action) {
   return Object.assign({}, state, {
-    typeCoverage: Object.assign({}, action.payload.typeCoverage)
+    selectedCombatMoves: Object.assign({}, action.payload.moves)
   });
 };
 
@@ -40299,8 +40271,8 @@ exports.PokemonExplorerReducers = function () {
     case types_1.PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE:
       return reduceSetActiveLeague(state, action);
 
-    case types_1.PokemonExplorerActionTypes.SET_TYPE_COVERAGE:
+    case types_1.PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES:
-      return reduceSetTypeCoverage(state, action);
+      return reduceSetSelectedCombatMoves(state, action);
 
     default:
       return state;
@@ -40476,7 +40448,7 @@ exports.PokemonExplorerActionTypes = {
   SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',
   SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
   SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
-  SET_TYPE_COVERAGE: 'POKEMON_EXPLORER/SET_TYPE_COVERAGE'
+  SET_SELECTED_COMBAT_MOVES: 'POKEMON_EXPLORER/SET_SELECTED_COMBAT_MOVES'
 };
 
 /***/ }),

src/ts/app/PokemonApp.tsx

@@ -12,7 +12,7 @@ import { appReducers } from 'app/index';
 
 import * as ActionsPokemonExplorer from 'app/actions';
 import * as ActionsPokemonSelectList from 'app/components/PokemonSelectList/actions';
-import { IndividualValueKey, IPokemonAppDispatch, ITypeCoverage } from 'app/types';
+import { IndividualValueKey, IPokemonAppDispatch, ISelectedCombatMoves } from 'app/types';
 
 import { Footer } from 'app/components/Footer';
 import { Header } from 'app/components/Header';
@@ -102,6 +102,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             individualValues,
             leaguePokemon,
             combatMoves,
+            selectedCombatMoves
         } = this.props.pokemonExplorerState;
         const {
             isInterruption,
@@ -226,8 +227,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
                                 movesById={ combatMoves }
                                 quickMoves={ leaguePokemon.moves.quick }
                                 chargeMoves={ leaguePokemon.moves.cinematic }
+                                selectedMoves={ selectedCombatMoves }
                                 handleToggleDropdownOpen={ this.handleToggleInterruption }
-                                handleChangeTypeCoverage={ this.handleChangeTypeCoverage }
+                                handleChangeSelectedMove={ this.handleChangeSelectedMove }
                             />
                         }
                     </div>
@@ -304,6 +306,11 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             dispatch(ActionsPokemonExplorer.setIvAtk(null));
             dispatch(ActionsPokemonExplorer.setIvDef(null));
             dispatch(ActionsPokemonExplorer.setLeaguePokemon(leaguePokemon));
+            dispatch(ActionsPokemonExplorer.setSelectedCombatMoves({
+                quickMove: null,
+                chargeMove1: null,
+                chargeMove2: null,
+            }));
         })
         .catch((error) => {
             // tslint:disable-next-line:no-console
@@ -347,8 +354,8 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
         this.props.dispatch(ActionsPokemonExplorer.maximizeLevel());
     }
 
-    private readonly handleChangeTypeCoverage = (coverage : ITypeCoverage) => {
+    private readonly handleChangeSelectedMove = (moves : ISelectedCombatMoves) => {
-        this.props.dispatch(ActionsPokemonExplorer.setTypeCoverage(coverage));
+        this.props.dispatch(ActionsPokemonExplorer.setSelectedCombatMoves(moves));
     }
 
     private readonly handleChangeLeagueNavigation = (league : League) => {

src/ts/app/actions.ts

@@ -1,6 +1,6 @@
 import { action } from 'typesafe-actions';
 
-import { ITypeCoverage, PokemonExplorerActionTypes, ThunkResult } from 'app/types';
+import { ISelectedCombatMoves, PokemonExplorerActionTypes, ThunkResult } from 'app/types';
 
 import { calculateMaxLevelForLeague } from 'app/utils/calculator';
 
@@ -25,7 +25,7 @@ export const setIvDef = (ivDef : number | null) => action(PokemonExplorerActionT
 
 export const setActiveLeague = (league : League) => action(PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE, { league });
 
-export const setTypeCoverage = (typeCoverage : ITypeCoverage) => action(PokemonExplorerActionTypes.SET_TYPE_COVERAGE, { typeCoverage });
+export const setSelectedCombatMoves = (moves : ISelectedCombatMoves) => action(PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES, { moves });
 
 export const fetchConfig = (
 ) : ThunkResult<Promise<void>> => {

src/ts/app/components/MovesExplorer.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { CombatMoveStats, ICombatMoveStats, IPokemonMove } from 'app/models/Pokemon';
 
-import { ITypeCoverage } from 'app/types';
+import { ISelectedCombatMoves } from 'app/types';
 
 import { MovesDropdown } from 'app/components/MovesDropdown';
 import { TypeIndicator } from './TypeIndicator';
@@ -15,28 +15,17 @@ export interface IMovesExplorerProps {
     movesById : CombatMoveStats;
     quickMoves : Array<IPokemonMove>;
     chargeMoves : Array<IPokemonMove>;
-    handleToggleDropdownOpen : (isOpen : boolean) => void;
+    selectedMoves : {
-    handleChangeTypeCoverage : (typeCoverage : ITypeCoverage) => void;
-}
-
-interface IState {
         quickMove : IPokemonMove | null;
         chargeMove1 : IPokemonMove | null;
         chargeMove2 : IPokemonMove | null;
-}
-
-export class MovesExplorer extends React.Component<IMovesExplorerProps, IState> {
-
-    constructor(props : IMovesExplorerProps) {
-        super(props);
-
-        this.state = {
-            quickMove: null,
-            chargeMove1: null,
-            chargeMove2: null,
     };
+    handleToggleDropdownOpen : (isOpen : boolean) => void;
+    handleChangeSelectedMove : (moves : ISelectedCombatMoves) => void;
 }
 
+export class MovesExplorer extends React.Component<IMovesExplorerProps> {
+
     public render() {
         const {
             movesById,
@@ -48,7 +37,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
             quickMove,
             chargeMove1,
             chargeMove2,
-        } = this.state;
+        } = this.props.selectedMoves;
 
         const wrapperCss = classNames(
             'nes-container',
@@ -119,47 +108,23 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
     }
 
     private readonly handleChangeQuickMove = (option : IPokemonMove) => {
-        const {
+        this.props.handleChangeSelectedMove({
-            chargeMove1,
+            ...this.props.selectedMoves,
-            chargeMove2,
-        } = this.state;
-        this.setState({
             quickMove: option,
         });
-        this.props.handleChangeTypeCoverage({
-            type1: this.getMoveType(option),
-            type2: this.getMoveType(chargeMove1),
-            type3: this.getMoveType(chargeMove2),
-        });
     }
 
     private readonly handleChangeChargeMove1 = (option : IPokemonMove) => {
-        const {
+        this.props.handleChangeSelectedMove({
-            quickMove,
+            ...this.props.selectedMoves,
-            chargeMove2,
-        } = this.state;
-        this.setState({
             chargeMove1: option,
         });
-        this.props.handleChangeTypeCoverage({
-            type1: this.getMoveType(quickMove),
-            type2: this.getMoveType(option),
-            type3: this.getMoveType(chargeMove2),
-        });
     }
 
     private readonly handleChangeChargeMove2 = (option : IPokemonMove) => {
-        const {
+        this.props.handleChangeSelectedMove({
-            quickMove,
+            ...this.props.selectedMoves,
-            chargeMove1,
-        } = this.state;
-        this.setState({
             chargeMove2: option,
         });
-        this.props.handleChangeTypeCoverage({
-            type1: this.getMoveType(quickMove),
-            type2: this.getMoveType(chargeMove1),
-            type3: this.getMoveType(option),
-        });
     }
 }

src/ts/app/reducers.ts

@@ -22,10 +22,10 @@ export const initialState : IPokemonExplorerState = {
     },
     league: League.GREAT,
     combatMoves: new Map(),
-    typeCoverage: {
+    selectedCombatMoves: {
-        type1: null,
+        quickMove: null,
-        type2: null,
+        chargeMove1: null,
-        type3: null,
+        chargeMove2: null,
     },
 };
 
@@ -115,13 +115,13 @@ const reduceSetActiveLeague = (
     league: action.payload.league
 });
 
-const reduceSetTypeCoverage = (
+const reduceSetSelectedCombatMoves = (
     state : IPokemonExplorerState,
-    action : ReturnType<typeof Actions.setTypeCoverage>
+    action : ReturnType<typeof Actions.setSelectedCombatMoves>
 ) : IPokemonExplorerState => ({
     ...state,
-    typeCoverage: {
+    selectedCombatMoves: {
-        ...action.payload.typeCoverage
+        ...action.payload.moves
     }
 });
 
@@ -148,8 +148,8 @@ export const PokemonExplorerReducers : Reducer<IPokemonExplorerState> = (
             return reduceSetIvDef(state, action as ReturnType<typeof Actions.setIvDef>);
         case PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE:
             return reduceSetActiveLeague(state, action as ReturnType<typeof Actions.setActiveLeague>);
-        case PokemonExplorerActionTypes.SET_TYPE_COVERAGE:
+        case PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES:
-            return reduceSetTypeCoverage(state, action as ReturnType<typeof Actions.setTypeCoverage>);
+            return reduceSetSelectedCombatMoves(state, action as ReturnType<typeof Actions.setSelectedCombatMoves>);
         default:
             return state;
     }

src/ts/app/styles/MovesDropdown.scss

@@ -11,7 +11,7 @@
   z-index: 2;
   top: 25%;
   left: 50%;
-  margin-left: -160px;
+  margin-left: -1 * map-get($container-width, 'desktop') / 2;
   padding: 0;
 
   :global(.list-item):global(.active)::before,

src/ts/app/types.ts

@@ -8,7 +8,7 @@ import { IProviderExtraArguments } from 'common/models/IProviderExtraArguments';
 import { IPokemonSelectListState } from 'app/components/PokemonSelectList/types';
 
 import { ILeaguePokemon, League } from 'app/models/League';
-import { CombatMoveStats, IMaxStats } from 'app/models/Pokemon';
+import { CombatMoveStats, IMaxStats, IPokemonMove } from 'app/models/Pokemon';
 
 import { PokemonService } from 'api/PokemonService';
 
@@ -39,10 +39,10 @@ export interface IIndividualValues {
     ivDef : number | null;
 }
 
-export interface ITypeCoverage {
+export interface ISelectedCombatMoves {
-    type1 : POGOProtos.Enums.PokemonType | null;
+    quickMove : IPokemonMove | null;
-    type2 : POGOProtos.Enums.PokemonType | null;
+    chargeMove1 : IPokemonMove | null;
-    type3 : POGOProtos.Enums.PokemonType | null;
+    chargeMove2 : IPokemonMove | null;
 }
 
 export interface IPokemonExplorerState {
@@ -52,7 +52,7 @@ export interface IPokemonExplorerState {
     individualValues : IIndividualValues;
     league : League;
     combatMoves : CombatMoveStats;
-    typeCoverage : ITypeCoverage;
+    selectedCombatMoves : ISelectedCombatMoves;
 }
 
 export const PokemonExplorerActionTypes = {
@@ -65,5 +65,5 @@ export const PokemonExplorerActionTypes = {
     SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',
     SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
     SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
-    SET_TYPE_COVERAGE: 'POKEMON_EXPLORER/SET_TYPE_COVERAGE',
+    SET_SELECTED_COMBAT_MOVES: 'POKEMON_EXPLORER/SET_SELECTED_COMBAT_MOVES',
 };