Add Error Modal

This commit is contained in:
Timothy Warren 2018-05-01 16:58:24 -04:00
parent da94a5ac68
commit a1eaf1fba6
2 changed files with 370 additions and 333 deletions

View File

@ -42,7 +42,7 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
// To have this structure working with relative paths, we have to use custom options.
const extractTextPluginOptions = shouldUseRelativeAssetPaths
? // Making sure that the publicPath goes back to to build folder.
{ publicPath: Array(cssFilename.split('/').length).join('../') }
{publicPath: Array(cssFilename.split('/').length).join('../')}
: {};
// This is the production configuration.
@ -79,7 +79,7 @@ module.exports = {
// https://github.com/infernojs/create-inferno-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
@ -190,8 +190,8 @@ module.exports = {
},
],
},
extractTextPluginOptions
)
extractTextPluginOptions,
),
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
@ -286,7 +286,7 @@ module.exports = {
// about it being stale, and the cache-busting can be skipped.
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
logger(message) {
logger (message) {
if (message.indexOf('Total precache size is') === 0) {
// This message occurs for every build and is a bit too noisy.
return;

View File

@ -1,14 +1,35 @@
import { Component } from 'inferno';
import {
Alert,
Button,
Col,
Container,
Jumbotron,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
Row,
} from '../components/Bootstrap';
import { JSONMessage } from '../helpers/web-socket';
function handleDrop (e) {
export class HomeView extends Component {
constructor (props) {
super(props);
this.state = {
showModal: false,
};
this.toggleErrorModal = this.toggleErrorModal.bind(this);
}
handleDragOver (e) {
e.preventDefault();
e.stopPropagation();
}
handleDrop (e) {
e.preventDefault();
e.stopPropagation();
@ -18,35 +39,36 @@ function handleDrop (e) {
}
window.clientWS.send(JSONMessage('dropped-files', draggedFiles));
}
}
function handleDragOver (e) {
e.preventDefault();
e.stopPropagation();
}
function showOpenDialog () {
window.clientWS.send(JSONMessage('show-open-dialog', {}));
}
function showSaveDialog () {
window.clientWS.send(JSONMessage('show-save-dialog', {}));
}
function showErrorDialog () {
showErrorDialog () {
window.clientWS.send(JSONMessage(
'show-error-box',
'Looks like there was a problem. (╥﹏╥) \n (╯°□°)╯︵ ┻━┻'
));
}
}
export const HomeView = (props) => {
showOpenDialog () {
window.clientWS.send(JSONMessage('show-open-dialog', {}));
}
showSaveDialog () {
window.clientWS.send(JSONMessage('show-save-dialog', {}));
}
toggleErrorModal () {
this.setState(prevState => ({
showModal: !prevState.showModal,
}));
}
render () {
return (
<main>
<Alert color="info">
This is a work in progress
</Alert>
<Jumbotron onDrop={handleDrop} onDragover={handleDragOver}>
<Jumbotron onDrop={this.handleDrop} onDragover={this.handleDragOver}>
<Container className="App">
<Row>
<header className="App-header">
@ -59,18 +81,33 @@ export const HomeView = (props) => {
</p>
</Row>
<Row>
<Col md={4}>
<Button onClick={showOpenDialog}>Show Open Dialog</Button>
<Col md={3}>
<Button onClick={this.showOpenDialog}>Show Open Dialog</Button>
</Col>
<Col md={4}>
<Button onClick={showSaveDialog}>Show Save Dialog</Button>
<Col md={3}>
<Button onClick={this.showSaveDialog}>Show Save Dialog</Button>
</Col>
<Col md={4}>
<Button onClick={showErrorDialog}>Show Error Dialog</Button>
<Col md={3}>
<Button onClick={this.showErrorDialog}>Show Error Dialog</Button>
</Col>
<Col md={3}>
<Button onClick={this.toggleErrorModal}>Show Error Modal</Button>
</Col>
</Row>
</Container>
</Jumbotron>
<Modal fade isOpen={this.state.showModal} toggle={this.toggleErrorModal}>
<ModalHeader toggle={this.toggleErrorModal}>
Error Title
</ModalHeader>
<ModalBody>
Body of error message
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggleErrorModal}>Close</Button>
</ModalFooter>
</Modal>
</main>
);
};
}
}