breaking: refactor network status interface

packages/offix-offline/src/network/CordovaNetworkStatus.ts

@@ -7,10 +7,22 @@ declare let document: any;
  * See: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-network-information
  */
 export class CordovaNetworkStatus implements NetworkStatus {
-  public onStatusChangeListener(callback: NetworkStatusChangeCallback): void {
-    if (document) {
-      document.addEventListener("online", () => callback.onStatusChange({online: true}), false);
-      document.addEventListener("offline", () => callback.onStatusChange({online: false}), false);
+
+  listeners: NetworkStatusChangeCallback[] = [];
+
+  constructor() {
+    document.addEventListener("online", this.handleNetworkStatusChange.bind(this), false);
+    document.addEventListener("offline", this.handleNetworkStatusChange.bind(this), false);
+  }
+
+  public onStatusChangeListener(listener: NetworkStatusChangeCallback): void {
+    this.listeners.push(listener);
+  }
+
+  public removeListener(listener: NetworkStatusChangeCallback): void {
+    const index = this.listeners.indexOf(listener);
+    if (index > 0) {
+      this.listeners.splice(index, 1);
     }
   }
 
@@ -22,4 +34,11 @@ export class CordovaNetworkStatus implements NetworkStatus {
     });
   }
 
+  private handleNetworkStatusChange() {
+    const online = window.navigator.onLine;
+    this.listeners.forEach((listener) => {
+      listener.onStatusChange({ online });
+    });
+  }
+
 }

packages/offix-offline/src/network/NetworkStatus.ts

@@ -11,11 +11,18 @@ export interface NetworkStatusChangeCallback {
  */
 export interface NetworkStatus {
   /**
-   * Trigger callback whenever the network status change
+   * Register callback whenever the network status change
    *
-   * @param callback Callback to be called when network status change
+   * @param callback Callback to be added when network status change
    */
-  onStatusChangeListener(callback: NetworkStatusChangeCallback): void;
+  onStatusChangeListener(listener: NetworkStatusChangeCallback): void;
+
+  /**
+   * Remove callback whenever the network status change
+   *
+   * @param callback Callback to be removed when network status change
+   */
+  removeListener(listener: NetworkStatusChangeCallback): void;
 
   /**
    * Check if device is offline

packages/offix-offline/src/network/WebNetworkStatus.ts

@@ -7,10 +7,22 @@ declare let window: any;
  * See: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine
  */
 export class WebNetworkStatus implements NetworkStatus {
-  public onStatusChangeListener(callback: NetworkStatusChangeCallback): void {
-    if (window) {
-      window.addEventListener("online", () => callback.onStatusChange({online: true}), false);
-      window.addEventListener("offline", () => callback.onStatusChange({online: false}), false);
+
+  listeners: NetworkStatusChangeCallback[] = [];
+
+  constructor() {
+    window.addEventListener("online", this.handleNetworkStatusChange.bind(this), false);
+    window.addEventListener("offline", this.handleNetworkStatusChange.bind(this), false);
+  }
+
+  public onStatusChangeListener(listener: NetworkStatusChangeCallback): void {
+    this.listeners.push(listener);
+  }
+
+  public removeListener(listener: NetworkStatusChangeCallback): void {
+    const index = this.listeners.indexOf(listener);
+    if (index > 0) {
+      this.listeners.splice(index, 1);
     }
   }
 
@@ -19,4 +31,11 @@ export class WebNetworkStatus implements NetworkStatus {
       resolve(!window.navigator.onLine);
     });
   }
+
+  private handleNetworkStatusChange() {
+    const online = window.navigator.onLine;
+    this.listeners.forEach((listener) => {
+      listener.onStatusChange({ online });
+    });
+  }
 }

packages/offix-scheduler/src/OffixScheduler.ts

@@ -123,13 +123,17 @@ export class OffixScheduler<T> {
     if (this.online) {
       queue.forwardOperations();
     }
-    this.networkStatus.onStatusChangeListener({
+
+    const listener = {
       onStatusChange(networkInfo: NetworkInfo) {
         self.online = networkInfo.online;
         if (self.online) {
           queue.forwardOperations();
         }
       }
-    });
+    };
+
+    this.networkStatus.onStatusChangeListener(listener);
+
   }
 }

packages/react-offix-hooks/src/useNetworkStatus.ts

@@ -1,5 +1,6 @@
 import  { useEffect, useState } from "react";
 import { useApolloOfflineClient } from "./ApolloOfflineProvider";
+import { NetworkStatusChangeCallback } from "offix-client";
 
 /**
  * React hook to detect network changes
@@ -13,7 +14,7 @@ export function useNetworkStatus(){
   const [isOnline, setIsOnline] = useState();
 
   useEffect(() => {
-    const setOnlineStatus  = async () => {
+    async function setOnlineStatus() {
       // check if app is offline and return result
       const offline = await client.networkStatus.isOffline();
       // set network state with result of offline check
@@ -22,12 +23,19 @@ export function useNetworkStatus(){
 
     setOnlineStatus();
 
-    // set up network listener to
-    client.networkStatus.onStatusChangeListener({
+    const listener: NetworkStatusChangeCallback = {
       // get result and set online state to result
       onStatusChange: ({ online }) => setIsOnline(online)
-    });
-  }, []);
+    };
+
+    // set up network listener to
+    client.networkStatus.onStatusChangeListener(listener);
+
+    return function cleanup() {
+      // @ts-ignore
+      client.networkStatus.removeListener(listener);
+    };
+  }, [client]);
 
   return isOnline;
 };