Add Error Modal

config/webpack.config.prod.js

@@ -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;

src/views/HomeView.js

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