Use context to pass down instance of WSCache

package.json

@@ -5,51 +5,43 @@
   "version": "0.5.0",
   "private": true,
   "build": {
-    "appId": "net.timshomepage.film-exif",
-    "files": [
-      "build/**/*",
-      "node_modules/**/*",
-      "src/**/*"
-    ]
+    "appId": "net.timshomepage.film-exif"
   },
   "dependencies": {
     "electron-log": "^2.2.14",
-    "esm": "^3.0.20",
-    "exiftool-vendored": "^4.20.0",
-    "inferno": "^5.0.1",
-    "inferno-bootstrap": "^5.0.0",
+    "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-redux": "^5.0.6",
-    "inferno-router": "^5.0.1",
+    "inferno-router": "^5.0.6",
     "lodash": "^4.17.10",
-    "sqlite3": "^4.0.0",
-    "ws": "^5.1.1"
+    "ws": "^5.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-beta.5",
-    "@babel/preset-env": "^7.0.0-beta.5",
+    "@babel/core": "^7.0.0-beta.49",
+    "@babel/preset-env": "^7.0.0-beta.49",
     "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.3",
+    "babel-jest": "^23.0.1",
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-preset-inferno-app": "^7.1.0",
     "babel-runtime": "^6.26.0",
     "bootstrap": "^4",
-    "electron": "^2.0.0",
-    "electron-builder": "^20.8.1",
+    "electron": "^2.0.2",
+    "electron-builder": "^20.15.1",
     "eslint": "^4.19.1",
     "eslint-config-happiness": "^10.2.1",
     "eslint-config-inferno-app": "^6.2.0",
     "eslint-import-resolver-babel-module": "^4.0.0",
-    "eslint-plugin-flowtype": "^2.46.3",
-    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-inferno": "^7.8.0",
     "eslint-plugin-jsx-a11y": "6.0.3",
     "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-promise": "^3.8.0",
     "eslint-plugin-standard": "^3.0.1",
     "extract-text-webpack-plugin": "3.0.2",
     "husky": "^0.14.3",
-    "jest": "^22.4.3",
+    "jest": "^23.0.1",
     "jquery": "^3.3.1",
     "parcel-bundler": "^1.7.1",
     "raf": "^3.4.0"

src/App.js

@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import { Component } from 'inferno';
 import { BrowserRouter, Link, NavLink } from 'inferno-router';
 import {
@@ -9,8 +8,22 @@ import {
 	NavItem,
 } from '//components/Bootstrap';
 import { Routes } from '//Routes';
+import { createWsCache } from './wsCache';
 
-export const App = () => {
+export class App extends Component {
+	constructor (props, context) {
+		super(props, context);
+
+		this.ws = createWsCache();
+	}
+
+	getChildContext () {
+		return {
+			ws: this.ws,
+		};
+	}
+
+	render () {
 		return (
 			<BrowserRouter>
 				<Container className="full-height" tag="bs-container">
@@ -32,4 +45,5 @@ export const App = () => {
 				</Container>
 			</BrowserRouter>
 		);
-};
+	}
+}

src/helpers/web-socket.js

@@ -1,11 +1,6 @@
-const JSONMessage = (messageType, data) => {
-	// return new Blob([messageType, JSON.stringify(data)], {type: 'application/json'});
+export const JSONMessage = (messageType, data) => {
 	return JSON.stringify([
 		messageType,
 		data,
 	]);
 };
-
-module.exports = {
-	JSONMessage,
-};

src/index.js

@@ -1,10 +1,4 @@
 import { render } from 'inferno';
-
 import { App } from './App';
-import WSCache from './wsCache';
-
-const WEB_SOCKET = new WebSocket('ws://localhost:65432/');
-window.clientWS = WEB_SOCKET;
-window.wsCache = new WSCache(WEB_SOCKET);
 
 render(<App />, document.getElementById('app'));

src/views/HomeView.js

@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
 import { Component } from 'inferno';
 import {
 	Button,
@@ -16,10 +17,28 @@ export class HomeView extends Component {
 		super(props);
 
 		this.state = {
+			exifData: [],
 			showModal: false,
 		};
 
-		this.toggleErrorModal = this.toggleErrorModal.bind(this);
+		_.bindAll(this, [
+			'bindEvents',
+			'handleDrop',
+			'toggleErrorModal',
+		]);
+	}
+
+	componentDidMount () {
+		console.log(this);
+		this.bindEvents();
+	}
+
+	bindEvents () {
+		this.context.ws.subscribe('parsed-exif-tags', data => {
+			this.setState({
+				exifData: data,
+			});
+		});
 	}
 
 	handleDragOver (e) {
@@ -39,22 +58,22 @@ export class HomeView extends Component {
 		const newTransfer = { ...e.dataTransfer };
 		console.info(newTransfer);
 
-		window.wsCache.sendJSON('dropped-files', draggedFiles);
+		this.context.ws.sendJSON('dropped-files', draggedFiles);
 	}
 
 	showErrorDialog () {
-		window.wsCache.sendJSON(
+		this.context.ws.sendJSON(
 			'show-error-box',
 			'Looks like there was a problem. (╥﹏╥) \n (╯°□°）╯︵ ┻━┻'
 		);
 	}
 
 	showOpenDialog () {
-		window.wsCache.sendJSON('show-open-dialog');
+		this.context.ws.sendJSON('show-open-dialog');
 	}
 
 	showSaveDialog () {
-		window.wsCache.sendJSON('show-save-dialog');
+		this.context.ws.sendJSON('show-save-dialog');
 	}
 
 	toggleErrorModal () {
@@ -92,6 +111,12 @@ export class HomeView extends Component {
 								<Button onClick={this.toggleErrorModal}>Show Error Modal</Button>
 							</Col>
 						</Row>
+						<Row>
+							<Col md={12}>
+								<h3>Parsed Exif Data</h3>
+								<pre>{JSON.stringify(this.state.exifData, null, 2)}</pre>
+							</Col>
+						</Row>
 					</Container>
 				</Jumbotron>
 				<Modal fade isOpen={this.state.showModal} toggle={this.toggleErrorModal}>
@@ -99,7 +124,7 @@ export class HomeView extends Component {
 						Error Title
 					</ModalHeader>
 					<ModalBody>
-						Body of error message
+						Looks like there was a problem. (╥﹏╥)<br />(╯°□°）╯︵ ┻━┻
 					</ModalBody>
 					<ModalFooter>
 						<Button color="primary" onClick={this.toggleErrorModal}>Close</Button>

src/wsCache.js

@@ -1,9 +1,9 @@
-import * as _ from 'lodash'
+import * as _ from 'lodash';
 import { JSONMessage } from '//helpers/web-socket';
 
-export class wsCache {
+export class WSCache {
 	constructor (ws) {
-		this.ws = ws
+		this.ws = ws;
 
 		this.ws.addEventListener('message', this.onWebSocketMessage);
 		this.ws.addEventListener('close', this.onWebSocketClose);
@@ -13,17 +13,18 @@ export class wsCache {
 		// These hold previous messages if they are needed later
 		this.slots = {
 			'default': [],
-		}
+		};
 
 		// Send messages
 		this.sent = {
 			'default': [],
-		}
+		};
 
 		//  Subscribers
 		this.listeners = {
 			'default': [console.info],
-		}
+			'server-log': [console.dir],
+		};
 
 		_.bindAll(this, [
 			'onWebSocketClose',
@@ -32,7 +33,7 @@ export class wsCache {
 			'send',
 			'sendJSON',
 			'subscribe',
-		])
+		]);
 	}
 
 	onWebSocketClose () {
@@ -47,10 +48,9 @@ export class wsCache {
 	onWebSocketMessage (message) {
 		try {
 			const messageObject = JSON.parse(message.data);
-			const [slot, data] = messageObject;
-			window.wsCache.publish(slot, data);
+			WSCache.instance.publish(messageObject[0], messageObject[1]);
 		} catch (e) {
-			window.wsCache.publish('default', message.data);
+			WSCache.instance.publish('default', message.data);
 		}
 	}
 
@@ -69,7 +69,7 @@ export class wsCache {
 		this.slots[slot].push(data);
 
 		this.listeners[slot].forEach(listener => {
-			listener(data)
+			listener(data);
 		});
 	}
 
@@ -123,9 +123,19 @@ export class wsCache {
 		return {
 			remove: () => {
 				delete this.listeners[slot][listenerIndex];
+			},
+		};
 	}
 }
-	}
+WSCache.instance = null;
+
+export function createWsCache () {
+	if (WSCache.instance === null) {
+		const ws = new WebSocket('ws://localhost:65432/');
+		const instance = new WSCache(ws);
+		WSCache.instance = instance;
+		return instance;
 	}
 
-export default wsCache;
+	return WSCache.instance;
+}