Use context to pass down instance of WSCache

This commit is contained in:
Timothy Warren 2018-05-31 12:37:57 -04:00
parent c5bb82f31e
commit 91b5ca72e3
7 changed files with 831 additions and 775 deletions

View File

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

View File

@ -1,4 +1,3 @@
import * as _ from 'lodash';
import { Component } from 'inferno';
import { BrowserRouter, Link, NavLink } from 'inferno-router';
import {
@ -9,27 +8,42 @@ import {
NavItem,
} from '//components/Bootstrap';
import { Routes } from '//Routes';
import { createWsCache } from './wsCache';
export const App = () => {
return (
<BrowserRouter>
<Container className="full-height" tag="bs-container">
<Navbar className="static-top" color="dark" dark expandable="sm">
<NavbarBrand to="/" tag={Link}>Film Exif</NavbarBrand>
<Nav fill pills>
<NavItem>
<NavLink className="nav-link" to="/camera/list">Cameras</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to="/film/add">Films</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to="/oops">Oops</NavLink>
</NavItem>
</Nav>
</Navbar>
<Routes />
</Container>
</BrowserRouter>
);
};
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">
<Navbar className="static-top" color="dark" dark expandable="sm">
<NavbarBrand to="/" tag={Link}>Film Exif</NavbarBrand>
<Nav fill pills>
<NavItem>
<NavLink className="nav-link" to="/camera/list">Cameras</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to="/film/add">Films</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to="/oops">Oops</NavLink>
</NavItem>
</Nav>
</Navbar>
<Routes/>
</Container>
</BrowserRouter>
);
}
}

View File

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

View File

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

View File

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

View File

@ -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 default wsCache;
export function createWsCache () {
if (WSCache.instance === null) {
const ws = new WebSocket('ws://localhost:65432/');
const instance = new WSCache(ws);
WSCache.instance = instance;
return instance;
}
return WSCache.instance;
}

1418
yarn.lock

File diff suppressed because it is too large Load Diff