From 20e7764d73e89e35781f6493bcbfc93bbdca7b0d Mon Sep 17 00:00:00 2001 From: "xiaozf@jian1024.com" Date: Wed, 3 Nov 2021 19:54:48 +0800 Subject: [PATCH] pr --- src/actions/PlayersActions.js | 39 +++++--- src/components/AddPlayerInput.js | 7 ++ src/components/Pagination.js | 50 ++++++++++ src/components/PlayerListItem.js | 4 +- src/components/SelectPosition.js | 29 ++++++ src/constants/ActionTypes.js | 2 + src/containers/PlayerListApp.css | 15 +++ src/containers/PlayerListApp.js | 72 ++++++++------ src/enumeration.js | 4 + src/reducers/index.js | 2 +- src/reducers/playerlist.js | 155 +++++++++++++++++-------------- 11 files changed, 264 insertions(+), 115 deletions(-) create mode 100644 src/components/Pagination.js create mode 100644 src/components/SelectPosition.js create mode 100644 src/enumeration.js diff --git a/src/actions/PlayersActions.js b/src/actions/PlayersActions.js index 8f427c2..ec7e1e9 100755 --- a/src/actions/PlayersActions.js +++ b/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 + } } diff --git a/src/components/AddPlayerInput.js b/src/components/AddPlayerInput.js index 5d914d8..927b516 100755 --- a/src/components/AddPlayerInput.js +++ b/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; diff --git a/src/components/Pagination.js b/src/components/Pagination.js new file mode 100644 index 0000000..ff8584f --- /dev/null +++ b/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 ( +
+ {`<`} + {list?.map((item, index) => { + return { + props.currentPageChange(item) + } + }>{item} + + })} + {`>`} +
+ ) +} +export default connect(({playerList}) => ({playerList}), { + currentPageChange +})(Pagination) \ No newline at end of file diff --git a/src/components/PlayerListItem.js b/src/components/PlayerListItem.js index ec9758c..457e14a 100755 --- a/src/components/PlayerListItem.js +++ b/src/components/PlayerListItem.js @@ -19,7 +19,7 @@ class PlayerListItem extends Component {
diff --git a/src/components/SelectPosition.js b/src/components/SelectPosition.js new file mode 100644 index 0000000..001ad2f --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +export default connect(function (state) { + return state +}, { + selectPosition +})(SelectPosition) \ No newline at end of file diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index b796fae..d2c8165 100755 --- a/src/constants/ActionTypes.js +++ b/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' diff --git a/src/containers/PlayerListApp.css b/src/containers/PlayerListApp.css index f438bf1..1299cb9 100755 --- a/src/containers/PlayerListApp.css +++ b/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; +} \ No newline at end of file diff --git a/src/containers/PlayerListApp.js b/src/containers/PlayerListApp.js index 0e4bfa5..9b225f7 100755 --- a/src/containers/PlayerListApp.js +++ b/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 ( -
-

NBA Players

- - -
- ); - } + return ( +
+

NBA Players

+ + + + {currentPlayersByIds.length ?
+ +
:
暂无数据
} +
+ ); + } } function mapStateToProps(state) { - return state; + return state; } export default connect( - mapStateToProps, - { - addPlayer, - deletePlayer, - starPlayer, - }, + mapStateToProps, + { + addPlayer, + deletePlayer, + starPlayer, + }, )(PlayerListApp); diff --git a/src/enumeration.js b/src/enumeration.js new file mode 100644 index 0000000..9be7e65 --- /dev/null +++ b/src/enumeration.js @@ -0,0 +1,4 @@ +export const PositionType = [ + '全部类型','SF','PF','PG','SG', + +] \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index dfcdc70..cc5c6ad 100755 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1 +1 @@ -export { default as playerlist } from './playerlist'; +export { default as playerList } from './playerList'; diff --git a/src/reducers/playerlist.js b/src/reducers/playerlist.js index 1bc7457..5c941eb 100755 --- a/src/reducers/playerlist.js +++ b/src/reducers/playerlist.js @@ -1,77 +1,92 @@ import * as types from '../constants/ActionTypes'; -const initialState = { - playersById: [ - { - name: 'LeBron James', - team: 'LOS ANGELES LAKERS', - position: 'SF', - starred: true, - }, - { - name: 'Kevin Duran', - team: 'GOLDEN STATE WARRIORS', - position: 'SF', - starred: false, - }, - { - name: 'Anthony Davis', - team: 'NEW ORLEANS PELICANS', - position: 'PF', - starred: false, - }, - { - name: 'Stephen Curry', - team: 'GOLDEN STATE WARRIORS', - position: 'PG', - starred: false, - }, - { - name: 'James Harden', - team: 'HOUSTON ROCKETS', - position: 'SG', - starred: false, - }, - { - name: 'Kawhi Leonard', - team: 'TORONTO RAPTORS', - position: 'SF', - starred: false, - }, - ], -}; -export default function players(state = initialState, action) { - switch (action.type) { - case types.ADD_PLAYER: - return { - ...state, - playersById: [ - ...state.playersById, - { - name: action.name, +const initialState = { + playersById: [ + { + name: 'LeBron James', team: 'LOS ANGELES LAKERS', position: 'SF', - }, - ], - }; - case types.DELETE_PLAYER: - return { - ...state, - playersById: state.playersById.filter( - (item, index) => index !== action.id, - ), - }; - case types.STAR_PLAYER: - let players = [...state.playersById]; - let player = players.find((item, index) => index === action.id); - player.starred = !player.starred; - return { - ...state, - playersById: players, - }; + starred: true, + }, + { + name: 'Kevin Duran', + team: 'GOLDEN STATE WARRIORS', + position: 'SF', + starred: false, + }, + { + name: 'Anthony Davis', + team: 'NEW ORLEANS PELICANS', + position: 'PF', + starred: false, + }, + { + name: 'Stephen Curry', + team: 'GOLDEN STATE WARRIORS', + position: 'PG', + starred: false, + }, + { + name: 'James Harden', + team: 'HOUSTON ROCKETS', + position: 'SG', + starred: false, + }, + { + name: 'Kawhi Leonard', + team: 'TORONTO RAPTORS', + position: 'SF', + starred: false, + }, + ], + position: '全部类型', + currentPage: 1 +}; - default: - return state; - } +export default function players(state = initialState, action) { + switch (action.type) { + case types.ADD_PLAYER: + return { + ...state, + currentPage: 1, + playersById: [ + ...state.playersById, + { + name: action.name, + team: 'LOS ANGELES LAKERS', + position: 'SF', + }, + ], + }; + case types.DELETE_PLAYER: + return { + ...state, + currentPage: 1, + playersById: state.playersById.filter( + (item, index) => item.name !== action.name, + ), + }; + case types.STAR_PLAYER: + let players = [...state.playersById]; + let player = players.find((item, index) => index === action.id); + player.starred = !player.starred; + return { + ...state, + playersById: players, + }; + case types.SELECT_PLAYER: + return { + ...state, + currentPage: 1, + position: action.position + }; + case types.CURRENT_PAGE: + return { + ...state, + currentPage: action.current + } + default: + return state; + } }