Screw IPC, I'm going with websockets

package.json

@@ -9,7 +9,10 @@
     "inferno": "^5.0.1",
     "inferno-bootstrap": "^5.0.0",
     "inferno-dev-utils": "^5.3.0",
-    "inferno-router": "^5.0.1"
+    "inferno-router": "^5.0.1",
+    "isomorphic-ws": "^4.0.0",
+    "lodash": "^4.17.5",
+    "ws": "^5.1.1"
   },
   "devDependencies": {
     "autoprefixer": "^8.2.0",
@@ -19,6 +22,7 @@
     "babel-loader": "^7.1.4",
     "babel-preset-inferno-app": "^7.1.0",
     "babel-runtime": "6.26.0",
+    "bootstrap": "^4",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "2.3.2",
     "css-loader": "^0.28.11",
@@ -42,6 +46,7 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "jest": "^22.4.3",
+    "jquery": "^3.3.1",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.3.0",
     "postcss-loader": "^2.1.3",

public/css/app.css

@@ -44,3 +44,110 @@ bs-jumbotron {
 }
 
 /*! Ids */
+
+/* -----------------------------------------------------------------------------
+	CSS loading icon
+------------------------------------------------------------------------------*/
+
+cssload-loader {
+	display: flex;
+	/* position: relative;
+	left: calc(50% - 50px); */
+	justify-content: center;
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	perspective: 780px;
+	margin: auto;
+}
+
+.cssload-inner {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	margin: auto;
+	box-sizing: border-box;
+	border-radius: 50%;
+}
+
+cssload-one {
+	left: 0%;
+	top: 0%;
+	animation: cssload-rotate-one 1.15s linear infinite;
+	border-bottom: 3px solid rgb(0,0,0);
+}
+
+cssload-two {
+	right: 0%;
+	top: 0%;
+	animation: cssload-rotate-two 1.15s linear infinite;
+	border-right: 3px solid rgb(0,0,0);
+}
+
+cssload-three {
+	right: 0%;
+	bottom: 0%;
+	animation: cssload-rotate-three 1.15s linear infinite;
+	border-top: 3px solid rgb(0,0,0);
+}
+
+@keyframes cssload-rotate-one {
+	0% {
+		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+	}
+}
+
+@keyframes cssload-rotate-two {
+	0% {
+		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+	}
+}
+
+@keyframes cssload-rotate-three {
+	0% {
+		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+	}
+}
+
+/* ----------------------------------------------------------------------------
+	Loading overlay
+-----------------------------------------------------------------------------*/
+#loading-shadow {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0,0,0,0.8);
+	z-index: 500;
+}
+
+	#loading-shadow loading-wrapper {
+		position: fixed;
+		z-index: 501;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display:flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	#loading-shadow loading-content {
+		position: relative;
+		color: #fff
+	}
+
+	loading-content .cssload-inner {
+		border-color: #fff
+	}

src/App.js

@@ -1,4 +1,8 @@
+import * as _ from 'lodash';
+import { Component } from 'inferno';
 import { BrowserRouter, Link, NavLink } from 'inferno-router';
+import WS from 'isomorphic-ws';
+import { Loader } from './components';
 import {
 	Container,
 	Nav,
@@ -8,7 +12,50 @@ import {
 } from './components/Bootstrap';
 import { Routes } from './Routes';
 
-export const App = () => (
+export class App extends Component {
+	constructor (props) {
+		super(props);
+
+		this.state = {
+			webSocketLoaded: false,
+		};
+
+		_.bindAll(this, [
+			'onWebSocketOpen',
+			'onWebSocketClose',
+		]);
+	}
+
+	componentDidMount () {
+		window.clientWS = new WS('ws://localhost:65432/');
+
+		window.clientWS.addEventListener('open', this.onWebSocketOpen);
+		window.clientWS.addEventListener('message', console);
+		window.clientWS.addEventListener('close', this.onWebSocketClose);
+	}
+
+	componentWillUnmount () {
+		if (window.clientWS) {
+			window.clientWS.close();
+		}
+	}
+
+	onWebSocketOpen () {
+		this.setState({
+			webSocketLoaded: true,
+		});
+
+		window.clientWS.onmessage = console.info;
+
+		console.info(window.clientWS);
+	}
+
+	onWebSocketClose () {
+		console.log('WebSocket closed');
+	}
+
+	render () {
+		return (
 			<BrowserRouter>
 				<Container className="full-height" tag="bs-container">
 					<Navbar className="static-top" color="dark" dark expandable="sm">
@@ -26,6 +73,9 @@ export const App = () => (
 						</Nav>
 					</Navbar>
 					<Routes />
+					<Loader title="Connecting to WebSocket" hidden={this.state.webSocketLoaded} />
 				</Container>
 			</BrowserRouter>
 		);
+	}
+}

src/components/Loader.js

@@ -0,0 +1,24 @@
+/**
+ * Overlay loader component
+ *
+ * @param {object} props
+ * @param {boolean} props.hidden
+ * @param {string} props.title
+ */
+export const Loader = (props) => {
+	return (
+		<section id="loading-shadow" hidden={props.hidden}>
+			<loading-wrapper>
+				<loading-content>
+					<h3>{props.title}</h3>
+					<br />
+					<cssload-loader>
+						<cssload-one className="cssload-inner" />
+						<cssload-two className="cssload-inner" />
+						<cssload-three className="cssload-inner" />
+					</cssload-loader>
+				</loading-content>
+			</loading-wrapper>
+		</section>
+	);
+};

src/components/index.js

@@ -1,2 +1,3 @@
 export * from './Bootstrap';
 export * from './Form';
+export * from './Loader';

src/electron/events.js

@@ -1,5 +0,0 @@
-const { ipcMain } = require('electron');
-
-ipcMain.on('dropped-files', () => {
-
-});

src/electron/preload.js

@@ -0,0 +1 @@
+window.ipcRenderer = require('electron').ipcRenderer;

src/electron/starter.js

@@ -4,6 +4,8 @@ const app = electron.app;
 // Module to create native browser window.
 const BrowserWindow = electron.BrowserWindow;
 
+const WS = require('isomorphic-ws');
+
 const path = require('path');
 const url = require('url');
 
@@ -31,9 +33,9 @@ const createWindow = () => {
 	});
 	mainWindow.loadURL(startUrl);
 	// Open the DevTools.
-	/* mainWindow.webContents.openDevTools({
+	mainWindow.webContents.openDevTools({
 		mode: 'bottom',
-	}); */
+	});
 
 	// Emitted when the window is closed.
 	mainWindow.on('closed', () => {
@@ -66,6 +68,10 @@ app.on('activate', () => {
 	}
 });
 
+const wss = new WS.Server({
+	port: 65432,
+});
+
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.
-require('./events');
+require('./websocket-events')(wss);

src/electron/websocket-events.js

@@ -0,0 +1,13 @@
+/**
+ * Websocket event handlers
+ */
+
+module.exports = (wss) => {
+	wss.on('open', ws => {
+		wss.send('server-log', 'Connected to client!');
+
+		wss.on('dropped-files', e => {
+			wss.send('recieved-dropped-files', e);
+		});
+	});
+};

src/views/HomeView.js

@@ -8,6 +8,9 @@ function handleDrop (e) {
 	e.preventDefault();
 	e.stopPropagation();
 
+	// console.log(e.dataTransfer.files);
+	window.clientWS.send('dropped-files', e.dataTransfer.files);
+
 	for (const f of e.dataTransfer.files) {
 		console.log('Dragged files', f.path);
 	}

yarn.lock

@@ -1062,7 +1062,7 @@ babel-preset-jest@^22.4.3:
 
 babel-register@^6.26.0:
   version "6.26.0"
-  resolved "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
   dependencies:
     babel-core "^6.26.0"
     babel-runtime "^6.26.0"
@@ -1238,6 +1238,10 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
+bootstrap@^4:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.0.tgz#110b05c31a236d56dbc9adcda6dd16f53738a28a"
+
 boxen@^1.2.1:
   version "1.3.0"
   resolved "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@@ -4463,6 +4467,10 @@ isomorphic-fetch@^2.1.1:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
 
+isomorphic-ws@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-4.0.0.tgz#7b528b238c920eeb3f5fe429ac416df669ea4cba"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -4800,6 +4808,10 @@ jest@^22.4.3:
     import-local "^1.0.0"
     jest-cli "^22.4.3"
 
+jquery@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
+
 js-base64@^2.1.9:
   version "2.4.3"
   resolved "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
@@ -5102,7 +5114,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
+"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.5"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
@@ -8175,6 +8187,12 @@ ws@^4.0.0:
     async-limiter "~1.0.0"
     safe-buffer "~5.1.0"
 
+ws@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-5.1.1.tgz#1d43704689711ac1942fd2f283e38f825c4b8b95"
+  dependencies:
+    async-limiter "~1.0.0"
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"