Ensure only one binding for network connect

Author: JamieRuderman

frontend/src/buttons/RefreshButton/RefreshButton.tsx

@@ -13,9 +13,10 @@ import { attributeName } from '@common/nameHelper'
 export const RefreshButton: React.FC<ButtonProps> = props => {
   const dispatch = useDispatch<Dispatch>()
   const { deviceID } = useParams<{ deviceID?: string }>()
-  const { fetching, device } = useSelector((state: ApplicationState) => ({
+  const { fetching, device, networkConnected } = useSelector((state: ApplicationState) => ({
     fetching: getDeviceModel(state).fetching || (deviceID && state.logs.fetching) || state.ui.fetching,
     device: selectDevice(state, undefined, deviceID),
+    networkConnected: state.ui.network,
   }))
 
   const connectionPage = useRouteMatch('/connections')
@@ -66,11 +67,11 @@ export const RefreshButton: React.FC<ButtonProps> = props => {
   }
 
   React.useEffect(() => {
-    network.on('connect', refresh)
-    return () => {
-      network.off('connect', refresh)
+    if (networkConnected) {
+      console.log('NETWORK CONNECTED')
+      refresh()
     }
-  }, [])
+  }, [networkConnected])
 
   return (
     <IconButton

frontend/src/models/ui.ts

@@ -39,6 +39,7 @@ export type UIState = {
   silent: string | null
   selected: IDevice['id'][]
   connected: boolean
+  network: boolean
   offline?: { severity: NoticeProps['severity']; title: string; message: NoticeProps['children'] }
   mobileNavigation: string[]
   waitMessage?: string
@@ -112,6 +113,7 @@ export const defaultState: UIState = {
   silent: null,
   selected: [],
   connected: false,
+  network: false,
   offline: undefined,
   mobileNavigation: [],
   waitMessage: undefined,

frontend/src/services/Network.ts

@@ -1,4 +1,4 @@
-import { store } from '../store'
+import { dispatch } from '../store'
 import { EventEmitter } from 'events'
 
 class Network extends EventEmitter {
@@ -50,8 +50,9 @@ class Network extends EventEmitter {
   offline = () => {
     if (navigator.onLine) return
     this.log('DISCONNECT')
-    store.dispatch.ui.set({
+    dispatch.ui.set({
       offline: { title: 'Disconnected', message: 'Internet access is required.', severity: 'warning' },
+      network: false,
     })
     this.shouldConnect = true
     this.emit('disconnect')
@@ -60,13 +61,14 @@ class Network extends EventEmitter {
   online = () => {
     if (!navigator.onLine) return
     this.log('NETWORK ONLINE')
-    store.dispatch.ui.set({ offline: undefined })
+    dispatch.ui.set({ offline: undefined })
     this.connect()
   }
 
   connect = () => {
     if (this.shouldConnect && this.isActive()) {
       this.shouldConnect = false
+      dispatch.ui.set({ network: true })
       this.emit('connect')
       this.log('CONNECT')
     }