bridge5 · xieqing100 · Mar 13, 2020
diff --git 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
@@ -20,3 +20,11 @@ export function starPlayer(id) {
     id,
   };
 }
+
+export function currentPlayer(currentPage, pageSize) {
+  return {
+    type: types.CURRENT_PLAYER,
+    currentPage,
+    pageSize
+  };
+}
diff --git a/src/components/Pagination.css 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;
+}
diff --git a/src/components/Pagination.js 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
     );
   }