Use context to pass down instance of WSCache
This commit is contained in:
parent
c5bb82f31e
commit
91b5ca72e3
38
package.json
38
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"
|
||||
|
62
src/App.js
62
src/App.js
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
};
|
||||
|
@ -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'));
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user