diff --git a/package.json b/package.json index f1918b8..e171caf 100644 --- a/package.json +++ b/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", diff --git a/src/Modals.js b/src/Modals.js index 86a1032..4e4c1c6 100644 --- a/src/Modals.js +++ b/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 { Invalid Talent Build - -

- The talent build you're trying to view is invalid. Please make sure - you've copied and pasted the link correctly. -

-

+ +

+ The talent build you're trying to view is invalid. Make sure you've + copied and pasted the link correctly. +
+
+
+
Reason: {this.props.message} -

+
- @@ -200,7 +203,7 @@ export class AboutModal extends Component { this.props.toggleTour(); }} > - Run guided tour + Show Guided Tour @@ -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 ( + + + + + + Reset + + + +
Are you sure you want to reset the talent build?
+
This will remove all assigned talent points.
+
+ + + + + +
+ ); + } +} + /** * Modal displaying sharing options for talent build * @@ -315,7 +382,7 @@ export class ShareModal extends Component { - @@ -324,4 +391,4 @@ export class ShareModal extends Component { } } -export default { InvalidBuildModal, AboutModal, ShareModal }; +export default { InvalidBuildModal, AboutModal, ResetModal, ShareModal }; diff --git a/src/NavBar.js b/src/NavBar.js index 730a83f..a6a27cc 100644 --- a/src/NavBar.js +++ b/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} /> + (this.resetModalRef = component)} + resetTalents={this.props.resetTalents} + /> (this.shareModalRef = component)} /> diff --git a/src/NavBarButtons.js b/src/NavBarButtons.js index f444f67..2e99e13 100644 --- a/src/NavBarButtons.js +++ b/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()} > Reset diff --git a/src/__tests__/Modals.test.js b/src/__tests__/Modals.test.js index 908e1eb..9cc913c 100644 --- a/src/__tests__/Modals.test.js +++ b/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(, div); + ReactDOM.unmountComponentAtNode(div); + }); + it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(, div);