From a1eaf1fba61162bfa6fa6fc0a59bca5f361fc5ec Mon Sep 17 00:00:00 2001
From: Timothy Warren <twarren@nabancard.com>
Date: Tue, 1 May 2018 16:58:24 -0400
Subject: [PATCH] Add Error Modal

---
 config/webpack.config.prod.js | 550 +++++++++++++++++-----------------
 src/views/HomeView.js         | 153 ++++++----
 2 files changed, 370 insertions(+), 333 deletions(-)

diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index f2b27e9..88a1383 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -30,7 +30,7 @@ const env = getClientEnvironment(publicUrl);
 // Assert this just to be safe.
 // Development builds of Inferno are slow and not intended for production.
 if (env.stringified['process.env'].NODE_ENV !== '"production"') {
-  throw new Error('Production builds must have NODE_ENV=production.');
+	throw new Error('Production builds must have NODE_ENV=production.');
 }
 
 // Note: defined here because it will be used more than once.
@@ -41,286 +41,286 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
 // However, our output is structured with css, js and media folders.
 // 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('../') }
-  : {};
+	? // Making sure that the publicPath goes back to to build folder.
+		{publicPath: Array(cssFilename.split('/').length).join('../')}
+	: {};
 
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
 // The development configuration is different and lives in a separate file.
 module.exports = {
-  // Don't attempt to continue if there are any errors.
-  bail: true,
-  // We generate sourcemaps in production. This is slow but gives good results.
-  // You can exclude the *.map files from the build during deployment.
-  devtool: shouldUseSourceMap ? 'source-map' : false,
-  // In production, we only want to load the polyfills and the app code.
-  entry: [require.resolve('./polyfills'), paths.appIndexJs],
-  output: {
-    // The build folder.
-    path: paths.appBuild,
-    // Generated JS file names (with nested folders).
-    // There will be one main bundle, and one file per asynchronous chunk.
-    // We don't currently advertise code splitting but Webpack supports it.
-    filename: 'static/js/[name].[chunkhash:8].js',
-    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
-    // We inferred the "public path" (such as / or /my-project) from homepage.
-    publicPath: publicPath,
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: info =>
-      path
-        .relative(paths.appSrc, info.absoluteResourcePath)
-        .replace(/\\/g, '/'),
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // 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)
-    ),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/infernojs/create-inferno-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
-    plugins: [
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      // TODO: Disable require.ensure as it's not a standard language feature.
-      // We are waiting for https://github.com/facebookincubator/create-inferno-app/issues/2176.
-      // { parser: { requireEnsure: false } },
+	// Don't attempt to continue if there are any errors.
+	bail: true,
+	// We generate sourcemaps in production. This is slow but gives good results.
+	// You can exclude the *.map files from the build during deployment.
+	devtool: shouldUseSourceMap ? 'source-map' : false,
+	// In production, we only want to load the polyfills and the app code.
+	entry: [require.resolve('./polyfills'), paths.appIndexJs],
+	output: {
+		// The build folder.
+		path: paths.appBuild,
+		// Generated JS file names (with nested folders).
+		// There will be one main bundle, and one file per asynchronous chunk.
+		// We don't currently advertise code splitting but Webpack supports it.
+		filename: 'static/js/[name].[chunkhash:8].js',
+		chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
+		// We inferred the "public path" (such as / or /my-project) from homepage.
+		publicPath: publicPath,
+		// Point sourcemap entries to original disk location (format as URL on Windows)
+		devtoolModuleFilenameTemplate: info =>
+			path
+				.relative(paths.appSrc, info.absoluteResourcePath)
+				.replace(/\\/g, '/'),
+	},
+	resolve: {
+		// This allows you to set a fallback for where Webpack should look for modules.
+		// We placed these paths second because we want `node_modules` to "win"
+		// if there are any conflicts. This matches Node resolution mechanism.
+		// 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),
+		),
+		// These are the reasonable defaults supported by the Node ecosystem.
+		// We also include JSX as a common component filename extension to support
+		// some tools, although we do not recommend using it, see:
+		// https://github.com/infernojs/create-inferno-app/issues/290
+		// `web` extension prefixes have been added for better support
+		// for React Native Web.
+		extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
+		plugins: [
+			// Prevents users from importing files from outside of src/ (or node_modules/).
+			// This often causes confusion because we only process files within src/ with babel.
+			// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+			// please link the files into your node_modules/ and let module-resolution kick in.
+			// Make sure your source files are compiled, as they will not be processed in any way.
+			new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+		],
+	},
+	module: {
+		strictExportPresence: true,
+		rules: [
+			// TODO: Disable require.ensure as it's not a standard language feature.
+			// We are waiting for https://github.com/facebookincubator/create-inferno-app/issues/2176.
+			// { parser: { requireEnsure: false } },
 
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|jsx|mjs)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: eslintFormatter,
-              eslintPath: require.resolve('eslint'),
+			// First, run the linter.
+			// It's important to do this before Babel processes the JS.
+			{
+				test: /\.(js|jsx|mjs)$/,
+				enforce: 'pre',
+				use: [
+					{
+						options: {
+							formatter: eslintFormatter,
+							eslintPath: require.resolve('eslint'),
 
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appSrc,
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-          // "url" loader works just like "file" loader but it also embeds
-          // assets smaller than specified size as data URLs to avoid requests.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // Process JS with Babel.
-          {
-            test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
-            loader: require.resolve('babel-loader'),
-            options: {
+						},
+						loader: require.resolve('eslint-loader'),
+					},
+				],
+				include: paths.appSrc,
+			},
+			{
+				// "oneOf" will traverse all following loaders until one will
+				// match the requirements. When no loader matches it will fall
+				// back to the "file" loader at the end of the loader list.
+				oneOf: [
+					// "url" loader works just like "file" loader but it also embeds
+					// assets smaller than specified size as data URLs to avoid requests.
+					{
+						test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+						loader: require.resolve('url-loader'),
+						options: {
+							limit: 10000,
+							name: 'static/media/[name].[hash:8].[ext]',
+						},
+					},
+					// Process JS with Babel.
+					{
+						test: /\.(js|jsx|mjs)$/,
+						include: paths.appSrc,
+						loader: require.resolve('babel-loader'),
+						options: {
 
-              compact: true,
-            },
-          },
-          // The notation here is somewhat confusing.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader normally turns CSS into JS modules injecting <style>,
-          // but unlike in development configuration, we do something different.
-          // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
-          // (second argument), then grabs the result CSS and puts it into a
-          // separate file in our build process. This way we actually ship
-          // a single CSS file in production instead of JS code injecting <style>
-          // tags. If you use code splitting, however, any async bundles will still
-          // use the "style" loader inside the async code so CSS from them won't be
-          // in the main CSS file.
-          {
-            test: /\.css$/,
-            loader: ExtractTextPlugin.extract(
-              Object.assign(
-                {
-                  fallback: {
-                    loader: require.resolve('style-loader'),
-                    options: {
-                      hmr: false,
-                    },
-                  },
-                  use: [
-                    {
-                      loader: require.resolve('css-loader'),
-                      options: {
-                        importLoaders: 1,
-                        minimize: true,
-                        sourceMap: shouldUseSourceMap,
-                      },
-                    },
-                    {
-                      loader: require.resolve('postcss-loader'),
-                      options: {
-                        // Necessary for external CSS imports to work
-                        // https://github.com/facebookincubator/create-react-app/issues/2677
-                        ident: 'postcss',
-                        plugins: () => [
-                          require('postcss-flexbugs-fixes'),
-                        ],
-                      },
-                    },
-                  ],
-                },
-                extractTextPluginOptions
-              )
-            ),
-            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
-          },
-          // "file" loader makes sure assets end up in the `build` folder.
-          // When you `import` an asset, you get its filename.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            loader: require.resolve('file-loader'),
-            // Exclude `js` files to keep "css" loader working as it injects
-            // it's runtime that would otherwise processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // ** STOP ** Are you adding a new loader?
-          // Make sure to add the new loader(s) before the "file" loader.
-        ],
-      },
-    ],
-  },
-  plugins: [
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In production, it will be an empty string unless you specify "homepage"
-    // in `package.json`, in which case it will be the pathname of that URL.
-    new InterpolateHtmlPlugin(env.raw),
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true,
-      },
-    }),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-    // It is absolutely essential that NODE_ENV was set to production here.
-    // Otherwise Inferno will be compiled in the very slow development mode.
-    new webpack.DefinePlugin(env.stringified),
-    // Minify the code.
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        screw_ie8: true, // Inferno doesn't support IE8
-        warnings: false,
-        // Disabled because of an issue with Uglify breaking seemingly valid code:
-        // https://github.com/facebookincubator/create-inferno-app/issues/2376
-        // Pending further investigation:
-        // https://github.com/mishoo/UglifyJS2/issues/2011
-        comparisons: false,
-      },
-      mangle: {
-        safari10: true,
-      },
-      output: {
-        comments: false,
-        // Turned on because emoji and regex is not minified properly using default
-        // https://github.com/facebookincubator/create-react-app/issues/2488
-        ascii_only: true,
-      },
-      sourceMap: shouldUseSourceMap,
-    }),
-    // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
-    new ExtractTextPlugin({
-      filename: cssFilename,
-    }),
-    // Generate a manifest file which contains a mapping of all asset filenames
-    // to their corresponding output file so that tools can pick it up without
-    // having to parse `index.html`.
-    new ManifestPlugin({
-      fileName: 'asset-manifest.json',
-    }),
-    // Generate a service worker script that will precache, and keep up to date,
-    // the HTML & assets that are part of the Webpack build.
-    new SWPrecacheWebpackPlugin({
-      // By default, a cache-busting query parameter is appended to requests
-      // used to populate the caches, to ensure the responses are fresh.
-      // If a URL is already hashed by Webpack, then there is no concern
-      // about it being stale, and the cache-busting can be skipped.
-      dontCacheBustUrlsMatching: /\.\w{8}\./,
-      filename: 'service-worker.js',
-      logger(message) {
-        if (message.indexOf('Total precache size is') === 0) {
-          // This message occurs for every build and is a bit too noisy.
-          return;
-        }
-        if (message.indexOf('Skipping static resource') === 0) {
-          // This message obscures real errors so we ignore it.
-          // https://github.com/facebookincubator/create-react-app/issues/2612
-          return;
-        }
-        console.log(message);
-      },
-      minify: true,
-      // For unknown URLs, fallback to the index page
-      navigateFallback: publicUrl + '/index.html',
-      // Ignores URLs starting from /__ (useful for Firebase):
-      // https://github.com/facebookincubator/create-inferno-app/issues/2237#issuecomment-302693219
-      navigateFallbackWhitelist: [/^(?!\/__).*/],
-      // Don't precache sourcemaps (they're large) and build asset manifest:
-      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
-    }),
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-  ],
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
+							compact: true,
+						},
+					},
+					// The notation here is somewhat confusing.
+					// "css" loader resolves paths in CSS and adds assets as dependencies.
+					// "style" loader normally turns CSS into JS modules injecting <style>,
+					// but unlike in development configuration, we do something different.
+					// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
+					// (second argument), then grabs the result CSS and puts it into a
+					// separate file in our build process. This way we actually ship
+					// a single CSS file in production instead of JS code injecting <style>
+					// tags. If you use code splitting, however, any async bundles will still
+					// use the "style" loader inside the async code so CSS from them won't be
+					// in the main CSS file.
+					{
+						test: /\.css$/,
+						loader: ExtractTextPlugin.extract(
+							Object.assign(
+								{
+									fallback: {
+										loader: require.resolve('style-loader'),
+										options: {
+											hmr: false,
+										},
+									},
+									use: [
+										{
+											loader: require.resolve('css-loader'),
+											options: {
+												importLoaders: 1,
+												minimize: true,
+												sourceMap: shouldUseSourceMap,
+											},
+										},
+										{
+											loader: require.resolve('postcss-loader'),
+											options: {
+												// Necessary for external CSS imports to work
+												// https://github.com/facebookincubator/create-react-app/issues/2677
+												ident: 'postcss',
+												plugins: () => [
+													require('postcss-flexbugs-fixes'),
+												],
+											},
+										},
+									],
+								},
+								extractTextPluginOptions,
+							),
+						),
+						// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
+					},
+					// "file" loader makes sure assets end up in the `build` folder.
+					// When you `import` an asset, you get its filename.
+					// This loader doesn't use a "test" so it will catch all modules
+					// that fall through the other loaders.
+					{
+						loader: require.resolve('file-loader'),
+						// Exclude `js` files to keep "css" loader working as it injects
+						// it's runtime that would otherwise processed through "file" loader.
+						// Also exclude `html` and `json` extensions so they get processed
+						// by webpacks internal loaders.
+						exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
+						options: {
+							name: 'static/media/[name].[hash:8].[ext]',
+						},
+					},
+					// ** STOP ** Are you adding a new loader?
+					// Make sure to add the new loader(s) before the "file" loader.
+				],
+			},
+		],
+	},
+	plugins: [
+		// Makes some environment variables available in index.html.
+		// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+		// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+		// In production, it will be an empty string unless you specify "homepage"
+		// in `package.json`, in which case it will be the pathname of that URL.
+		new InterpolateHtmlPlugin(env.raw),
+		// Generates an `index.html` file with the <script> injected.
+		new HtmlWebpackPlugin({
+			inject: true,
+			template: paths.appHtml,
+			minify: {
+				removeComments: true,
+				collapseWhitespace: true,
+				removeRedundantAttributes: true,
+				useShortDoctype: true,
+				removeEmptyAttributes: true,
+				removeStyleLinkTypeAttributes: true,
+				keepClosingSlash: true,
+				minifyJS: true,
+				minifyCSS: true,
+				minifyURLs: true,
+			},
+		}),
+		// Makes some environment variables available to the JS code, for example:
+		// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+		// It is absolutely essential that NODE_ENV was set to production here.
+		// Otherwise Inferno will be compiled in the very slow development mode.
+		new webpack.DefinePlugin(env.stringified),
+		// Minify the code.
+		new webpack.optimize.UglifyJsPlugin({
+			compress: {
+				screw_ie8: true, // Inferno doesn't support IE8
+				warnings: false,
+				// Disabled because of an issue with Uglify breaking seemingly valid code:
+				// https://github.com/facebookincubator/create-inferno-app/issues/2376
+				// Pending further investigation:
+				// https://github.com/mishoo/UglifyJS2/issues/2011
+				comparisons: false,
+			},
+			mangle: {
+				safari10: true,
+			},
+			output: {
+				comments: false,
+				// Turned on because emoji and regex is not minified properly using default
+				// https://github.com/facebookincubator/create-react-app/issues/2488
+				ascii_only: true,
+			},
+			sourceMap: shouldUseSourceMap,
+		}),
+		// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
+		new ExtractTextPlugin({
+			filename: cssFilename,
+		}),
+		// Generate a manifest file which contains a mapping of all asset filenames
+		// to their corresponding output file so that tools can pick it up without
+		// having to parse `index.html`.
+		new ManifestPlugin({
+			fileName: 'asset-manifest.json',
+		}),
+		// Generate a service worker script that will precache, and keep up to date,
+		// the HTML & assets that are part of the Webpack build.
+		new SWPrecacheWebpackPlugin({
+			// By default, a cache-busting query parameter is appended to requests
+			// used to populate the caches, to ensure the responses are fresh.
+			// If a URL is already hashed by Webpack, then there is no concern
+			// about it being stale, and the cache-busting can be skipped.
+			dontCacheBustUrlsMatching: /\.\w{8}\./,
+			filename: 'service-worker.js',
+			logger (message) {
+				if (message.indexOf('Total precache size is') === 0) {
+					// This message occurs for every build and is a bit too noisy.
+					return;
+				}
+				if (message.indexOf('Skipping static resource') === 0) {
+					// This message obscures real errors so we ignore it.
+					// https://github.com/facebookincubator/create-react-app/issues/2612
+					return;
+				}
+				console.log(message);
+			},
+			minify: true,
+			// For unknown URLs, fallback to the index page
+			navigateFallback: publicUrl + '/index.html',
+			// Ignores URLs starting from /__ (useful for Firebase):
+			// https://github.com/facebookincubator/create-inferno-app/issues/2237#issuecomment-302693219
+			navigateFallbackWhitelist: [/^(?!\/__).*/],
+			// Don't precache sourcemaps (they're large) and build asset manifest:
+			staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
+		}),
+		// Moment.js is an extremely popular library that bundles large locale files
+		// by default due to how Webpack interprets its code. This is a practical
+		// solution that requires the user to opt into importing specific locales.
+		// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+		// You can remove this if you don't use Moment.js:
+		new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+	],
+	// Some libraries import Node modules but don't use them in the browser.
+	// Tell Webpack to provide empty mocks for them so importing them works.
+	node: {
+		dgram: 'empty',
+		fs: 'empty',
+		net: 'empty',
+		tls: 'empty',
+		child_process: 'empty',
+	},
 };
diff --git a/src/views/HomeView.js b/src/views/HomeView.js
index 058205b..c629b5c 100644
--- a/src/views/HomeView.js
+++ b/src/views/HomeView.js
@@ -1,76 +1,113 @@
+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) {
-	e.preventDefault();
-	e.stopPropagation();
+export class HomeView extends Component {
+	constructor (props) {
+		super(props);
 
-	const draggedFiles = [];
-	for (const f of e.dataTransfer.files) {
-		draggedFiles.push(f.path);
+		this.state = {
+			showModal: false,
+		};
+
+		this.toggleErrorModal = this.toggleErrorModal.bind(this);
 	}
 
-	window.clientWS.send(JSONMessage('dropped-files', draggedFiles));
-}
+	handleDragOver (e) {
+		e.preventDefault();
+		e.stopPropagation();
+	}
 
-function handleDragOver (e) {
-	e.preventDefault();
-	e.stopPropagation();
-}
+	handleDrop (e) {
+		e.preventDefault();
+		e.stopPropagation();
 
-function showOpenDialog () {
-	window.clientWS.send(JSONMessage('show-open-dialog', {}));
-}
+		const draggedFiles = [];
+		for (const f of e.dataTransfer.files) {
+			draggedFiles.push(f.path);
+		}
 
-function showSaveDialog () {
-	window.clientWS.send(JSONMessage('show-save-dialog', {}));
-}
+		window.clientWS.send(JSONMessage('dropped-files', draggedFiles));
+	}
 
-function showErrorDialog () {
-	window.clientWS.send(JSONMessage(
-		'show-error-box',
-		'Looks like there was a problem. (╥﹏╥) \n (╯°□°）╯︵ ┻━┻'
-	));
-}
+	showErrorDialog () {
+		window.clientWS.send(JSONMessage(
+			'show-error-box',
+			'Looks like there was a problem. (╥﹏╥) \n (╯°□°）╯︵ ┻━┻'
+		));
+	}
 
-export const HomeView = (props) => {
-	return (
-		<main>
-			<Alert color="info">
-			This is a work in progress
-			</Alert>
-			<Jumbotron onDrop={handleDrop} onDragover={handleDragOver}>
-				<Container className="App">
-					<Row>
-						<header className="App-header">
-							<h1>Welcome to Film Exif</h1>
-						</header>
-					</Row>
-					<Row>
-						<p className="App-intro">
-							Drop files here.
-						</p>
-					</Row>
-					<Row>
-						<Col md={4}>
-							<Button onClick={showOpenDialog}>Show Open Dialog</Button>
-						</Col>
-						<Col md={4}>
-							<Button onClick={showSaveDialog}>Show Save Dialog</Button>
-						</Col>
-						<Col md={4}>
-							<Button onClick={showErrorDialog}>Show Error Dialog</Button>
-						</Col>
-					</Row>
-				</Container>
-			</Jumbotron>
-		</main>
-	);
-};
+	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={this.handleDrop} onDragover={this.handleDragOver}>
+					<Container className="App">
+						<Row>
+							<header className="App-header">
+								<h1>Welcome to Film Exif</h1>
+							</header>
+						</Row>
+						<Row>
+							<p className="App-intro">
+								Drop files here.
+							</p>
+						</Row>
+						<Row>
+							<Col md={3}>
+								<Button onClick={this.showOpenDialog}>Show Open Dialog</Button>
+							</Col>
+							<Col md={3}>
+								<Button onClick={this.showSaveDialog}>Show Save Dialog</Button>
+							</Col>
+							<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>
+		);
+	}
+}