From ea3a693834737dc2f0a7a485bc088f41229338f5 Mon Sep 17 00:00:00 2001 From: kingswei <510137831@qq.com> Date: Tue, 9 Jun 2020 22:05:58 +0800 Subject: [PATCH 1/2] init --- package.json | 10 +++++- src/actions/PlayersActions.js | 8 +++++ src/components/PlayerList.js | 34 +++++++++++++------- src/components/PlayerListItem.js | 4 +-- src/constants/ActionTypes.js | 2 ++ src/containers/App.js | 4 +++ src/containers/PlayerListApp.js | 9 ++++-- src/reducers/playerlist.js | 55 ++++++++++++++++++++++++++++++++ 8 files changed, 108 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index f6c7705..d93baf4 100755 --- a/package.json +++ b/package.json @@ -10,15 +10,23 @@ }, "dependencies": { "classnames": "^2.2.6", + "element-react": "^1.4.34", + "element-theme-default": "^1.4.13", "lodash": "^4.17.15", "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", + "react-hot-loader": "^4.12.21", "react-redux": "^7.2.0", "redux": "^4.0.5" }, "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..de4588f 100755 --- a/src/actions/PlayersActions.js +++ b/src/actions/PlayersActions.js @@ -20,3 +20,11 @@ export function starPlayer(id) { id, }; } + + +export function pageCurrentChangePlayer(currentPage) { + return { + type: types.PAGE_CURRENT_CHANGE_PLAYER, + currentPage, + }; +} diff --git a/src/components/PlayerList.js b/src/components/PlayerList.js index 7b40246..368d9a2 100755 --- a/src/components/PlayerList.js +++ b/src/components/PlayerList.js @@ -3,24 +3,34 @@ import PropTypes from 'prop-types'; import styles from './PlayerList.css'; import PlayerListItem from './PlayerListItem'; +import { Pagination } from 'element-react'; + + class PlayerList extends Component { render() { return ( +
+
+ +
+
); } } diff --git a/src/components/PlayerListItem.js b/src/components/PlayerListItem.js index ec9758c..730e91e 100755 --- a/src/components/PlayerListItem.js +++ b/src/components/PlayerListItem.js @@ -21,7 +21,7 @@ class PlayerListItem extends Component { diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index b796fae..0d74029 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 PAGE_CURRENT_CHANGE_PLAYER = 'PAGE_CURRENT_CHANGE_PLAYER'; diff --git a/src/containers/App.js b/src/containers/App.js index 6043881..339342e 100755 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -1,4 +1,8 @@ import React, { Component } from 'react'; + + +import 'element-theme-default'; + import { combineReducers, createStore } from 'redux'; import { Provider } from 'react-redux'; diff --git a/src/containers/PlayerListApp.js b/src/containers/PlayerListApp.js index 0e4bfa5..1a4231b 100755 --- a/src/containers/PlayerListApp.js +++ b/src/containers/PlayerListApp.js @@ -2,26 +2,28 @@ 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,pageCurrentChangePlayer } from '../actions/PlayersActions'; + import { PlayerList, AddPlayerInput } from '../components'; class PlayerListApp extends Component { render() { const { - playerlist: { playersById }, + playerlist: { playersById } } = this.props; const actions = { addPlayer: this.props.addPlayer, deletePlayer: this.props.deletePlayer, starPlayer: this.props.starPlayer, + pageCurrentChangePlayer: this.props.pageCurrentChangePlayer }; return (

NBA Players

- +
); } @@ -37,5 +39,6 @@ export default connect( addPlayer, deletePlayer, starPlayer, + pageCurrentChangePlayer }, )(PlayerListApp); diff --git a/src/reducers/playerlist.js b/src/reducers/playerlist.js index 1bc7457..2274721 100755 --- a/src/reducers/playerlist.js +++ b/src/reducers/playerlist.js @@ -37,8 +37,39 @@ const initialState = { team: 'TORONTO RAPTORS', position: 'SF', starred: false, + },{ + name: 'Kawhi Leonard', + team: 'TORONTO RAPTORS', + position: 'SF', + starred: false, + },{ + name: 'Kawhi Leonard', + team: 'TORONTO RAPTORS', + position: 'SF', + starred: false, + },{ + name: 'Kawhi Leonard', + team: 'TORONTO RAPTORS', + position: 'SF', + starred: false, + },{ + name: 'Kawhi Leonard', + team: 'TORONTO RAPTORS', + position: 'SF', + starred: false, + },{ + name: 'Kawhi Leonard', + team: 'TORONTO RAPTORS', + position: 'SF', + starred: false, + },{ + name: 'Kawhi Leonard', + team: 'TORONTO RAPTORS', + position: 'SF', + starred: false, }, ], + currentPage: 1 }; export default function players(state = initialState, action) { @@ -55,6 +86,9 @@ export default function players(state = initialState, action) { }, ], }; + + + case types.DELETE_PLAYER: return { ...state, @@ -62,6 +96,11 @@ export default function players(state = initialState, action) { (item, index) => index !== action.id, ), }; + + + + + case types.STAR_PLAYER: let players = [...state.playersById]; let player = players.find((item, index) => index === action.id); @@ -71,6 +110,22 @@ export default function players(state = initialState, action) { playersById: players, }; + + + case types.PAGE_CURRENT_CHANGE_PLAYER: + console.log(state); + console.log(action); + + let curPage = action.currentPage; + + return { + ...state, + currentPage: curPage + }; + + + + default: return state; } From 6304f1449bd21c265bb0cd548919329908bf5a51 Mon Sep 17 00:00:00 2001 From: kingswei <510137831@qq.com> Date: Tue, 9 Jun 2020 22:09:22 +0800 Subject: [PATCH 2/2] remove --- src/reducers/playerlist.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/reducers/playerlist.js b/src/reducers/playerlist.js index 2274721..0942db5 100755 --- a/src/reducers/playerlist.js +++ b/src/reducers/playerlist.js @@ -113,8 +113,6 @@ export default function players(state = initialState, action) { case types.PAGE_CURRENT_CHANGE_PLAYER: - console.log(state); - console.log(action); let curPage = action.currentPage;