diff --git a/package.json b/package.json index 730c5de..552340b 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@babel/preset-env": "^7.2.3", "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.1.0", + "@types/classnames": "^2.2.7", "@types/node": "^10.12.18", "@types/react": "^16.7.18", "@types/react-dom": "^16.0.11", @@ -56,6 +57,7 @@ "webpack-shell-plugin": "^0.5.0" }, "dependencies": { + "classnames": "^2.2.6", "pokemongo-json-pokedex": "^3.4.6", "prop-types": "^15.6.2", "react": "^16.7.0", diff --git a/src/ts/app/PokemonApp.tsx b/src/ts/app/PokemonApp.tsx index 6c5d5ff..43a9787 100644 --- a/src/ts/app/PokemonApp.tsx +++ b/src/ts/app/PokemonApp.tsx @@ -25,10 +25,19 @@ class PokemonApp extends React.Component { } public render() { + const { pokemonSelectListState } = this.props; return ( - + ); } + + private readonly onActivatePokemon = (pokemonIndex : number) => { + this.props.dispatch(ActionsPokemonSelectList.setActivePokemonIndex(pokemonIndex)); + } } const mapStateToProps = (state : ReturnType) : PokemonAppProps => { diff --git a/src/ts/app/PokemonSelectList/PokemonSelectList.tsx b/src/ts/app/PokemonSelectList/PokemonSelectList.tsx index f7ade3b..e73cccc 100644 --- a/src/ts/app/PokemonSelectList/PokemonSelectList.tsx +++ b/src/ts/app/PokemonSelectList/PokemonSelectList.tsx @@ -2,10 +2,15 @@ import React from 'react'; import { ContentRect, default as Measure } from 'react-measure'; import { FixedSizeList } from 'react-window'; +import classNames from 'classnames'; + import { IPokemon } from 'app/models/Pokemon'; export interface IPokemonSelectListProps { + activePokemonIndex : number; pokemonList : Array; + + onActivatePokemon : (index : number) => void; } interface IState { @@ -68,6 +73,10 @@ export class PokemonSelectList extends React.Component{ pokemon.name }; + const css = classNames({ + active: this.props.activePokemonIndex === index + }); + const onClick = () => this.props.onActivatePokemon(index); + return
{ pokemon.name }
; } } diff --git a/src/ts/app/PokemonSelectList/actions.ts b/src/ts/app/PokemonSelectList/actions.ts index 2df5224..bb75200 100644 --- a/src/ts/app/PokemonSelectList/actions.ts +++ b/src/ts/app/PokemonSelectList/actions.ts @@ -6,6 +6,8 @@ import { PokemonSelectListActionTypes, ThunkResult } from './types'; export const setPokemonList = (pokemonList : Array) => action(PokemonSelectListActionTypes.SET_POKEMON_LIST, { pokemonList }); +export const setActivePokemonIndex = (activePokemonIndex : number) => action(PokemonSelectListActionTypes.SET_ACTIVE_POKEMON_INDEX, { activePokemonIndex }); + export const fetchPokemonList = ( ) : ThunkResult> => { return (dispatch, getState, extraArguments) => { diff --git a/src/ts/app/PokemonSelectList/reducers.ts b/src/ts/app/PokemonSelectList/reducers.ts index def52c7..5fade6b 100644 --- a/src/ts/app/PokemonSelectList/reducers.ts +++ b/src/ts/app/PokemonSelectList/reducers.ts @@ -4,6 +4,7 @@ import * as Actions from './actions'; import { IPokemonSelectListState, PokemonSelectListActionTypes } from './types'; export const initialState : IPokemonSelectListState = { + activePokemonIndex: -1, pokemonList: [], pokemonListFiltered: [], }; @@ -16,6 +17,14 @@ const reduceSetPokemonList = ( pokemonList: action.payload.pokemonList, }); +const reduceSetActivePokemonIndex = ( + state : IPokemonSelectListState, + action : ReturnType +) : IPokemonSelectListState => ({ + ...state, + activePokemonIndex: action.payload.activePokemonIndex, +}); + export const PokemonSelectListReducers : Reducer = ( state : IPokemonSelectListState = initialState, action, @@ -23,6 +32,8 @@ export const PokemonSelectListReducers : Reducer = ( switch (action.type) { case PokemonSelectListActionTypes.SET_POKEMON_LIST: return reduceSetPokemonList(state, action as ReturnType); + case PokemonSelectListActionTypes.SET_ACTIVE_POKEMON_INDEX: + return reduceSetActivePokemonIndex(state, action as ReturnType); default: return state; } diff --git a/src/ts/app/PokemonSelectList/types.ts b/src/ts/app/PokemonSelectList/types.ts index 1884904..f9b97d7 100644 --- a/src/ts/app/PokemonSelectList/types.ts +++ b/src/ts/app/PokemonSelectList/types.ts @@ -8,6 +8,7 @@ import { PokemonService } from 'api/PokemonService'; import { IPokemon } from 'app/models/Pokemon'; export interface IPokemonSelectListState { + activePokemonIndex : number; pokemonList : Array; pokemonListFiltered : Array; } @@ -29,4 +30,5 @@ export type ThunkDispatchPokemonSelectList = ThunkDispatch