hi, roughly finished 2 marjor feature

package.json

@@ -9,16 +9,26 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
+    "antd": "^4.15.2",
     "classnames": "^2.2.6",
     "lodash": "^4.17.15",
+    "node-sass": "4.14.1",
     "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",
+    "typescript": "^4.2.4",
+    "uuid": "^8.3.2",
+    "yarn": "^1.22.10"
   },
   "devDependencies": {
-    "react-scripts": "3.4.0"
+    "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,9 @@
-import * as types from '../constants/ActionTypes';
+import * as types from "../constants/ActionTypes";
 
-export function addPlayer(name) {
+export function addPlayer(newPlayer) {
   return {
     type: types.ADD_PLAYER,
-    name,
+    newPlayer,
   };
 }
 
@@ -20,3 +20,10 @@ export function starPlayer(id) {
     id,
   };
 }
+
+export const filterPlayer = (position) => {
+  return {
+    type: types.FILTER_PLAYER,
+    position,
+  };
+};

src/components/add-player-input/AddPlayerInput.js

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import classnames from "classnames";
+import PropTypes from "prop-types";
+import { POS_TYPES, Options } from "../../constants/posTypes";
+
+import styles from "./AddPlayerInput.module.scss";
+
+class AddPlayerInput extends Component {
+  render() {
+    return (
+      <div className={styles.addPlayerFeild}>
+        <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)}
+        />
+        <select onChange={this.handlePositionSelect}>{Options}</select>
+      </div>
+    );
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: "",
+      position: POS_TYPES.SF,
+    };
+  }
+
+  handleChange(e) {
+    this.setState({ name: e.target.value });
+  }
+  handlePositionSelect = (e) => {
+    this.setState({ position: e.target.value });
+  };
+  handleSubmit(e) {
+    const name = e.target.value.trim();
+    if (e.which === 13) {
+      console.log(this.state.position);
+      this.props.addPlayer({ name, position: this.state.position });
+      this.setState({ name: "" });
+    }
+  }
+}
+
+AddPlayerInput.propTypes = {
+  addPlayer: PropTypes.func.isRequired,
+};
+
+export default AddPlayerInput;

src/components/add-player-input/AddPlayerInput.module.scss

@@ -0,0 +1,14 @@
+.addPlayerFeild {
+  display: flex;
+  margin-bottom: 4px;
+  select {
+    padding: 0 10px;
+  }
+  .addPlayerInput {
+    border-radius: 0;
+    border-color: #abaaaa;
+    border-left: 0;
+    border-right: 0;
+    width: 100%;
+  }
+}

src/components/index.js

@@ -1,3 +1,3 @@
-export { default as AddPlayerInput } from './AddPlayerInput';
-export { default as PlayerList } from './PlayerList';
-export { default as PlayerListItem } from './PlayerListItem';
+export { default as AddPlayerInput } from './add-player-input/AddPlayerInput';
+export { default as PlayerList } from './player-list/PlayerList';
+export { default as PlayerListItem } from './player-list-item/PlayerListItem';

src/components/pagination/index.module.scss

@@ -0,0 +1,11 @@
+.paginationWrapper {
+  width: 100%;
+  padding: 5px 0;
+  text-align: center;
+  color: antiquewhite;
+  font-size: larger;
+
+  .arrow {
+    cursor: pointer;
+  }
+}

src/components/pagination/index.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react'
+import styles from './index.module.scss'
+
+interface IPagination {
+  pageNo: number
+  pageSize: number
+}
+
+interface IProps {
+  initPagination: IPagination
+  total: number
+  onChange: Function
+}
+
+export default (props: IProps) => {
+  const { total, initPagination, onChange } = props
+  const [pageNo, setNo] = useState(initPagination.pageNo)
+  const [pageSize] = useState(initPagination.pageSize)
+  const [maxPages, setMaxPages] = useState(Math.ceil(total / pageSize) || 1)
+
+  useEffect(() => {
+    setMaxPages(Math.ceil(total / pageSize) || 1)
+    setNo(initPagination.pageNo)
+    onChange({ pageNo: initPagination.pageNo, pageSize })
+  }, [total, pageSize])
+
+  const handlePaginationChange = (accumlation: number) => {
+    let no = accumlation + pageNo
+    if (no > maxPages) no = maxPages
+    else if (no < 1) no = 1
+
+    onChange({ pageNo: no, pageSize })
+    setNo(no)
+  }
+
+  return (
+    <div className={styles.paginationWrapper}>
+      <span className={styles.arrow} onClick={() => handlePaginationChange(-1)}>
+        ←
+      </span>
+      <span>{pageNo}</span> / <span>{maxPages}</span>
+      <span className={styles.arrow} onClick={() => handlePaginationChange(1)}>
+        →
+      </span>
+    </div>
+  )
+}

src/components/PlayerListItem.js → src/components/player-list-item/PlayerListItem.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import styles from './PlayerListItem.css';
+import React, { Component } from "react";
+import classnames from "classnames";
+import PropTypes from "prop-types";
+import styles from "./PlayerListItem.module.scss";
 
 class PlayerListItem extends Component {
   render() {
@@ -23,9 +23,9 @@ class PlayerListItem extends Component {
             onClick={() => this.props.starPlayer(this.props.id)}
           >
             <i
-              className={classnames('fa', {
-                'fa-star': this.props.starred,
-                'fa-star-o': !this.props.starred,
+              className={classnames("fa", {
+                "fa-star": this.props.starred,
+                "fa-star-o": !this.props.starred,
               })}
             />
           </button>
@@ -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/components/PlayerListItem.css → src/components/player-list-item/PlayerListItem.module.scss

@@ -1,27 +1,27 @@
-:local(.playerListItem) {
+.playerListItem {
   list-style: none;
   padding: 20px 10px 20px 20px;
   background-color: white;
   border-bottom: 1px solid #e3e3e3;
   display: flex;
 }
 
-:local(.playerInfos) {
+.playerInfos {
   flex: 1 0 auto;
 }
 
-:local(.playerInfos span) {
+.playerInfos span {
   font-weight: bold;
 }
 
-:local(.playerActions) {
+.playerActions {
   flex: 0 0 90px;
 }
 
-:local(.btnAction),
-:local(.btnAction):active,
-:local(.btnAction):focus,
-:local(.btnAction):hover {
+.btnAction,
+.btnAction:active,
+.btnAction:focus,
+.btnAction:hover {
   margin-right: 5px;
   color: #5c75b0;
 }