83 lines
1.8 KiB
JavaScript
83 lines
1.8 KiB
JavaScript
import * as _ from 'lodash';
|
|
import { Component } from 'inferno';
|
|
import { BrowserRouter, Link, NavLink } from 'inferno-router';
|
|
import { Loader } from '//components';
|
|
import {
|
|
Container,
|
|
Nav,
|
|
Navbar,
|
|
NavbarBrand,
|
|
NavItem,
|
|
} from '//components/Bootstrap';
|
|
import { Routes } from '//Routes';
|
|
|
|
export class App extends Component {
|
|
constructor (props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
webSocketLoaded: false,
|
|
};
|
|
|
|
_.bindAll(this, [
|
|
'onWebSocketOpen',
|
|
'onWebSocketClose',
|
|
]);
|
|
}
|
|
|
|
componentDidMount () {
|
|
window.clientWS = new WebSocket('ws://localhost:65432/');
|
|
|
|
window.clientWS.addEventListener('open', this.onWebSocketOpen);
|
|
window.clientWS.addEventListener('message', console);
|
|
window.clientWS.addEventListener('close', this.onWebSocketClose);
|
|
|
|
console.info(this.context);
|
|
}
|
|
|
|
componentWillUnmount () {
|
|
if (window.clientWS) {
|
|
window.clientWS.close();
|
|
}
|
|
}
|
|
|
|
onWebSocketOpen () {
|
|
this.setState({
|
|
webSocketLoaded: true
|
|
});
|
|
|
|
window.clientWS.onmessage = message => {
|
|
console.info(JSON.parse(message.data));
|
|
};
|
|
}
|
|
|
|
onWebSocketClose () {
|
|
console.log('WebSocket closed');
|
|
}
|
|
|
|
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 />
|
|
<Loader title="Connecting to WebSocket" hidden={this.state.webSocketLoaded} />
|
|
</Container>
|
|
</BrowserRouter>
|
|
);
|
|
}
|
|
}
|