Add refresh button on DevicesPage

client/pages/DevicesPage.tsx

@@ -1,11 +1,15 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Item } from "semantic-ui-react";
+import { Item, Button } from "semantic-ui-react";
 
 import { DeviceView } from "@client/components";
 import { AppState, injectState } from "@client/state";
 
 class DevicesPage extends React.Component<{ appState: AppState }> {
+  refreshDevices = () => {
+    this.props.appState.sprinklersRpc.doAuthenticate();
+  }
+
   render() {
     const { appState } = this.props;
     const { userData } = appState.userStore;
@@ -21,7 +25,7 @@ class DevicesPage extends React.Component<{ appState: AppState }> {
     }
     return (
       <React.Fragment>
-        <h1>Devices</h1>
+        <h1 className="devices-header">Devices <Button icon="refresh" onClick={this.refreshDevices}></Button></h1>
         <Item.Group>{deviceNodes}</Item.Group>
       </React.Fragment>
     );

client/sprinklersRpc/WebSocketRpcClient.ts

@@ -132,27 +132,29 @@ export class WebSocketRpcClient extends s.SprinklersRPC {
       () =>
         this.connectionState.clientToServer === true &&
         this.tokenStore.accessToken.isValid,
-      async () => {
+      async () => { this.doAuthenticate() }
-        try {
-          const res = await this.authenticate(
-            this.tokenStore.accessToken.token!
-          );
-          runInAction("authenticateSuccess", () => {
-            this.authenticated = res.authenticated;
-          });
-          logger.info({ user: res.user }, "authenticated websocket connection");
-          this.emit("newUserData", res.user);
-        } catch (err) {
-          logger.error({ err }, "error authenticating websocket connection");
-          // TODO message?
-          runInAction("authenticateError", () => {
-            this.authenticated = false;
-          });
-        }
-      }
     );
   }
 
+  async doAuthenticate() {
+    try {
+      const res = await this.authenticate(
+        this.tokenStore.accessToken.token!
+      );
+      runInAction("authenticateSuccess", () => {
+        this.authenticated = res.authenticated;
+      });
+      logger.info({ user: res.user }, "authenticated websocket connection");
+      this.emit("newUserData", res.user);
+    } catch (err) {
+      logger.error({ err }, "error authenticating websocket connection");
+      // TODO message?
+      runInAction("authenticateError", () => {
+        this.authenticated = false;
+      });
+    }
+  }
+
   // args must all be JSON serializable
   async makeDeviceCall(
     deviceId: string,

client/styles/DeviceView.scss

@@ -1,3 +1,10 @@
+.devices-header {
+  display: flex;
+  .ui.icon.button {
+    margin-left: 0.5em;
+  }
+}
+
 .device {
   .header {
     display: flex !important;