From 48818d5b6b3b80e9bafd8c32d77d010ea3450524 Mon Sep 17 00:00:00 2001
From: peng-wentao <a401283227@qq.com>
Date: Fri, 13 Mar 2020 21:18:55 +0800
Subject: [PATCH] pwt-first-commit

---
 package.json                     |  7 +++-
 src/actions/PlayersActions.js    |  8 ++++
 src/components/PlayerList.js     | 66 ++++++++++++++++++++++++++++++--
 src/components/PlayerListItem.js | 19 +++++++++
 src/containers/PlayerListApp.js  |  7 +++-
 src/reducers/playerlist.js       | 15 ++++++++
 6 files changed, 116 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index f6c7705..8aa1ea9 100755
--- a/package.json
+++ b/package.json
@@ -20,5 +20,10 @@
   "devDependencies": {
     "react-scripts": "3.4.0"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }
diff --git a/src/actions/PlayersActions.js b/src/actions/PlayersActions.js
index 8f427c2..1d247bf 100755
--- a/src/actions/PlayersActions.js
+++ b/src/actions/PlayersActions.js
@@ -20,3 +20,11 @@ export function starPlayer(id) {
     id,
   };
 }
+
+export function changePosition({id,position}){
+	
+	return {
+		type:'change_position',
+		data:{id,position},
+	};
+}
\ No newline at end of file
diff --git a/src/components/PlayerList.js b/src/components/PlayerList.js
index 7b40246..c05630f 100755
--- a/src/components/PlayerList.js
+++ b/src/components/PlayerList.js
@@ -4,14 +4,65 @@ import styles from './PlayerList.css';
 import PlayerListItem from './PlayerListItem';
 
 class PlayerList extends Component {
+	
+    state={
+		n:1
+	}
+	
+	handleClick=(event)=>{
+		event.persist()
+		this.setState({n:Number(event.target.innerText)})
+		
+	}
+	
   render() {
+	  var totalCount=this.props.players.length//总条数
+	  var pageCount=5//每页总条数
+	  var totalPage//总页数
+	  var start,end
+	  var {n} =this.state
+	  //先计算可以分为多少页-----------------
+	  　　　　　　　　　　if(totalCount % pageCount === 0){
+	  　　　　　　　　　　　　//整除，页面为整数
+	  　　　　　　　　　　　　totalPage=totalCount/pageCount;
+	  　　　　　　　　　　}else{
+	  　　　　　　　　　　　　//有余数，页面加一
+	  　　　　　　　　　　　　totalPage=Math.ceil(totalCount/pageCount);
+	  　　　　　　　　　　}
+	  //查询页面数据--------------------------
+	  　　　　　　　　　　if(totalCount % pageCount === 0){
+	  　　　　　　　　　　　　//整除的时候每页的初始数据
+	  　　　　　　　　　　　　start=(n-1)*pageCount+1;
+	  　　　　　　　　　　　　//整除的时候每页的最后数据
+	  　　　　　　　　　　　　end=n*pageCount;
+	  　　　　　　　　　　}else{
+	  　　　　　　　　　　　　//有余数的时候查询页的初始数据
+	  　　　　　　　　　　　　start=(n-1)*pageCount+1;
+	  　　　　　　　　　　　　if(1<=n && n<totalPage){
+	      　　　　　　　　　　　　　　//有余数的时候查询页的最终数据
+	  　　　　　　　　　　　　　　　end=n*pageCount;
+	  　　　　　　　　　　　　}else{
+	  　　　　　　　　　　　　　　　//有余数的时候最后一页的最终数据
+	  　　　　　　　　　　　　　　　end=totalCount;
+	  　　　　　　　　　　　　}
+	   　　　　　　　　　　}
+	   
+	   var newPlayers=this.props.players.slice(start-1,end)
+	   var pages=[]
+	   for(let p=0;p<totalPage;p++){
+		   pages.push('')
+	   }
+	   
+
+	  
     return (
-      <ul className={styles.playerList}>
-        {this.props.players.map((player, index) => {
+	<div>
+	 <ul className={styles.playerList}>
+        {newPlayers.map((player, index) => {
           return (
             <PlayerListItem
               key={index}
-              id={index}
+              id={(n-1)*pageCount+index}
               name={player.name}
               team={player.team}
               position={player.position}
@@ -21,6 +72,15 @@ class PlayerList extends Component {
           );
         })}
       </ul>
+	  <ul style={{listStyle:'none'}}>
+		{  
+			pages.map((page,index)=>{
+				return (<li key={index}><a href="#" style={{float:'left'}} onClick={this.handleClick}>{index+1}</a></li>)
+			})
+		 
+		}
+	  </ul>
+	 </div>
     );
   }
 }
diff --git a/src/components/PlayerListItem.js b/src/components/PlayerListItem.js
index ec9758c..598a272 100755
--- a/src/components/PlayerListItem.js
+++ b/src/components/PlayerListItem.js
@@ -4,6 +4,16 @@ import PropTypes from 'prop-types';
 import styles from './PlayerListItem.css';
 
 class PlayerListItem extends Component {
+	
+	state={position:this.props.position}
+	
+	handleChange=(event)=>{
+		event.persist()
+		this.setState({position:event.target.value})
+		setTimeout(()=>this.props.changePosition({id:this.props.id,position:this.state.position}))
+		
+	}
+	
   render() {
     return (
       <li className={styles.playerListItem}>
@@ -36,6 +46,15 @@ class PlayerListItem extends Component {
             <i className="fa fa-trash" />
           </button>
         </div>
+		<div>
+			<select value={this.state.position} onChange={this.handleChange}>
+				<option value='SF'>SF</option>
+				<option value='PF'>PF</option>
+				<option value='PG'>PG</option>
+				<option value='SG'>SG</option>
+			</select>
+		</div>
+		
       </li>
     );
   }
diff --git a/src/containers/PlayerListApp.js b/src/containers/PlayerListApp.js
index 0e4bfa5..af440cd 100755
--- a/src/containers/PlayerListApp.js
+++ b/src/containers/PlayerListApp.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
 
-import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
+import { addPlayer, deletePlayer, starPlayer, changePosition } from '../actions/PlayersActions';
 import { PlayerList, AddPlayerInput } from '../components';
 
 class PlayerListApp extends Component {
@@ -15,8 +15,10 @@ class PlayerListApp extends Component {
       addPlayer: this.props.addPlayer,
       deletePlayer: this.props.deletePlayer,
       starPlayer: this.props.starPlayer,
+	  changePosition:this.props.changePosition,
+	  
     };
-
+	console.log(actions)
     return (
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
@@ -37,5 +39,6 @@ export default connect(
     addPlayer,
     deletePlayer,
     starPlayer,
+	changePosition
   },
 )(PlayerListApp);
diff --git a/src/reducers/playerlist.js b/src/reducers/playerlist.js
index 1bc7457..0ce9520 100755
--- a/src/reducers/playerlist.js
+++ b/src/reducers/playerlist.js
@@ -70,6 +70,21 @@ export default function players(state = initialState, action) {
         ...state,
         playersById: players,
       };
+	case 'change_position':
+	  return {
+		  ...state,
+		  playersById: state.playersById.map(
+		    (item, index) =>{
+				if(index !== action.data.id)
+				return item
+				else{
+					var newitem=item
+					newitem.position=action.data.position
+					return newitem
+				}  
+				}
+		  ),
+	  }
 
     default:
       return state;