27th

enriquenov · Mar 21, 2018 · bb6e25a · bb6e25a
1 parent 79aa7a2
commit bb6e25a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 32 deletions.
diff --git a/app/components/Battle.js b/app/components/Battle.js
@@ -1,33 +1,8 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var Link = require('react-router-dom').Link;
+var PlayerPreview = require('./PlayerPreview');
 
-function PlayerPreview(props) {
-  return (
-    <div>
-      <div className="column">
-        <img
-          className="avatar"
-          src={props.avatar}
-          alt={'Avatar for ' + props.username}
-        />
-        <h2 className="username">@{props.username}</h2>
-        <button
-          className="reset"
-          onClick={props.onReset.bind(null, props.id)}>
-          Reset
-        </button>
-      </div>
-    </div>
-  )
-}
-
-PlayerPreview.propTypes = {
-  avatar: PropTypes.string.isRequired,
-  username: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  onReset: PropTypes.func.isRequired
-}
 
 class PlayerInput extends React.Component {
   constructor(props) {
@@ -144,9 +119,13 @@ class Battle extends React.Component {
           {playerOneImage !== null &&
           <PlayerPreview
             avatar={playerOneImage}
-            username={playerOneName}
-            onReset={this.handleReset}
-            id="playerOne"/>}
+            username={playerOneName}>
+              <button
+                className="reset"
+                onClick={this.handleReset.bind(null, 'playerOne')}>
+                Reset
+              </button>
+          </PlayerPreview>}
 
           {!playerTwoName &&
           <PlayerInput
@@ -157,9 +136,13 @@ class Battle extends React.Component {
           {playerTwoImage !== null &&
           <PlayerPreview
             avatar={playerTwoImage}
-            username={playerTwoName}
-            onReset={this.handleReset}
-            id="playerTwo"/>}
+            username={playerTwoName}>
+              <button
+                className="reset"
+                onClick={this.handleReset.bind(null, 'playerTwo')}>
+                Reset
+              </button>
+          </PlayerPreview>}
         </div>
 
         {playerOneImage && playerTwoImage &&

diff --git a/app/components/PlayerPreview.js b/app/components/PlayerPreview.js
@@ -0,0 +1,25 @@
+var React = require('react');
+var PropTypes = require('prop-types');
+
+function PlayerPreview(props) {
+  return (
+    <div>
+      <div className="column">
+        <img
+          className="avatar"
+          src={props.avatar}
+          alt={'Avatar for ' + props.username}
+        />
+        <h2 className="username">@{props.username}</h2>
+      </div>
+      {props.children}
+    </div>
+  )
+}
+
+PlayerPreview.propTypes = {
+  avatar: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired
+}
+
+module.exports = PlayerPreview;