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,7 +132,11 @@ export class WebSocketRpcClient extends s.SprinklersRPC {
       () =>
         this.connectionState.clientToServer === true &&
         this.tokenStore.accessToken.isValid,
-      async () => {
+      async () => { this.doAuthenticate() }
+    );
+  }
+
+  async doAuthenticate() {
     try {
       const res = await this.authenticate(
         this.tokenStore.accessToken.token!
@@ -150,8 +154,6 @@ export class WebSocketRpcClient extends s.SprinklersRPC {
       });
     }
   }
-    );
-  }
 
   // args must all be JSON serializable
   async makeDeviceCall(

client/styles/DeviceView.scss

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