Skip to content

Commit

Permalink
Add reset confirm modal
Browse files Browse the repository at this point in the history
  • Loading branch information
thesimonho committed Feb 18, 2020
1 parent a426163 commit 37cd0f6
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 16 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
89 changes: 78 additions & 11 deletions src/Modals.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Modal from 'react-bootstrap/Modal';
import {
faExclamationTriangle,
faInfoCircle,
faTrashAlt,
faShareAlt,
faLink,
faCopy
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -200,7 +203,7 @@ export class AboutModal extends Component {
this.props.toggleTour();
}}
>
Run guided tour
Show Guided Tour
</Button>
</Tab>
</Tabs>
Expand All @@ -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
*
Expand Down Expand Up @@ -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>
Expand All @@ -324,4 +391,4 @@ export class ShareModal extends Component {
}
}

export default { InvalidBuildModal, AboutModal, ShareModal };
export default { InvalidBuildModal, AboutModal, ResetModal, ShareModal };
18 changes: 16 additions & 2 deletions src/NavBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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);
}

Expand Down Expand Up @@ -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
*
Expand All @@ -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
Expand Down Expand Up @@ -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}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/NavBarButtons.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 12 additions & 1 deletion src/__tests__/Modals.test.js
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand All @@ -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);
Expand Down

0 comments on commit 37cd0f6

Please sign in to comment.