PropTypes wired up for validation on most/all components

TwilightCoders · Jul 20, 2018 · 8eb9ddd · 8eb9ddd
1 parent ed3ee21
commit 8eb9ddd
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "bootstrap": "^4.1.0",
     "mdbreact": "^4.4.0",
+    "prop-types": "^15.6.2",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-router-dom": "^4.2.2",

diff --git a/src/components/AlertModal/AlertModal.js b/src/components/AlertModal/AlertModal.js
@@ -1,12 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   Button,
   Modal,
   ModalBody,
   ModalFooter
 } from 'mdbreact';
 
-export default props => {
+const AlertModal = props => {
   return (
     <Modal isOpen={props.open} backdrop={(props.backdrop ? props.backdrop : false)} toggle={props.toggle}>
       <ModalBody>
@@ -18,3 +19,12 @@ export default props => {
     </Modal>
   );
 }
+
+AlertModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  message: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired,
+  backdrop: PropTypes.bool,
+}
+
+export default AlertModal;
diff --git a/src/components/AvatarSelect/AvatarSelect.js b/src/components/AvatarSelect/AvatarSelect.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import {
 	Button,
 	Modal,
@@ -7,13 +8,9 @@ import {
 	ModalFooter,
 } from 'mdbreact';
 
-//import { PlayersContext } from '../../contexts/Players';
-
-//const defaultAvatar = require('../../avatars/default.svg');
-
 const circleSize = '2em';
 
-export default class AvatarSelect extends Component {
+class AvatarSelect extends Component {
 	defaultState = {
 		color: (this.props.colorOptions ? this.props.colorOptions[0] : null),
     avatar: this.props.defaultAvatar,
@@ -25,21 +22,20 @@ export default class AvatarSelect extends Component {
 		this.setState({color: color});
 	}
 
-	alertAvatar = () => {
-    //alert(`You chose avatar: ${this.state.avatar}, and the color is ${this.state.color}`);
+	selectAvatar = () => {
     const playerInfo = this.getPlayerInfo();
 
-		this.props.assign(playerInfo.avatar, playerInfo.color, this.props.player.index);
+		this.props.assign(playerInfo.avatar, playerInfo.color, this.props.editingPlayer.index);
 		this.setState(Object.assign({}, this.defaultState));
 		this.props.toggle();
   }
 
   getPlayerInfo = () => {
     const playerInfo = { color: this.state.color, avatar: this.state.avatar };
 
-    if (this.props.open && (playerInfo.color === null || playerInfo.avatar === null) && this.props.player) {
-      playerInfo.color = playerInfo.color || this.props.player.color;
-      playerInfo.avatar = playerInfo.avatar || this.props.player.avatar;
+    if (this.props.open && (playerInfo.color === null || playerInfo.avatar === null) && this.props.editingPlayer) {
+      playerInfo.color = playerInfo.color || this.props.editingPlayer.color;
+      playerInfo.avatar = playerInfo.avatar || this.props.editingPlayer.avatar;
     }
 
     return playerInfo;
@@ -65,7 +61,9 @@ export default class AvatarSelect extends Component {
                   style={{ width: circleSize, height: circleSize, cursor: 'pointer' }}
                   className={classNames}
                   onClick={() => this.setColor(color)}
-                  key={`colorSwatch${color}`}></div>);
+                  key={`colorSwatch${color}`}>
+                </div>
+              );
             })}
           </div>
           <h3>View Avatars:</h3>
@@ -92,61 +90,24 @@ export default class AvatarSelect extends Component {
         </ModalBody>
         <ModalFooter>
           <Button outline color='danger' onClick={props.toggle}>Cancel</Button>{' '}
-          <Button color="primary" onClick={this.alertAvatar}>Select Avatar</Button>
+          <Button color="primary" onClick={this.selectAvatar}>Select Avatar</Button>
         </ModalFooter>
       </Modal>
     );
-
-		/*return (
-			<PlayersContext.Consumer>
-				{value => (
-          <Modal isOpen={this.props.open} toggle={this.props.toggle} backdrop={false}>
-		        <ModalHeader toggle={this.props.toggle}>Avatars!</ModalHeader>
-		        <ModalBody>
-		        	<h3>Select Color:</h3>
-		        	<div className='row pb-3 pl-3'>
-		        		{value.colorOptions.map(color => {
-		        			const addBorder = (color === 'white') ? 'border-top border-bottom border-right border-left border-dark' : '';
-		        			const active = (color === playerInfo.color) ? 'z-depth-2' : '';
-		        			const classNames = `${color} rounded-circle d-inline m-1 ${addBorder} ${active}`;
-		        			return (
-		        				<div
-		        					style={{width: circleSize, height: circleSize, cursor: 'pointer'}}
-		        					className={classNames}
-		        					onClick={()=>this.setColor(color)}
-		        					key={`colorSwatch${color}`}></div>);
-		        		})}
-			        </div>
-		          <h3>View Avatars:</h3>
-		          <div className='row' id='avatarSelect'>
-		          	{value.images.map((image, index) => {
-		          		return (
-		          			<div key={`avatarsModal${index}`} className='col'>
-		          				<img
-		          					src={image}
-		          					alt={`avatar ${index}`}
-		          					onClick={() => this.setState({avatar: image})}
-		          					className={`rounded-circle m-3 ${playerInfo.color} ${(image === playerInfo.avatar ? 'z-depth-2 selected' : '')}`} />
-		          			</div>
-		          		);
-		          	})}
-		          	<div className='col mr-auto'>
-		          		<img
-		          			src={defaultAvatar}
-		          			alt='Default Avatar'
-		          			onClick={() => this.setState({avatar: defaultAvatar})}
-		          			className={`rounded-circle m-3 ${playerInfo.color} ${(defaultAvatar === playerInfo.avatar ? 'z-depth-2 selected' : '')}`} />
-		          	</div>
-		          </div>
-		        </ModalBody>
-		        <ModalFooter>
-		          <Button outline color='danger' onClick={this.props.toggle}>Cancel</Button>{' '}
-		          <Button color="primary" onClick={this.alertAvatar}>Select Avatar</Button>
-		        </ModalFooter>
-		      </Modal>
-		  	)}
-			</PlayersContext.Consumer>
-		);*/
 	}
 }
 
+AvatarSelect.propTypes = {
+  open: PropTypes.bool.isRequired,
+  editingPlayer: PropTypes.object,
+  assign: PropTypes.func.isRequired,
+  toggle: PropTypes.func.isRequired,
+
+  players: PropTypes.array,
+  updatePlayers: PropTypes.func.isRequired,
+  images: PropTypes.array,
+  colorOptions: PropTypes.array,
+  defaultAvatar: PropTypes.object,
+}
+
+export default AvatarSelect;
diff --git a/src/components/ConfirmModal/ConfirmModal.js b/src/components/ConfirmModal/ConfirmModal.js
@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import {
   Button,
   Modal,
   ModalBody,
   ModalFooter
 } from 'mdbreact';
 
-export default class ConfirmModal extends Component {
-
+class ConfirmModal extends Component {
   close = () => {
     this.props.toggle();
   }
@@ -31,4 +31,13 @@ export default class ConfirmModal extends Component {
       </Modal>
     );
   }
-}
+}
+
+ConfirmModal.propTypes = {
+  question:PropTypes.string,
+  action:PropTypes.func,
+  open:PropTypes.bool.isRequired,
+  toggle:PropTypes.func.isRequired,
+}
+
+export default ConfirmModal;
diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js
@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { Prompt, withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
 //import uuidv1 from 'uuid/v1';
 import MainNav from '../NavBar/NavBar';
 import Scoreboard from './Scoreboard';
@@ -306,4 +307,11 @@ class Game extends Component {
   }
 }
 
+Game.propTypes = {
+  // game, players={players} updatePlayers={updatePlayers}
+  game:PropTypes.object.isRequired, // Add this into game.PropTypes.Shape({}).isRequired
+  players:PropTypes.array.isRequired,
+  updatePlayers:PropTypes.func.isRequired,
+};
+
 export default withRouter(Game);
diff --git a/src/components/Game/RenderSettings.js b/src/components/Game/RenderSettings.js
@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import { ListGroup, ListGroupItem } from 'mdbreact';
+import PropTypes from 'prop-types';
 
 Number.isInteger = Number.isInteger || function (value) {
   return typeof value === 'number' &&
@@ -114,4 +115,8 @@ const RenderSettings = (props) => {
   );
 }
 
+RenderSettings.propTypes = {
+  settings: PropTypes.object.isRequired,
+}
+
 export default RenderSettings;
diff --git a/src/components/Game/Scoreboard.js b/src/components/Game/Scoreboard.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const Scoreboard = (props) => {
   const { players, currentRound, scores, gameplay, totalScores, scoreLabel } = props;
@@ -43,4 +44,13 @@ const Scoreboard = (props) => {
   return gameGrid;
 };
 
+Scoreboard.propTypes = {
+  players: PropTypes.array.isRequired,
+  currentRound: PropTypes.number.isRequired,
+  scores: PropTypes.array.isRequired,
+  gameplay: PropTypes.object.isRequired,
+  totalScores: PropTypes.arrayOf(PropTypes.number),
+  scoreLabel: PropTypes.func.isRequired,
+}
+
 export default Scoreboard;
diff --git a/src/components/InitModal/InitModal.js b/src/components/InitModal/InitModal.js
@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
 import {
   //ButtonGroup,
   Button,
@@ -17,7 +18,7 @@ import AvatarSelect from '../AvatarSelect';
 
 //import { PlayersContext, AvatarContext } from '../Players';
 
-export default class InitModal extends Component {
+class InitModal extends Component {
   constructor(props) {
     super(props);
 
@@ -261,11 +262,29 @@ export default class InitModal extends Component {
         </Modal>
         <AvatarSelect
           open={this.state.avatarSelect}
-          player={this.state.editingPlayer}
+          editingPlayer={this.state.editingPlayer}
           assign={(avatar, color, player) => this.applyAvatar(avatar, color, player)}
           toggle={() => { this.setState(state => ({ avatarSelect: !state.avatarSelect }))}}
         />
       </Fragment>
     );
   }
 }
+
+InitModal.propTypes = {
+  // Passive props passed on through the HOC's
+  open: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  settings: PropTypes.object.isRequired,
+  startGame: PropTypes.func.isRequired,
+  alertToggle: PropTypes.func.isRequired,
+
+  // HOC Props passed through via context API's
+  players: PropTypes.array,
+  updatePlayers: PropTypes.func,
+  images: PropTypes.array,
+  defaultAvatar: PropTypes.object,
+  colorOptions: PropTypes.object,
+}
+
+export default InitModal;
diff --git a/src/components/ScoresModal/ScoresModal.js b/src/components/ScoresModal/ScoresModal.js
@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-
+import PropTypes from 'prop-types';
 import {
   Button,
   Card,
@@ -12,7 +12,7 @@ import {
   Input,
 } from 'mdbreact';
 
-export default class ScoresModal extends Component {
+class ScoresModal extends Component {
   constructor(props) {
     super(props);
 
@@ -290,4 +290,19 @@ export default class ScoresModal extends Component {
       </Modal>
     );
   }
-}
+}
+
+ScoresModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  settings: PropTypes.object.isRequired,
+  gameplay: PropTypes.object.isRequired,
+  round: PropTypes.number.isRequired,
+  updateScores: PropTypes.func.isRequired,
+  scoreLabel: PropTypes.func.isRequired,
+
+  players: PropTypes.array,
+  alertToggle: PropTypes.func,
+}
+
+export default ScoresModal;
diff --git a/yarn.lock b/yarn.lock
@@ -6127,7 +6127,7 @@ prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8,
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.6.0:
+prop-types@^15.6.0, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies: