新增分页、球员位置选择、修改球员标注逻辑。

package.json

@@ -15,10 +15,19 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "save-dev": "0.0.1-security"
   },
   "devDependencies": {
-    "react-scripts": "3.4.0"
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "react-scripts": "^3.4.0",
+    "react-test-renderer": "^16.13.1"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/App.test.js

@@ -1,8 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import PageList from './components/PageList'
+import shallow from 'enzyme'
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<App />, div);
 });
+
+describe('PageList component',()=>{
+  const props = {
+    totalPageNumber:6,
+    curPageNumber:1,
+  }
+})
+
+

src/actions/PlayersActions.js

@@ -1,9 +1,10 @@
 import * as types from '../constants/ActionTypes';
 
-export function addPlayer(name) {
+export function addPlayer(name,optionId) {
   return {
     type: types.ADD_PLAYER,
     name,
+    optionId,
   };
 }
 
@@ -20,3 +21,10 @@ export function starPlayer(id) {
     id,
   };
 }
+
+export function changePage(curPageNumber) {
+  return {
+    type: types.CHANGE_PAGE,
+    curPageNumber,
+  };
+}

src/components/AddPlayerInput.css

@@ -4,3 +4,7 @@
   border-left: 0;
   border-right: 0;
 }
+
+.inlineBlock{
+  display:inline-block
+}

src/components/AddPlayerInput.js

@@ -2,37 +2,48 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './AddPlayerInput.css';
+import PositionSelect from './PositionSelect'
 
 class AddPlayerInput extends Component {
   render() {
+    const { positionList } = this.props;
     return (
-      <input
+      <div>
+        <input
         type="text"
         autoFocus={true}
-        className={classnames('form-control', styles.addPlayerInput)}
+        className={classnames('form-control inlineBlock', styles.addPlayerInput)}
         placeholder="Type the name of a player"
         value={this.state.name}
         onChange={this.handleChange.bind(this)}
         onKeyDown={this.handleSubmit.bind(this)}
-      />
+        />
+        <PositionSelect positionList={positionList} onSelectChange={this.handleSelectChange.bind(this)} />
+      </div>
+
     );
   }
 
   constructor(props, context) {
     super(props, context);
     this.state = {
       name: this.props.name || '',
+      optionId: 0,
     };
   }
 
+  handleSelectChange(optionId){
+    this.setState({ optionId: optionId });
+  }
+
   handleChange(e) {
     this.setState({ name: e.target.value });
   }
 
   handleSubmit(e) {
     const name = e.target.value.trim();
     if (e.which === 13) {
-      this.props.addPlayer(name);
+      this.props.addPlayer(name,this.state.optionId);
       this.setState({ name: '' });
     }
   }

src/components/PageList.css

@@ -0,0 +1,24 @@
+.pageList{
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+  }
+
+.pageBtnAction{
+    width: 20px;
+    height: 20px;
+    background: white;
+    text-align: center;
+    float: left;
+    margin-left: 5px;
+    cursor: pointer;
+  }
+.active{
+    color: white;
+    background-color: #5c75b0;
+}
+.pageBtnAction:focus,
+.pageBtnAction:hover {
+    color: white;
+  background-color: #5c75b0;
+}

src/components/PageList.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import styles from './PageList.css';
+import classNames from 'classnames'
+
+class PageList extends Component {
+  render() {
+    let totalPageList = [];
+    for(let i = 0;i < this.props.totalPageNumber;i++){
+      totalPageList.push({pageId:i+1});
+    }
+    return (
+      <ul className="pageList">
+        {
+            totalPageList.map((v,index)=>{
+            return <li onClick={()=>this.props.changePage(index)} className={classNames("pageBtnAction",{"active": this.props.curPageNumber === index})} key={index}><span>{v.pageId}</span></li>
+            })
+        }
+      </ul>
+    );
+  }
+}
+
+export default PageList;

src/components/PositionSelect.css

@@ -0,0 +1,6 @@
+.positionOption{
+    position: absolute;
+    display: inline-block;
+    height: 34px;
+    border-radius: 4px;
+}

src/components/PositionSelect.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import {styles} from './PositionSelect.css'
+
+class PositionSelect extends Component {
+  render() {
+    const {
+        positionList
+      } = this.props;
+    return (<select className="positionOption" onChange={this.onSelectChange.bind(this)}>
+        {
+            positionList.map((v,index)=>{
+                return <option key={index} value={index}>{v.position}</option>
+            })
+        }
+    </select>)
+  }
+
+   onSelectChange(e){
+     this.props.onSelectChange(e.target.value.trim());
+   }
+}
+
+export default PositionSelect;

src/components/index.js

@@ -1,3 +1,5 @@
 export { default as AddPlayerInput } from './AddPlayerInput';
 export { default as PlayerList } from './PlayerList';
 export { default as PlayerListItem } from './PlayerListItem';
+export { default as PageList } from './PageList';
+

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 CHANGE_PAGE = 'CHANGE_PAGE';

src/containers/PlayerListApp.js

@@ -1,27 +1,29 @@
 import React, { Component } from 'react';
 import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
+import _ from 'lodash'
 
-import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
-import { PlayerList, AddPlayerInput } from '../components';
+import { addPlayer, deletePlayer, starPlayer, changePage} from '../actions/PlayersActions';
+import { PlayerList, AddPlayerInput, PageList } from '../components';
 
 class PlayerListApp extends Component {
   render() {
     const {
-      playerlist: { playersById },
+      playerlist: { playersById, curPageNumber,pageSize,positionList}
     } = this.props;
 
     const actions = {
       addPlayer: this.props.addPlayer,
       deletePlayer: this.props.deletePlayer,
       starPlayer: this.props.starPlayer,
+      changePage: this.props.changePage
     };
-
     return (
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
-        <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
+        <AddPlayerInput addPlayer={actions.addPlayer} positionList={positionList}/>
+        <PlayerList players={_.slice(playersById,curPageNumber*5,curPageNumber*5+pageSize)} actions={actions} />
+        <PageList totalPageNumber={(playersById.length / 5)} curPageNumber={curPageNumber} changePage={actions.changePage}/>
       </div>
     );
   }
@@ -37,5 +39,6 @@ export default connect(
     addPlayer,
     deletePlayer,
     starPlayer,
+    changePage
   },
 )(PlayerListApp);

src/reducers/playerlist.js

@@ -1,6 +1,9 @@
 import * as types from '../constants/ActionTypes';
 
 const initialState = {
+  curPageNumber: 0,
+  pageSize: 5,
+  positionList:[{'position':'SF'},{'position':'PG'}],
   playersById: [
     {
       name: 'LeBron James',
@@ -51,7 +54,7 @@ export default function players(state = initialState, action) {
           {
             name: action.name,
             team: 'LOS ANGELES LAKERS',
-            position: 'SF',
+            position: state.positionList[action.optionId].position,
           },
         ],
       };
@@ -64,12 +67,17 @@ export default function players(state = initialState, action) {
       };
     case types.STAR_PLAYER:
       let players = [...state.playersById];
-      let player = players.find((item, index) => index === action.id);
+      let player = players.find((item, index) => index === action.id + state.curPageNumber * state.pageSize);
       player.starred = !player.starred;
       return {
         ...state,
         playersById: players,
       };
+      case types.CHANGE_PAGE:
+      return {
+        ...state,
+        curPageNumber: action.curPageNumber,
+      };
 
     default:
       return state;