feat: 分页+选择

src/actions/PlayersActions.js

@@ -1,22 +1,35 @@
 import * as types from '../constants/ActionTypes';
 
 export function addPlayer(name) {
-  return {
-    type: types.ADD_PLAYER,
-    name,
-  };
+    return {
+        type: types.ADD_PLAYER,
+        name,
+    };
 }
 
-export function deletePlayer(id) {
-  return {
-    type: types.DELETE_PLAYER,
-    id,
-  };
+export function deletePlayer(name) {
+    return {
+        type: types.DELETE_PLAYER,
+        name,
+    };
 }
 
 export function starPlayer(id) {
-  return {
-    type: types.STAR_PLAYER,
-    id,
-  };
+    return {
+        type: types.STAR_PLAYER,
+        id,
+    };
+}
+
+export function selectPosition(value) {
+    return {
+        type: types.SELECT_PLAYER,
+        position: value
+    }
+}
+export function currentPageChange(current){
+    return {
+        type:types.CURRENT_PAGE,
+        current:current
+    }
 }

src/components/AddPlayerInput.js

@@ -31,7 +31,12 @@ class AddPlayerInput extends Component {
 
   handleSubmit(e) {
     const name = e.target.value.trim();
+    const {playersByIdList} =this.props
     if (e.which === 13) {
+      // 应为通过名称来匹配删除，所以名称不可重复
+      if(playersByIdList.some((item,index)=>item.name===name)){
+        return alert('名称不可重复')
+      }
       this.props.addPlayer(name);
       this.setState({ name: '' });
     }
@@ -40,6 +45,8 @@ class AddPlayerInput extends Component {
 
 AddPlayerInput.propTypes = {
   addPlayer: PropTypes.func.isRequired,
+  playersByIdList: PropTypes.array.isRequired,
+
 };
 
 export default AddPlayerInput;

src/components/Pagination.js

@@ -0,0 +1,50 @@
+import React from "react";
+import {currentPageChange} from "../actions/PlayersActions";
+import {connect} from "react-redux";
+import PropTypes from "prop-types";
+import AddPlayerInput from "./AddPlayerInput";
+
+function Pagination(props) {
+    const {
+        playerList: {currentPage}, playersList
+    } = props
+
+    function topPage() {
+        if (currentPage === 1) return
+        props.currentPageChange(currentPage - 1)
+    }
+
+    function btmPage() {
+        if (Math.ceil(playersList.length / 5) === currentPage) return
+        props.currentPageChange(currentPage + 1)
+    }
+
+    let list = props.playersList.map((item, index) => {
+        return Math.ceil((index + 1) / 5)
+    })
+    list = list?.length ? [...new Set(list)] : []
+
+    return (
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+        }}>
+            <span className={'mr-10 icon'} onClick={topPage}> {`<`} </span>
+            {list?.map((item, index) => {
+                return <span
+                    className={'mr-10 icon'}
+                    style={{color: currentPage === index+1 ? 'red' : ''}}
+                    key={index}
+                    onClick={() => {
+                        props.currentPageChange(item)
+                    }
+                    }>{item}</span>
+
+            })}
+            <span className={'icon'} onClick={btmPage}> {`>`} </span>
+        </div>
+    )
+}
+export default connect(({playerList}) => ({playerList}), {
+    currentPageChange
+})(Pagination)

src/components/PlayerListItem.js

@@ -19,7 +19,7 @@ class PlayerListItem extends Component {
         </div>
         <div className={styles.playerActions}>
           <button
-            className={`btn btn-default ${styles.btnAction}`}
+            className={`btn btn-default ${styles.btnAction} mr-10`}
             onClick={() => this.props.starPlayer(this.props.id)}
           >
             <i
@@ -31,7 +31,7 @@ class PlayerListItem extends Component {
           </button>
           <button
             className={`btn btn-default ${styles.btnAction}`}
-            onClick={() => this.props.deletePlayer(this.props.id)}
+            onClick={() => this.props.deletePlayer(this.props.name)}
           >
             <i className="fa fa-trash" />
           </button>

src/components/SelectPosition.js

@@ -0,0 +1,29 @@
+import React from "react";
+import {connect} from 'react-redux';
+import {PositionType} from '../enumeration'
+import {selectPosition} from '../actions/PlayersActions';
+
+
+function SelectPosition(props) {
+    return (
+        <div>
+            <select
+                style={{width:'180px',margin:'20px 0'}}
+                onChange={(event) => {
+                    props.selectPosition(event.target.value)
+                }}>
+                {PositionType.map((item, index) => (
+                    <option  key={index} value={item}>
+                        {item}
+                    </option>
+                ))}
+            </select>
+        </div>
+    )
+}
+
+export default connect(function (state) {
+    return state
+}, {
+    selectPosition
+})(SelectPosition)

src/constants/ActionTypes.js

@@ -1,3 +1,5 @@
 export const ADD_PLAYER = 'ADD_PLAYER';
 export const STAR_PLAYER = 'STAR_PLAYER';
 export const DELETE_PLAYER = 'DELETE_PLAYER';
+export const SELECT_PLAYER = 'SELECT_PLAYER'
+export const CURRENT_PAGE = 'CURRENT_PAGE'

src/containers/PlayerListApp.css

@@ -22,3 +22,18 @@ body {
   padding-left: 10px;
   font-family: Helvetica;
 }
+.mr-10{
+  margin-right: 10px;
+}
+.icon{
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  outline: none;
+  transition: all .3s;
+}

src/containers/PlayerListApp.js

@@ -1,41 +1,55 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import styles from './PlayerListApp.css';
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';
 
-import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
-import { PlayerList, AddPlayerInput } from '../components';
+import {addPlayer, deletePlayer, starPlayer,} from '../actions/PlayersActions';
+import {PlayerList, AddPlayerInput} from '../components';
+import SelectPosition from "../components/SelectPosition";
+import Pagination from "../components/Pagination";
 
 class PlayerListApp extends Component {
-  render() {
-    const {
-      playerlist: { playersById },
-    } = this.props;
+    render() {
+        console.log(this.props, 'props')
+        const {
+            playerList: {playersById, position, currentPage}
+        } = this.props;
+        let playersByIds = position !== '全部类型' ? playersById.filter((item, index) => item.position === position) : playersById
+        let currentPlayersByIds = playersByIds?.filter((item, index) => {
+            if (
+                Math.ceil((index + 1) / 5) === currentPage) {
+                return true
+            }
+        })
+        console.log(playersByIds, 'currentPlayersByIds', currentPlayersByIds)
+        const actions = {
+            addPlayer: this.props.addPlayer,
+            deletePlayer: this.props.deletePlayer,
+            starPlayer: this.props.starPlayer,
+        };
 
-    const actions = {
-      addPlayer: this.props.addPlayer,
-      deletePlayer: this.props.deletePlayer,
-      starPlayer: this.props.starPlayer,
-    };
-
-    return (
-      <div className={styles.playerListApp}>
-        <h1>NBA Players</h1>
-        <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
-      </div>
-    );
-  }
+        return (
+            <div className={styles.playerListApp}>
+                <h1>NBA Players</h1>
+                <AddPlayerInput addPlayer={actions.addPlayer} playersByIdList={playersById}/>
+                <SelectPosition/>
+                <PlayerList players={currentPlayersByIds} actions={actions}/>
+                {currentPlayersByIds.length ? <div>
+                    <Pagination playersList={playersByIds}/>
+                </div>:<div>暂无数据</div>}
+            </div>
+        );
+    }
 }
 
 function mapStateToProps(state) {
-  return state;
+    return state;
 }
 
 export default connect(
-  mapStateToProps,
-  {
-    addPlayer,
-    deletePlayer,
-    starPlayer,
-  },
+    mapStateToProps,
+    {
+        addPlayer,
+        deletePlayer,
+        starPlayer,
+    },
 )(PlayerListApp);

src/enumeration.js

@@ -0,0 +1,4 @@
+export const PositionType = [
+    '全部类型','SF','PF','PG','SG',
+
+]

src/reducers/index.js

@@ -1 +1 @@
-export { default as playerlist } from './playerlist';
+export { default as playerList } from './playerList';