Fixed connection state mobx updating

This commit is contained in:
Alex Mikhalev 2018-06-17 01:04:30 -06:00
parent 7a46e9d8a3
commit f00c96efde
3 changed files with 21 additions and 10 deletions

View File

@ -8,7 +8,8 @@ import { ConnectionState as ConState, SprinklersDevice } from "@common/sprinkler
import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
import "./DeviceView.scss";
function ConnectionState({ connectionState, className }: { connectionState: ConState, className?: string }) {
const ConnectionState = observer(({ connectionState, className }:
{ connectionState: ConState, className?: string }) => {
const connected = connectionState.isConnected;
const classes = classNames({
connectionState: true,
@ -31,7 +32,7 @@ function ConnectionState({ connectionState, className }: { connectionState: ConS
{connectionText}
</div>
);
}
});
interface DeviceViewProps {
deviceId: string;
@ -62,11 +63,11 @@ class DeviceView extends React.Component<DeviceViewProps> {
<Item.Meta>
Raspberry Pi Grinklers Device
</Item.Meta>
<Grid>
<Grid.Column mobile={16} largeScreen={8}>
<Grid stackable>
<Grid.Column width="8">
<SectionTable sections={sections}/>
</Grid.Column>
<Grid.Column mobile={16} largeScreen={8}>
<Grid.Column width="8">
<RunSectionForm sections={sections}/>
</Grid.Column>
</Grid>

View File

@ -27,7 +27,7 @@ function SectionRunView({ run, sections }:
const duration = Duration.fromSeconds(run.duration);
const cancel = run.cancel;
return (
<Segment inverted={current} color={current ? "olive" : undefined}>
<Segment inverted={current} color={current ? "green" : undefined}>
'{section.name}' for {duration.toString()}
<Button onClick={cancel} icon><Icon name="remove" /></Button>
</Segment>

View File

@ -6,7 +6,7 @@ import * as requests from "@common/sprinklers/requests";
import * as schema from "@common/sprinklers/schema/index";
import { seralizeRequest } from "@common/sprinklers/schema/requests";
import * as ws from "@common/sprinklers/websocketData";
import { autorun, observable } from "mobx";
import { action, autorun, observable } from "mobx";
const log = logger.child({ source: "websocket" });
@ -102,15 +102,25 @@ export class WebSocketApiClient implements s.ISprinklersApi {
this.connectionState.clientToServer = true;
}
/* tslint:disable-next-line:member-ordering */
private onDisconnect = action(() => {
this.connectionState.serverToBroker = null;
this.connectionState.clientToServer = false;
});
private onClose(event: CloseEvent) {
log.info({ reason: event.reason, wasClean: event.wasClean },
"disconnected from websocket");
this.connectionState.clientToServer = false;
this.onDisconnect();
}
private onError(event: Event) {
log.error(event, "websocket error");
this.connectionState.clientToServer = false;
log.error({ event }, "websocket error");
action(() => {
this.connectionState.serverToBroker = null;
this.connectionState.clientToServer = false;
});
this.onDisconnect();
}
private onMessage(event: MessageEvent) {