liuqingheng test

src/components/PlayerList.js

@@ -6,21 +6,39 @@ import PlayerListItem from './PlayerListItem';
 class PlayerList extends Component {
   render() {
     return (
-      <ul className={styles.playerList}>
-        {this.props.players.map((player, index) => {
-          return (
-            <PlayerListItem
-              key={index}
-              id={index}
-              name={player.name}
-              team={player.team}
-              position={player.position}
-              starred={player.starred}
-              {...this.props.actions}
-            />
-          );
-        })}
-      </ul>
+      <div>
+        <input type="checkbox" onClick={() => this.props.toggleSFPG()}/>
+        <ul className={styles.playerList}>
+          {this.props.players.map((player, index) => {
+            return (
+              <PlayerListItem
+                key={index}
+                id={index}
+                name={player.name}
+                team={player.team}
+                position={player.position}
+                starred={player.starred}
+                {...this.props.actions}
+              />
+            );
+          })}
+        </ul>
+
+        {
+          this.props.players.length > 5 &&
+          <div>
+            <button onClick={() => this.props.prePage()}>
+              <span>pre</span>
+            </button>
+            <span>{this.props.currentPage}</span>
+            <button onClick={() => this.props.nextPage()}>
+              <span>next</span>
+            </button>
+          </div>
+        }
+
+      </div>
+
     );
   }
 }
@@ -30,4 +48,18 @@ PlayerList.propTypes = {
   actions: PropTypes.object.isRequired,
 };
 
+const mapStateToProps = state => ({
+  players: state.players.playersById.filter((item, index) => {
+    let start = (state.currentPage - 1) * 5;
+    let end = start + 4;
+    let onlySFPG = state.onlySFPG;
+    if(!onlySFPG) {
+      return (index >= start && index <= end);
+    } else {
+      let isSFPG = item.position === 'SF' || item.position === 'PG';
+      return (index >= start && index <= end && isSFPG);
+    }
+  })
+});
+
 export default PlayerList;

src/constants/ActionTypes.js

@@ -1,3 +1,6 @@
 export const ADD_PLAYER = 'ADD_PLAYER';
 export const STAR_PLAYER = 'STAR_PLAYER';
 export const DELETE_PLAYER = 'DELETE_PLAYER';
+export const PRE_PAGE = 'PRE_PAGE';
+export const NEXT_PAGE = 'NEXT_PAGE';
+export const TOGGLE_SF_PG = 'TOGGLE_SF_PG';

src/reducers/playerlist.js

@@ -1,6 +1,8 @@
-import * as types from '../constants/ActionTypes';
+import * as types from '../constants/ActionTypes'; 
 
 const initialState = {
+  currentPage: 1,
+  onlySF_PG: false,
   playersById: [
     {
       name: 'LeBron James',
@@ -70,7 +72,24 @@ export default function players(state = initialState, action) {
         ...state,
         playersById: players,
       };
-
+    case types.NEXT_PAGE: 
+      let pages = Math.ceil(state.playersById.length / 5);
+      let current = state.currentPage;
+      return {
+        ...state,
+        currentPage: current === pages ? current : current + 1
+      };
+    case types.PRE_PAGE: 
+      let current = state.currentPage;
+      return {
+        ...state,
+        currentPage: current === 1 ? 1 : current - 1
+      };
+    case types.TOGGLE_SF_PG:
+      return {
+        ...state,
+        onlySF_PG: !state.onlySF_PG
+      }
     default:
       return state;
   }