Update dependencies

.babelrc

@@ -1,7 +1,7 @@
 {
 	"presets": [
 		"inferno-app",
-		["env", {
+		["@babel/env", {
 			"targets": {
 				"browsers": [
 					">1%",
@@ -13,7 +13,6 @@
 		}]
 	],
 	"plugins": [
-		"external-helpers",
 		["module-resolver", {
 			"root": ["./src"],
 			"alias": {

.eslintrc

@@ -27,9 +27,6 @@
 			"properties": "never"
 		}],
 		"comma-dangle": ["error", "always-multiline"],
-		"import/extensions": "on",
-		"import/no-extraneous-dependencies": "off",
-		"import/no-unresolved": [2, { "ignore": ["electron"] }],
 		"jsx-quotes": ["error", "prefer-double"],
 		"linebreak-style": "off",
 		"multiline-ternary": ["error", "always-multiline"],
@@ -54,9 +51,6 @@
 		"no-return-assign": "error",
 		"no-return-await": "error",
 		"no-self-compare": "error",
-		"no-shadow": ["error", {
-			"builtinGlobals": true
-		}],
 		"no-unneeded-ternary": "error",
 		"no-unused-expressions": "error",
 		"no-use-before-define": "error",
@@ -82,10 +76,5 @@
 		"require-await": "error",
 		"sort-keys": ["error", "asc", {"caseSensitive": true, "natural": true}],
 		"yoda": ["error", "never"]
-	},
-	"settings": {
-		"import/resolver": {
-			"babel-module": {}
-		}
 	}
 }

package.json

@@ -20,60 +20,64 @@
     }
   },
   "dependencies": {
-    "better-sqlite3": "^4.1.1",
+    "better-sqlite3": "^5.3.0",
     "electron-log": "^2.2.14",
     "esm": "^3.0.40",
-    "exiftool-vendored": "^4.25.0",
-    "inferno": "^5.0.6",
-    "inferno-bootstrap": "^5.0.2",
-    "inferno-dev-utils": "^5.3.0",
-    "inferno-router": "^5.0.6",
+    "exiftool-vendored": "^7.5.0",
+    "inferno": "^7.0.5",
+    "inferno-bootstrap": "^7.2.0",
+    "inferno-dev-utils": "^6.0.4",
+    "inferno-router": "^7.0.5",
     "lodash-es": "^4.17.10",
-    "ws": "^5.2.0"
+    "ws": "^6.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.49",
     "@babel/preset-env": "^7.0.0-beta.49",
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^23.0.1",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-module-resolver": "^3.1.1",
-    "babel-preset-inferno-app": "^7.1.0",
+    "babel-preset-inferno-app": "^8.0.3",
     "babel-runtime": "^6.26.0",
     "bootstrap": "^4",
-    "electron": "^2.0.2",
+    "electron": "^4.0.1",
     "electron-builder": "^20.15.1",
     "electron-devtools-installer": "^2.2.4",
-    "eslint": "^4.19.1",
+    "eslint": "^5.12.0",
     "eslint-config-happiness": "^10.2.1",
-    "eslint-config-inferno-app": "^6.2.0",
-    "eslint-import-resolver-babel-module": "^4.0.0",
-    "eslint-plugin-import": "^2.12.0",
+    "eslint-config-inferno-app": "^7.0.2",
+    "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-inferno": "^7.8.0",
-    "eslint-plugin-jsx-a11y": "6.0.3",
-    "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-promise": "^3.8.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "husky": "^0.14.3",
-    "inferno-devtools": "^5.0.6",
+    "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-node": "^8.0.1",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "husky": "^1.3.1",
+    "inferno-devtools": "^7.0.5",
     "jest": "^23.0.1",
     "jquery": "^3.3.1",
     "raf": "^3.4.0",
-    "rollup": "^0.59.4",
+    "rollup": "^1.1.0",
     "rollup-plugin-alias": "^1.4.0",
-    "rollup-plugin-babel": "^3.0.4",
+    "rollup-plugin-babel": "^4.3.0",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-copy": "^0.2.3",
-    "rollup-plugin-filesize": "^1.5.0",
+    "rollup-plugin-filesize": "^6.0.0",
     "rollup-plugin-livereload": "^0.6.0",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-serve": "^0.4.2",
-    "rollup-plugin-terser": "^1.0.1",
-    "rollup-plugin-uglify": "^4.0.0",
-    "rollup-plugin-visualizer": "^0.6.0"
+    "rollup-plugin-serve": "^1.0.0",
+    "rollup-plugin-terser": "^4.0.2",
+    "rollup-plugin-uglify": "^6.0.1",
+    "rollup-plugin-visualizer": "^0.9.2"
   },
   "homepage": "/",
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint"
+    }
+  },
   "scripts": {
     "build": "set NODE_ENV=production && rollup --config rollup.prod.js",
     "dist": "yarn run build && build",
@@ -84,7 +88,6 @@
     "lint": "eslint src/**/*.js",
     "pack": "build --dir",
     "postinstall": "electron-builder install-app-deps",
-    "precommit": "yarn lint",
     "test": "node scripts/test.js --env=jsdom"
   },
   "main": "src/electron/index.js",

public/index.html

@@ -3,14 +3,14 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-		<link rel="shortcut icon" href="./favicon.ico" />
-		<link rel="stylesheet" href="./css/bootstrap.css" />
-		<link rel="stylesheet" href="./css/app.css" />
+		<link rel="shortcut icon" href="/favicon.ico" />
+		<link rel="stylesheet" href="/css/bootstrap.css" />
+		<link rel="stylesheet" href="/css/app.css" />
 		<title>Inferno App</title>
 	</head>
 	<body>
 		<film-exif id="app"></film-exif>
-		<script src="./bundle.js"></script>
+		<script src="/bundle.js"></script>
 		<noscript>
 			You need to enable JavaScript to run this app.
 		</noscript>

rollup.config.js

@@ -17,13 +17,14 @@ export default {
 			'public/css/bootstrap.css': 'build/css/bootstrap.css',
 			'public/css/app.css': 'build/css/app.css',
 		}),
-		resolve({
-			jsnext: true,
-			browser: true,
+		resolve(),
+		commonjs({
+			include: 'node_modules/**',
+			exclude: 'src/**',
 		}),
 		babel({
 			exclude: 'node_modules/**',
+			runtimeHelpers: true,
 		}),
-		commonjs(),
 	],
 };

rollup.dev.js

@@ -19,10 +19,11 @@ export default {
 		...baseConfig.plugins,
 		filesize(),
 		serve({
-			contentBase: ['./public', './build'],
+			contentBase: ['build', 'public'],
 			host: 'localhost',
 			headers: {
 				'Access-Control-Allow-Origin': '*',
+				'Content-Security-Policy': "default-src 'none'; script-src 'self' localhost:35729 localhost:65432; connect-src 'self' ws://localhost:35729 ws://localhost:65432; img-src 'self' data://*; style-src 'self';",
 			},
 			historyApiFallback: true,
 			port: 3000,

src/components/Bootstrap/Modal.js

@@ -1,13 +1,11 @@
-import AnimateModal from 'inferno-bootstrap/dist/Modal/AnimateModal';
 import Modal from 'inferno-bootstrap/dist/Modal/Modal';
 import ModalBody from 'inferno-bootstrap/dist/Modal/ModalBody';
 import ModalFooter from 'inferno-bootstrap/dist/Modal/ModalFooter';
 import ModalHeader from 'inferno-bootstrap/dist/Modal/ModalHeader';
 
 export {
-	AnimateModal,
-	Modal,
-	ModalBody,
-	ModalFooter,
-	ModalHeader,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
 };

src/components/DOMForm.js

@@ -0,0 +1,60 @@
+import { linkEvent } from 'inferno';
+
+function handleChange (props, event) {
+	const formElement = event.target.closest('form');
+	const rawFormData = new FormData(formElement);
+
+	if (props.onChange !== undefined) {
+		const modified = props.onChange(rawFormData);
+
+		if (modified !== undefined) {
+			// Update form
+			modified.forEach((value, key) => {
+				const element = formElement.elements[key];
+				element.value = value;
+			});
+		}
+	}
+}
+
+function handleSubmit (props, event) {
+	// Don't want to actually reload the page!
+	event.preventDefault();
+
+	// Parsers are formatters or maskers
+	const parsers = {};
+
+	const form = event.target.closest('form');
+	const data = new FormData(form);
+
+	data.forEach((value, name) => {
+		const parserName = form.elements[name].dataset.parse;
+
+		if (parserName !== undefined && parsers[parserName] !== undefined) {
+			const parser = parsers[parserName];
+			const parsedValue = parser(data.get(name));
+			data.set(name, parsedValue);
+		}
+	});
+
+	if (props.onSubmit) {
+		props.onSubmit(data);
+	}
+}
+
+export function DOMForm (props) {
+	const passProps = {...props};
+	const children = passProps.children;
+	delete passProps.onChange;
+	delete passProps.onSubmit;
+
+	return (
+		<form
+			onInput={linkEvent(props, handleChange)}
+			onSubmit={linkEvent(props, handleSubmit)}
+			{...passProps}
+		>
+			{children}
+		</form>
+	);
+}

src/components/index.js

@@ -1,3 +1,4 @@
 export * from '//components/Bootstrap';
+export * from '//components/DOMForm';
 export * from '//components/Form';
 export * from '//components/Loader';

src/electron/wait-inferno.js

@@ -1,4 +1,4 @@
-const {spawn} = require('child_process');
+const { spawn } = require('child_process');
 const log = require('electron-log');
 const net = require('net');
 const port = process.env.PORT ? (process.env.PORT - 100) : 3000;

src/views/Camera/CameraAddView.js

@@ -1,5 +1,3 @@
-import { linkEvent, Component } from 'inferno';
-
 import {
 	Button,
 	Card,
@@ -11,6 +9,7 @@ import {
 	Form,
 	Row,
 } from '//components/Bootstrap';
+import { DOMForm } from '//components';
 
 import { FormBlock } from '//components/Form';
 
@@ -25,89 +24,80 @@ import { FormBlock } from '//components/Form';
  * Flash Model
  */
 
-export class CameraAddView extends Component {
-	constructor (props) {
-		super(props);
+function logFormData (formData) {
+	const data = {};
+	formData.forEach((value, key) => {
+		data[key] = value;
+	});
+	console.log(data);
+}
 
-		this.state = {
-			form: {
-				valid: {},
-				values: {},
-			},
-		};
-	}
+function handleFormChange (formData) {
+	// logFormData(formData);
+}
 
-	handleFormChange (instance, e) {
-		instance.setState({
-			form: {
-				...instance.state.form,
-				values: {
-					...instance.state.form.values,
-					[e.target.id]: e.target.value,
-				},
-			},
-		});
-	}
+function handleSave (formData) {
+	logFormData(formData);
+}
 
-	render () {
-		return (
-			<Row className="full-height">
-				<Col sm={12} md={8} lg={4} className="abs-center">
-					<Form onKeyDown={ linkEvent(this, this.handleFormChange) }>
-						<Card>
-							<CardHeader>
-								<CardTitle>Add a Camera</CardTitle>
-							</CardHeader>
-							<CardBody>
-								<Row className="align-items-baseline">
-									<FormBlock
-										label="Brand"
-										name="brand"
-										required
-										value={this.state.form.values['brand']}
-									/>
-									<FormBlock
-										label="Model"
-										name="model"
-										required
-										value={this.state.form.values['model']}
-									/>
-									<FormBlock
-										label="Serial"
-										name="serial"
-										required
-										value={this.state.form.values['serial']}
-									/>
-									<FormBlock
-										label="Film Format"
+export function CameraAddView (props) {
+	return (
+		<Row className="full-height">
+			<Col sm={12} md={8} lg={4} className="abs-center">
+				<DOMForm
+					onChange={handleFormChange}
+					onSubmit={handleSave}
+				>
+					<Card>
+						<CardHeader>
+							<CardTitle>Add a Camera</CardTitle>
+						</CardHeader>
+						<CardBody>
+							<Row className="align-items-baseline">
+								<FormBlock
+									label="Brand"
+									name="brand"
+									required
+								/>
+								<FormBlock
+									label="Model"
+									name="model"
+									required
+								/>
+								<FormBlock
+									label="Serial"
+									name="serial"
+									required
+								/>
+								<FormBlock
+									label="Film Format"
+									name="film-format"
+								>
+									<select
+										className="custom-select"
+										id="film-format"
 										name="film-format"
-										value={this.state.form.values['film-format']}
 									>
-										<select
-											className="custom-select"
-											id="film-format"
-											name="film-format"
-										>
-											<option value="110">110</option>
-											<option value="120">120</option>
-											<option value="127">127</option>
-											<option value="135">135</option>
-											<option value="220">220</option>
-										</select>
-									</FormBlock>
-								</Row>
-							</CardBody>
-							<CardFooter>
-								<Row>
-									<Col xs={12}>
-										<Button color="primary" type="submit">Save</Button>
-									</Col>
-								</Row>
-							</CardFooter>
-						</Card>
-					</Form>
-				</Col>
-			</Row>
-		);
-	}
+										<option value="">&nbsp;</option>
+										<option value="110">110</option>
+										<option value="120">120</option>
+										<option value="127">127</option>
+										<option value="135">135</option>
+										<option value="220">220</option>
+									</select>
+								</FormBlock>
+							</Row>
+						</CardBody>
+						<CardFooter>
+							<Row>
+								<Col xs={12}>
+									<Button color="primary" type="submit">Save</Button>
+								</Col>
+							</Row>
+						</CardFooter>
+					</Card>
+				</DOMForm>
+			</Col>
+		</Row>
+	);
 }