From 37cffd1c8f90cd71e4f9f29ced6c6448f827e7a6 Mon Sep 17 00:00:00 2001
From: wwilll <first94@outlook.com>
Date: Wed, 27 May 2020 18:01:47 +0800
Subject: [PATCH 1/2] feat: add pagination

---
 src/components/Pagination.css   | 12 +++++++++++
 src/components/Pagination.js    | 35 +++++++++++++++++++++++++++++++++
 src/components/index.js         |  1 +
 src/containers/PlayerListApp.js | 27 +++++++++++++++++++++++--
 4 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Pagination.css
 create mode 100644 src/components/Pagination.js

diff --git a/src/components/Pagination.css b/src/components/Pagination.css
new file mode 100644
index 0000000..48eacc9
--- /dev/null
+++ b/src/components/Pagination.css
@@ -0,0 +1,12 @@
+.pagination {
+  margin: 0;
+  
+}
+.pagination li {
+  padding: 4px 10px;
+  border: 1px solid aqua;
+  margin-right: 10px;
+}
+.pagination li.selected {
+  background-color: aqua;
+}
\ No newline at end of file
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
new file mode 100644
index 0000000..6078c8e
--- /dev/null
+++ b/src/components/Pagination.js
@@ -0,0 +1,35 @@
+
+import React, { Component } from 'react';
+import './Pagination.css';
+
+class Pagination extends Component {
+  handleClick = e => {
+    const pageNum = e.target.dataset.page
+    if (pageNum) {
+      this.props.onselected(pageNum)
+    }
+  }
+  render() {
+    const {pageCounts, currentPage} = this.props
+    const pageList = [...Array(pageCounts)]
+    return (
+      <ul className='pagination'>
+        {pageList.map((item, index) => {
+          let page = index + 1
+          return (
+            <li
+              key={index}
+              data-page={page}
+              onClick={this.handleClick}
+              className={currentPage === page ? 'selected': ''}
+            >
+              {page}
+            </li>
+          )
+        })}
+      </ul>
+    );
+  }
+}
+
+export default Pagination;
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/containers/PlayerListApp.js b/src/containers/PlayerListApp.js
index 0e4bfa5..e803be9 100755
--- a/src/containers/PlayerListApp.js
+++ b/src/containers/PlayerListApp.js
@@ -3,14 +3,32 @@ 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 {
+  playsPerPage = 5 // 每页显示数量
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentPage: 1
+    }
+  }
+  handlePageSelected = (pageNum) => {
+    pageNum = +pageNum
+    if (this.state.currentPage !== pageNum) {
+      this.setState({
+        currentPage: pageNum
+      })
+    }
+  }
   render() {
     const {
       playerlist: { playersById },
     } = this.props;
 
+    const pageCounts = Math.ceil(playersById.length / this.playsPerPage)
+    const { currentPage } = this.state
+    const currentList = playersById.slice((currentPage-1)*this.playsPerPage, currentPage*this.playsPerPage)
     const actions = {
       addPlayer: this.props.addPlayer,
       deletePlayer: this.props.deletePlayer,
@@ -21,7 +39,12 @@ class PlayerListApp extends Component {
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
         <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
+        <PlayerList players={currentList} actions={actions} />
+        <Pagination
+          pageCounts={pageCounts}
+          currentPage={currentPage}
+          onselected={this.handlePageSelected}
+        />
       </div>
     );
   }

From 6070d5d911cf0d58c47cc164e87635f19ec782e1 Mon Sep 17 00:00:00 2001
From: wwilll <first94@outlook.com>
Date: Wed, 27 May 2020 18:49:29 +0800
Subject: [PATCH 2/2] feat: add position selection

---
 src/actions/PlayersActions.js      |  4 +--
 src/components/AddPlayerInput.js   |  6 ++--
 src/components/AddPositionRadio.js | 47 ++++++++++++++++++++++++++++++
 src/components/PlayerList.js       |  2 +-
 src/components/index.js            |  1 +
 src/containers/PlayerListApp.js    | 27 +++++++++++++++--
 src/reducers/playerlist.js         |  4 +--
 7 files changed, 81 insertions(+), 10 deletions(-)
 create mode 100644 src/components/AddPositionRadio.js

diff --git a/src/actions/PlayersActions.js b/src/actions/PlayersActions.js
index 8f427c2..b68af50 100755
--- a/src/actions/PlayersActions.js
+++ b/src/actions/PlayersActions.js
@@ -1,9 +1,9 @@
 import * as types from '../constants/ActionTypes';
 
-export function addPlayer(name) {
+export function addPlayer(info) {
   return {
     type: types.ADD_PLAYER,
-    name,
+    info,
   };
 }
 
diff --git a/src/components/AddPlayerInput.js b/src/components/AddPlayerInput.js
index 5d914d8..7692d75 100755
--- a/src/components/AddPlayerInput.js
+++ b/src/components/AddPlayerInput.js
@@ -31,9 +31,11 @@ class AddPlayerInput extends Component {
 
   handleSubmit(e) {
     const name = e.target.value.trim();
+    if (!name) return
     if (e.which === 13) {
-      this.props.addPlayer(name);
-      this.setState({ name: '' });
+      this.setState({ name: '' }, () => {
+        this.props.onsubmit(name)
+      });
     }
   }
 }
diff --git a/src/components/AddPositionRadio.js b/src/components/AddPositionRadio.js
new file mode 100644
index 0000000..44cd499
--- /dev/null
+++ b/src/components/AddPositionRadio.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+class AddPositionRadio extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      currentValue: this.props.startPosition || 'SF'
+    }
+  }
+  
+  handleChange = position => {
+    this.setState({
+      currentValue: position
+    }, () => {
+      this.props.onpositionchange(position)
+    })
+  }
+
+  render() {
+    const currentValue = this.state.currentValue
+    return (
+      <div>
+        <label>
+          <input
+            type="radio"
+            name='position'
+            value="SF"
+            checked={currentValue === 'SF'}
+            onChange={() => {
+              this.handleChange('SF')
+            }}
+          />SF</label>
+        <label>
+          <input
+            type="radio"
+            name='position'
+            value="PG"
+            checked={currentValue === 'PG'}
+            onChange={() => {
+              this.handleChange('PG')
+            }}
+          />PG</label>
+      </div>
+    )
+  }
+}
+
+export default AddPositionRadio;
diff --git a/src/components/PlayerList.js b/src/components/PlayerList.js
index 7b40246..bc30263 100755
--- a/src/components/PlayerList.js
+++ b/src/components/PlayerList.js
@@ -11,7 +11,7 @@ class PlayerList extends Component {
           return (
             <PlayerListItem
               key={index}
-              id={index}
+              id={index + this.props.prevCounts}
               name={player.name}
               team={player.team}
               position={player.position}
diff --git a/src/components/index.js b/src/components/index.js
index b78b888..cd56237 100755
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,3 +2,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';
+export { default as AddPositionRadio } from './AddPositionRadio';
diff --git a/src/containers/PlayerListApp.js b/src/containers/PlayerListApp.js
index e803be9..6828abb 100755
--- a/src/containers/PlayerListApp.js
+++ b/src/containers/PlayerListApp.js
@@ -3,10 +3,11 @@ import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
 
 import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
-import { PlayerList, AddPlayerInput, Pagination } from '../components';
+import { PlayerList, AddPlayerInput, Pagination, AddPositionRadio } from '../components';
 
 class PlayerListApp extends Component {
   playsPerPage = 5 // 每页显示数量
+  currentPosition = 'SF'
   constructor(props) {
     super(props)
     this.state = {
@@ -21,6 +22,15 @@ class PlayerListApp extends Component {
       })
     }
   }
+  handlePositionChange = position => {
+    this.currentPosition = position
+  }
+  handlePlayerAdd = player => {
+    this.props.addPlayer({
+      name: player,
+      position: this.currentPosition
+    })
+  }
   render() {
     const {
       playerlist: { playersById },
@@ -38,8 +48,19 @@ class PlayerListApp extends Component {
     return (
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
-        <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={currentList} actions={actions} />
+        <AddPlayerInput
+          addPlayer={actions.addPlayer}
+          onsubmit={this.handlePlayerAdd}
+        />
+        <AddPositionRadio
+          startPosition={this.currentPosition}
+          onpositionchange={this.handlePositionChange}
+        />
+        <PlayerList
+          players={currentList}
+          actions={actions}
+          prevCounts={(currentPage - 1)*5}
+        />
         <Pagination
           pageCounts={pageCounts}
           currentPage={currentPage}
diff --git a/src/reducers/playerlist.js b/src/reducers/playerlist.js
index 1bc7457..b3d385a 100755
--- a/src/reducers/playerlist.js
+++ b/src/reducers/playerlist.js
@@ -49,9 +49,8 @@ export default function players(state = initialState, action) {
         playersById: [
           ...state.playersById,
           {
-            name: action.name,
             team: 'LOS ANGELES LAKERS',
-            position: 'SF',
+            ...action.info
           },
         ],
       };
@@ -63,6 +62,7 @@ export default function players(state = initialState, action) {
         ),
       };
     case types.STAR_PLAYER:
+      debugger
       let players = [...state.playersById];
       let player = players.find((item, index) => index === action.id);
       player.starred = !player.starred;