Add reset confirm modal

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rok-talents",
   "title": "RoK Talents",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "dataVersion": 1,
   "description": "Rise of Kingdoms talent builder",
   "homepage": "http://www.roktalents.com",

src/Modals.js

@@ -7,6 +7,7 @@ import Modal from 'react-bootstrap/Modal';
 import {
   faExclamationTriangle,
   faInfoCircle,
+  faTrashAlt,
   faShareAlt,
   faLink,
   faCopy
@@ -69,17 +70,19 @@ export class InvalidBuildModal extends Component {
           </span>
           Invalid Talent Build
         </Modal.Header>
-        <Modal.Body>
-          <p>
-            The talent build you're trying to view is invalid. Please make sure
-            you've copied and pasted the link correctly.
-          </p>
-          <p data-testid="invalid-modal-body">
+        <Modal.Body className="modal-body">
+          <div>
+            The talent build you're trying to view is invalid. Make sure you've
+            copied and pasted the link correctly.
+            <br />
+            <br />
+          </div>
+          <div data-testid="invalid-modal-body">
             <b>Reason:</b> {this.props.message}
-          </p>
+          </div>
         </Modal.Body>
         <Modal.Footer>
-          <Button color="primary" onClick={this.toggle}>
+          <Button variant="primary" onClick={this.toggle}>
             Close
           </Button>
         </Modal.Footer>
@@ -200,7 +203,7 @@ export class AboutModal extends Component {
                   this.props.toggleTour();
                 }}
               >
-                Run guided tour
+                Show Guided Tour
               </Button>
             </Tab>
           </Tabs>
@@ -210,6 +213,70 @@ export class AboutModal extends Component {
   }
 }
 
+/**
+ * Modal displaying reset/delete confirmation
+ *
+ * @class ResetModal
+ * @extends {Component}
+ */
+export class ResetModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modal: false
+    };
+
+    this.toggle = this.toggle.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.state.modal !== nextState.modal) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  toggle() {
+    this.setState(prevState => ({
+      modal: !prevState.modal
+    }));
+  }
+
+  render() {
+    return (
+      <Modal centered show={this.state.modal} onHide={this.toggle}>
+        <Modal.Header closeButton>
+          <span>
+            <FontAwesomeIcon icon={faTrashAlt} className="modal-icon" />
+          </span>
+          Reset
+        </Modal.Header>
+
+        <Modal.Body className="modal-body">
+          <div>Are you sure you want to reset the talent build?</div>
+          <div>This will remove all assigned talent points.</div>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button
+            variant="danger"
+            onClick={() => {
+              this.props.resetTalents();
+              this.toggle();
+            }}
+          >
+            Reset
+          </Button>
+          <Button variant="secondary" onClick={this.toggle}>
+            Cancel
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
 /**
  * Modal displaying sharing options for talent build
  *
@@ -315,7 +382,7 @@ export class ShareModal extends Component {
         </Modal.Body>
 
         <Modal.Footer>
-          <Button color="primary" onClick={this.toggle}>
+          <Button variant="primary" onClick={this.toggle}>
             Close
           </Button>
         </Modal.Footer>
@@ -324,4 +391,4 @@ export class ShareModal extends Component {
   }
 }
 
-export default { InvalidBuildModal, AboutModal, ShareModal };
+export default { InvalidBuildModal, AboutModal, ResetModal, ShareModal };

src/NavBar.js

@@ -6,7 +6,7 @@ import Nav from 'react-bootstrap/Nav';
 import NavBarButtons from './NavBarButtons';
 import NavBarSettings from './NavBarSettings';
 import NavBarCommander from './NavBarCommander';
-import { AboutModal, ShareModal } from './Modals';
+import { AboutModal, ResetModal, ShareModal } from './Modals';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -29,6 +29,7 @@ class NavBar extends Component {
     // Context bindings
     this.toggleNav = this.toggleNav.bind(this);
     this.toggleSelect = this.toggleSelect.bind(this);
+    this.showReset = this.showReset.bind(this);
     this.showShare = this.showShare.bind(this);
   }
 
@@ -65,6 +66,15 @@ class NavBar extends Component {
     });
   }
 
+  /**
+   * Control visibility of the "Reset" modal
+   *
+   * @memberof NavBar
+   */
+  showReset() {
+    this.resetModalRef.toggle();
+  }
+
   /**
    * Control visibility of the "Share" modal
    *
@@ -85,6 +95,10 @@ class NavBar extends Component {
           ref={component => (this.aboutModalRef = component)}
           toggleTour={this.props.toggleTour}
         />
+        <ResetModal
+          ref={component => (this.resetModalRef = component)}
+          resetTalents={this.props.resetTalents}
+        />
         <ShareModal ref={component => (this.shareModalRef = component)} />
 
         <Navbar
@@ -115,7 +129,7 @@ class NavBar extends Component {
           <Nav className="ml-auto">
             <NavBarButtons
               calcPointsSpent={this.props.calcPointsSpent}
-              resetTalents={this.props.resetTalents}
+              showReset={this.showReset}
               showShare={this.showShare}
               commander={this.props.commander}
             />

src/NavBarButtons.js

@@ -22,7 +22,7 @@ class NavBarButtons extends Component {
           disabled={
             this.props.commander | this.props.calcPointsSpent() ? false : true
           }
-          onClick={this.props.resetTalents}
+          onClick={() => this.props.showReset()}
         >
           <FontAwesomeIcon icon={faTrashAlt} />
           <span className="nav-button-text">Reset</span>

src/__tests__/Modals.test.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { InvalidBuildModal, AboutModal, ShareModal } from '../Modals';
+import {
+  InvalidBuildModal,
+  AboutModal,
+  ResetModal,
+  ShareModal
+} from '../Modals';
 
 describe('Modal', () => {
   it('renders without crashing', () => {
@@ -15,6 +20,12 @@ describe('Modal', () => {
     ReactDOM.unmountComponentAtNode(div);
   });
 
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ResetModal />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
   it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<ShareModal />, div);