From af8dff31ffe0966928adba08d9a4b5deeb51501f Mon Sep 17 00:00:00 2001
From: xieqing <longzetianxia163@163.com>
Date: Fri, 13 Mar 2020 19:54:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E9=A1=B5=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                |   3 +-
 src/actions/PlayersActions.js    |   8 ++
 src/components/Pagination.css    |  36 ++++++++
 src/components/Pagination.js     | 131 ++++++++++++++++++++++++++++
 src/components/PlayerList.js     |   1 +
 src/components/PlayerListItem.js |   3 +-
 src/components/index.js          |   1 +
 src/constants/ActionTypes.js     |   1 +
 src/containers/PlayerListApp.js  |   3 +-
 src/reducers/playerlist.js       | 141 +++++++++++++++++++------------
 10 files changed, 269 insertions(+), 59 deletions(-)
 create mode 100644 src/components/Pagination.css
 create mode 100644 src/components/Pagination.js
diff --git a/public/index.html b/public/index.html
index 5fec76d..c360dee 100755
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> -->
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     <!--
diff --git a/src/actions/PlayersActions.js b/src/actions/PlayersActions.js
index 8f427c2..32cabde 100755
--- a/src/actions/PlayersActions.js
+++ b/src/actions/PlayersActions.js
@@ -20,3 +20,11 @@ export function starPlayer(id) {
     id,
   };
 }
+
+export function currentPlayer(currentPage, pageSize) {
+  return {
+    type: types.CURRENT_PLAYER,
+    currentPage,
+    pageSize
+  };
+}
\ No newline at end of file
diff --git a/src/components/Pagination.css b/src/components/Pagination.css
new file mode 100644
index 0000000..a724284
--- /dev/null
+++ b/src/components/Pagination.css
@@ -0,0 +1,36 @@
+:local(.pagination) {
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+}
+.pagination > div {
+    float: left;
+    margin-right: 5px;
+}
+.pagination .totals{
+    overflow: hidden;
+}
+.pagination .totals > span{
+    float: left;
+}
+.total-num{
+    margin-right: 5px;
+}
+.pagination .bd{
+    overflow: hidden;
+}
+.pagination .bd > ul > li{
+    list-style: none outside none;
+    float: left;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    cursor: pointer;
+    margin-right: 1px;
+    border: 1px solid #eaedf1;
+}
+.pagination .bd > ul > li.current-page{
+    background: #f00;
+    color: #fff;
+}
\ No newline at end of file
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
new file mode 100644
index 0000000..3523885
--- /dev/null
+++ b/src/components/Pagination.js
@@ -0,0 +1,131 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { currentPlayer } from '../actions/PlayersActions';
+// import PropTypes from 'prop-types';
+import './Pagination.css';
+
+class Pagination extends Component {
+  state = {
+    totalNum: 0,
+    currentPage: 1,
+    totalPage: 0,
+    pageBtnList: [],
+    pageSize: 5,
+    sizeList: [5, 6, 7]
+  }
+  previousPage = () => {
+    this.setState(state => {
+      let currentPage = state.currentPage > 1 ? state.currentPage - 1 : state.currentPage;
+      this.props.dispatch(currentPlayer(currentPage, state.pageSize));
+      return { currentPage };
+    });
+  }
+  nextPage = () => {
+    this.setState(state => {
+      let currentPage = state.currentPage < state.totalPage ? state.currentPage + 1 : state.currentPage;
+      this.props.dispatch(currentPlayer(currentPage, state.pageSize));
+      return { currentPage }
+    });
+  }
+  pageBtnClick = (btnNum) => {
+    this.props.dispatch(currentPlayer(btnNum, this.state.pageSize));
+    this.setState({currentPage: btnNum});
+  }
+  pageSizeChangeHandle = (e) => {
+    let pageSize = +e.target.value;
+    this.props.dispatch(currentPlayer(this.state.currentPage, pageSize));
+    this.setState({pageSize});
+  }
+  setPagination = (playerlist = { playersById: [] }) => {
+    const { playersById, init_currentPage, init_pageSize} = playerlist;
+    let currentPage = init_currentPage || this.state.currentPage;
+    let pageSize = init_pageSize || this.state.pageSize;
+    let totalNum = playersById.length;
+    let totalPage = Math.ceil(playersById.length / pageSize);
+    let pageBtnList = [];
+    if (totalPage > 5) {
+      if (currentPage < 4) {
+        pageBtnList = [1, 2, 3, 4, 5];
+      } else {
+        pageBtnList = [currentPage -2, currentPage - 1, currentPage, currentPage + 1, currentPage + 2];
+      }
+    } else {
+      for (let i = 1; i <= totalPage; i++) {
+        pageBtnList.push(i);
+      }
+    }
+    this.setState({
+      currentPage,
+      pageSize,
+      totalNum,
+      totalPage,
+      pageBtnList
+    });
+  }
+  // calculateCurrentPlayers = () => {
+  //   console.log(666);
+  //   let {currentPage, pageSize} = this.state;
+  //   let startIndex = (currentPage - 1) * pageSize;
+  //   let len = this.props.playerlist.playersById.length;
+  //   let endIndex = len > startIndex + pageSize ? startIndex + pageSize - 1 : len - 1;
+  //   console.log(currentPlayer(startIndex, endIndex));
+  //   this.props.dispatch(currentPlayer(startIndex, endIndex));
+  // }
+  componentDidMount () {
+    this.setPagination(this.props.playerlist);
+  }
+  componentWillReceiveProps (props) {
+    console.log(666, props);
+    this.setPagination(props.playerlist);
+  }
+  render() {
+    const { totalNum, totalPage, pageBtnList, sizeList, currentPage } = this.state;
+    return (
+      <div className="pagination" style={{display: totalNum > 5 ? 'block' : 'none'}}>
+          <div className="totals">
+            <span className="total-num">{`total ${totalNum} nums,`}</span>
+            <span className="total-page">{`total ${totalPage} pages`}</span>
+          </div>
+          <div className="pre">
+            <button type="button" onClick={this.previousPage}>previous page</button>
+          </div>
+          <div className="bd">
+            <ul>
+              {
+                pageBtnList.map((item, index) => (
+                  <li key={index} className={currentPage - 1 === index ? 'current-page' : ''} onClick={() => this.pageBtnClick(item)}>{item}</li>
+                ))
+              }
+            </ul>
+          </div>
+          <div className="next">
+            <button type="button" onClick={this.nextPage}>next page</button>
+          </div>
+          <div className="page-size">
+            <select name="pageSize" onChange={this.pageSizeChangeHandle}>
+              {
+                sizeList.map((sizeItem, sizeIndex) => (
+                  <option value={sizeItem} key={sizeIndex}>{sizeItem}</option>
+                ))
+              }
+            </select>
+          </div>
+      </div>
+    );
+  }
+}
+
+// Pagination.propTypes = {
+//   currentPage: PropTypes.number.isRequired,
+//   totalNum: PropTypes.number.isRequired
+// };
+
+const mapStateToProps = (state) => {
+  return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return dispatch;
+}
+
+export default connect(mapStateToProps, null)(Pagination);
diff --git a/src/components/PlayerList.js b/src/components/PlayerList.js
index 7b40246..5062434 100755
--- a/src/components/PlayerList.js
+++ b/src/components/PlayerList.js
@@ -16,6 +16,7 @@ class PlayerList extends Component {
               team={player.team}
               position={player.position}
               starred={player.starred}
+              current={player.current}
               {...this.props.actions}
             />
           );
diff --git a/src/components/PlayerListItem.js b/src/components/PlayerListItem.js
index ec9758c..39b5915 100755
--- a/src/components/PlayerListItem.js
+++ b/src/components/PlayerListItem.js
@@ -6,7 +6,7 @@ import styles from './PlayerListItem.css';
 class PlayerListItem extends Component {
   render() {
     return (
-      <li className={styles.playerListItem}>
+      <li className={styles.playerListItem} style={{display: this.props.current ? 'block' : 'none'}}>
         <div className={styles.playerInfos}>
           <div>
             <span>{this.props.name}</span>
@@ -47,6 +47,7 @@ PlayerListItem.propTypes = {
   team: PropTypes.string.isRequired,
   position: PropTypes.string.isRequired,
   starred: PropTypes.bool,
+  current: PropTypes.bool,
   starPlayer: PropTypes.func.isRequired,
 };
 
diff --git a/src/components/index.js b/src/components/index.js
index 12ce117..b78b888 100755
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
 export { default as AddPlayerInput } from './AddPlayerInput';
 export { default as PlayerList } from './PlayerList';
 export { default as PlayerListItem } from './PlayerListItem';
+export { default as Pagination } from './Pagination';
diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js
index b796fae..d5e219f 100755
--- a/src/constants/ActionTypes.js
+++ b/src/constants/ActionTypes.js
@@ -1,3 +1,4 @@
 export const ADD_PLAYER = 'ADD_PLAYER';
 export const STAR_PLAYER = 'STAR_PLAYER';
 export const DELETE_PLAYER = 'DELETE_PLAYER';
+export const CURRENT_PLAYER = 'CURRENT_PLAYER';
diff --git a/src/containers/PlayerListApp.js b/src/containers/PlayerListApp.js
index 0e4bfa5..1864ede 100755
--- a/src/containers/PlayerListApp.js
+++ b/src/containers/PlayerListApp.js
@@ -3,7 +3,7 @@ import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
 
 import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
-import { PlayerList, AddPlayerInput } from '../components';
+import { PlayerList, AddPlayerInput, Pagination } from '../components';
 
 class PlayerListApp extends Component {
   render() {
@@ -22,6 +22,7 @@ class PlayerListApp extends Component {
         <h1>NBA Players</h1>
         <AddPlayerInput addPlayer={actions.addPlayer} />
         <PlayerList players={playersById} actions={actions} />
+        <Pagination />
       </div>
     );
   }
diff --git a/src/reducers/playerlist.js b/src/reducers/playerlist.js
index 1bc7457..4a35042 100755
--- a/src/reducers/playerlist.js
+++ b/src/reducers/playerlist.js
@@ -1,74 +1,103 @@
 import * as types from '../constants/ActionTypes';
 
+const calculateCurrentPlayers = (playersById = [], currentPage = 1, pageSize = 5) => {
+  let startIndex = (currentPage - 1) * pageSize;
+  let len = playersById.length;
+  let endIndex = len > startIndex + pageSize ? startIndex + pageSize - 1 : len - 1;
+  console.log(startIndex, endIndex);
+  playersById.forEach((item, index) => {
+    item.current = index >= startIndex && index <= endIndex;
+  });
+  return playersById;
+}
+const playersById = [
+  {
+    name: 'LeBron James',
+    team: 'LOS ANGELES LAKERS',
+    position: 'SF',
+    starred: true,
+    current: false
+  },
+  {
+    name: 'Kevin Duran',
+    team: 'GOLDEN STATE WARRIORS',
+    position: 'SF',
+    starred: false,
+    current: false
+  },
+  {
+    name: 'Anthony Davis',
+    team: 'NEW ORLEANS PELICANS',
+    position: 'PF',
+    starred: false,
+    current: false
+  },
+  {
+    name: 'Stephen Curry',
+    team: 'GOLDEN STATE WARRIORS',
+    position: 'PG',
+    starred: false,
+    current: false
+  },
+  {
+    name: 'James Harden',
+    team: 'HOUSTON ROCKETS',
+    position: 'SG',
+    starred: false,
+    current: false
+  },
+  {
+    name: 'Kawhi Leonard',
+    team: 'TORONTO RAPTORS',
+    position: 'SF',
+    starred: false,
+    current: false
+  }
+];
 const initialState = {
-  playersById: [
-    {
-      name: 'LeBron James',
-      team: 'LOS ANGELES LAKERS',
-      position: 'SF',
-      starred: true,
-    },
-    {
-      name: 'Kevin Duran',
-      team: 'GOLDEN STATE WARRIORS',
-      position: 'SF',
-      starred: false,
-    },
-    {
-      name: 'Anthony Davis',
-      team: 'NEW ORLEANS PELICANS',
-      position: 'PF',
-      starred: false,
-    },
-    {
-      name: 'Stephen Curry',
-      team: 'GOLDEN STATE WARRIORS',
-      position: 'PG',
-      starred: false,
-    },
-    {
-      name: 'James Harden',
-      team: 'HOUSTON ROCKETS',
-      position: 'SG',
-      starred: false,
-    },
-    {
-      name: 'Kawhi Leonard',
-      team: 'TORONTO RAPTORS',
-      position: 'SF',
-      starred: false,
-    },
-  ],
-};
+  playersById: calculateCurrentPlayers(playersById)
+}
 
 export default function players(state = initialState, action) {
+  let playersById = [];
   switch (action.type) {
     case types.ADD_PLAYER:
+      playersById = [
+        {
+          name: action.name,
+          team: 'LOS ANGELES LAKERS',
+          position: 'SF',
+          starred: false,
+          current: false
+        },
+        ...state.playersById
+      ];
       return {
-        ...state,
-        playersById: [
-          ...state.playersById,
-          {
-            name: action.name,
-            team: 'LOS ANGELES LAKERS',
-            position: 'SF',
-          },
-        ],
+        playersById: calculateCurrentPlayers(playersById),
+        init_currentPage: 1,
+        init_pageSize: 5
       };
     case types.DELETE_PLAYER:
+      playersById = state.playersById.filter(
+        (item, index) => index !== action.id,
+      );
       return {
-        ...state,
-        playersById: state.playersById.filter(
-          (item, index) => index !== action.id,
-        ),
+        playersById: calculateCurrentPlayers(playersById),
+        init_currentPage: 1,
+        init_pageSize: 5
       };
     case types.STAR_PLAYER:
-      let players = [...state.playersById];
-      let player = players.find((item, index) => index === action.id);
+      playersById = state.playersById;
+      let player = playersById.find((item, index) => index === action.id);
       player.starred = !player.starred;
       return {
-        ...state,
-        playersById: players,
+        playersById
+      };
+    case types.CURRENT_PLAYER:
+      playersById = state.playersById;
+      let {currentPage, pageSize} = action;
+      return {
+        playersById: calculateCurrentPlayers(playersById, currentPage, pageSize)
       };
 
     default:
