From 5be2d4029ef67252a3a1af75f26f7d284d90f005 Mon Sep 17 00:00:00 2001
From: liuqingheng <1303696791@qq.com>
Date: Tue, 17 Mar 2020 11:22:50 +0800
Subject: [PATCH] liuqingheng test

---
 src/components/PlayerList.js | 62 +++++++++++++++++++++++++++---------
 src/constants/ActionTypes.js |  3 ++
 src/reducers/playerlist.js   | 23 +++++++++++--
 3 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/src/components/PlayerList.js b/src/components/PlayerList.js
index 7b40246..6739c5e 100755
--- a/src/components/PlayerList.js
+++ b/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;
diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js
index b796fae..7d4b362 100755
--- a/src/constants/ActionTypes.js
+++ b/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';
diff --git a/src/reducers/playerlist.js b/src/reducers/playerlist.js
index 1bc7457..68d8397 100755
--- a/src/reducers/playerlist.js
+++ b/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;
   }