shunchang

package.json

@@ -9,16 +9,23 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
+    "antd": "^4.0.4",
     "classnames": "^2.2.6",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "save": "^2.4.0"
   },
   "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"
+  ]
 }

src/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
+import { Pagination } from 'antd';
 import './App.css';
 
 class App extends Component {

src/components/PlayerList.js

@@ -2,25 +2,98 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from './PlayerList.css';
 import PlayerListItem from './PlayerListItem';
+import { Pagination, Select } from 'antd';
 
+const { Option } = Select;
 class PlayerList extends Component {
+
+  state = {
+    current: 1,
+    arr: [], //页面列表数据
+    allArr: [], //符号select所选全量数据
+    type: 'all'
+  }
+
+  componentDidMount() {
+    const { players } = this.props;
+    let arr = [...players];
+    if(players && players.length > 5) {
+      arr.length = 5
+    }
+    this.setState({
+      arr,
+      allArr: [...players]
+    })
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if(nextProps.players !== this.props.players) {
+      let arr = this.getArr(nextProps.players);
+      this.setState({
+        arr
+      })
+    }
+  }
+
+  getArr = (data) => {
+    const { current, type } = this.state;
+    let arr = [...data];
+    if (type === 'star') arr = arr.filter(i => i.starred === true)
+    else if (type === 'noStar') arr = arr.filter(i => i.starred === false)
+    this.state.allArr = [...arr]
+    return arr.splice((current-1) * 5, 5)
+  }
+
+  handleChange = (page) => {
+    const { players } = this.props;
+    this.state.current = page
+    this.setState({
+      arr: this.getArr(players)
+    })
+  }
+
+  handleSelect = (value) => {
+    const { players } = this.props;
+    console.log(value)
+    this.state.type = value
+    this.setState({
+      arr: this.getArr(players)
+    })
+  }
+
   render() {
+    const { current, arr, type, allArr } = this.state;
     return (
-      <ul className={styles.playerList}>
-        {this.props.players.map((player, index) => {
-          return (
-            <PlayerListItem
-              key={index}
-              id={index}
-              name={player.name}
-              team={player.team}
-              position={player.position}
-              starred={player.starred}
-              {...this.props.actions}
-            />
-          );
-        })}
-      </ul>
+      <div>
+        <Select style={{width: '100px'}} value={type} onChange={this.handleSelect}>
+          <Option value="all">all</Option>
+          <Option value="star">star</Option>
+          <Option value="noStar">noStar</Option>
+        </Select>
+         <ul className={styles.playerList}>
+          {arr.map((player, index) => {
+            return (
+              <PlayerListItem
+                key={index}
+                id={player.name + player.team}
+                name={player.name}
+                team={player.team}
+                position={player.position}
+                starred={player.starred}
+                {...this.props.actions}
+              />
+            );
+          })}
+        </ul>
+        <div>
+          <Pagination 
+            onChange={this.handleChange}
+            total={allArr.length}
+            current={current}
+            pageSize={5}
+          />
+        </div>
+      </div>
     );
   }
 }

src/components/PlayerListItem.js

@@ -42,7 +42,7 @@ class PlayerListItem extends Component {
 }
 
 PlayerListItem.propTypes = {
-  id: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   team: PropTypes.string.isRequired,
   position: PropTypes.string.isRequired,

src/containers/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { combineReducers, createStore } from 'redux';
 import { Provider } from 'react-redux';
-
+import 'antd/dist/antd.css';
 import PlayerListApp from './PlayerListApp';
 import * as reducers from '../reducers';
 

src/reducers/playerlist.js

@@ -59,12 +59,12 @@ export default function players(state = initialState, action) {
       return {
         ...state,
         playersById: state.playersById.filter(
-          (item, index) => index !== action.id,
+          (item, index) => item.name+item.team !== action.id,
         ),
       };
     case types.STAR_PLAYER:
       let players = [...state.playersById];
-      let player = players.find((item, index) => index === action.id);
+      let player = players.find((item, index) => item.name+item.team === action.id);
       player.starred = !player.starred;
       return {
         ...state,