weijia pull request

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "jest",
     "eject": "react-scripts eject"
   },
   "dependencies": {
@@ -18,7 +18,14 @@
     "redux": "^4.0.5"
   },
   "devDependencies": {
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "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/actions/PlayersActions.js

@@ -1,9 +1,10 @@
 import * as types from '../constants/ActionTypes';
 
-export function addPlayer(name) {
+export function addPlayer(name,position) {
   return {
     type: types.ADD_PLAYER,
     name,
+    position
   };
 }
 

src/components/AddPlayerInput.js

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

src/components/PlayerList.css

@@ -1,4 +1,4 @@
 :local(.playerList) {
   padding-left: 0;
   margin-bottom: 0;
-}
+}

src/components/PlayerList.js

@@ -1,26 +1,57 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import styles from './PlayerList.css';
 import PlayerListItem from './PlayerListItem';
 
+const PaginationBtn = ({text, onClick}) => {
+  return <button onClick={onClick}>{text}</button>
+};
+
 class PlayerList extends Component {
+  state = {
+    currentPage: 0,
+    showPlayers: []
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    const showPlayers = props.players.slice(state.currentPage * 5, state.currentPage * 5 + 5);
+    return {
+      showPlayers
+    }
+  }
+
+  handleNextPage = () => {
+    const {currentPage} = this.state;
+    this.setState({currentPage: currentPage + 1})
+  };
+
+  handlePrevPage = () => {
+    const {currentPage} = this.state;
+    this.setState({currentPage: currentPage - 1})
+  };
+
   render() {
+    const {currentPage, showPlayers} = 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>
+      <>
+        <ul className={styles.playerList}>
+          {showPlayers.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>
+        {currentPage > 0 ? <PaginationBtn text={`<`} onClick={this.handlePrevPage}/>:''}
+        {showPlayers.length === 5 && <PaginationBtn text={`>`} onClick={this.handleNextPage}/>}
+      </>
     );
   }
 }

src/components/PlayerPositionSelect.js

@@ -0,0 +1,28 @@
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+
+const POSITION = ["C", "PG", "SG", "SF", "PF"];
+
+class PlayerPositionSelect extends Component {
+  selectChange=(e)=>{
+    this.props.onChange(e.target.value);
+  };
+
+  render() {
+    return <select defaultValue={this.props.value} onChange={this.selectChange}>
+      {POSITION.map(item => {
+        return <option key={item} value={item}>{item}</option>
+      })}
+    </select>;
+  }
+}
+
+PlayerPositionSelect.propTypes = {
+  onChange:PropTypes.func,
+  value:PropTypes.string
+};
+PlayerPositionSelect.defaultProps = {
+  onChange:()=>{},
+  value:POSITION[0]
+};
+export default PlayerPositionSelect;

src/components/PlayerPositionSelect.test.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Adapter from 'enzyme-adapter-react-16'
+import { shallow, configure } from 'enzyme'
+configure({ adapter: new Adapter() });
+
+import PlayerPositionSelect from "./PlayerPositionSelect";
+
+describe("<PlayerPositionSelect />", () => {
+  it("PlayerPositionSelect", () => {
+    const renderer = shallow(<PlayerPositionSelect />);
+    expect(renderer.text()).toEqual("CPGSGSFPF");
+  });
+});

src/reducers/playerlist.js

@@ -51,7 +51,7 @@ export default function players(state = initialState, action) {
           {
             name: action.name,
             team: 'LOS ANGELES LAKERS',
-            position: 'SF',
+            position: action.position,
           },
         ],
       };