Datastore network indicator (fixes #1069)

examples/react-datastore/package.json

@@ -16,7 +16,7 @@
     "@types/react-dom": "^16.9.0",
     "antd": "~4.4.1",
     "graphql.macro": "^1.4.2",
-    "offix-datastore": "0.3.17",
+    "offix-datastore": "0.4.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",

examples/react-datastore/src/App.tsx

@@ -5,30 +5,36 @@ import 'antd/dist/antd.css';
 import { useFindTodos } from './datastore/hooks';
 import { TodoList, AddTodo, Loading, Error, Header } from './components';
 import { datastore } from './datastore/config';
+import { NetworkStatusEvent } from 'offix-datastore/types/replication/network/NetworkStatus';
 
 function App() {
 
   const [replicating, setReplicating] = useState<boolean>(true);
   const [addView, setAddView] = useState<boolean>(false);
   const  { loading, error, data, subscribeToUpdates } = useFindTodos();
 
+  useEffect(() => {
+    datastore.getNetworkIndicator()?.subscribe({
+      next: (event: NetworkStatusEvent) => {
+        if (event.isOnline) {
+          datastore.startReplication();
+          setReplicating(true);
+        } else {
+          datastore.stopReplication();
+          setReplicating(false);
+        }
+      }
+    })
+  })
+
   useEffect(() => {
     // We can start replication on a per model basis
     // or for the entire store with:
     // datastore.startReplication
     // the `startReplication` method accepts an
     // optional filter
-    if (replicating) {
-      datastore.startReplication()
-    }
-  }, [replicating]);
-
-  const toggleReplication = () => {
-    if (replicating) {
-      datastore.stopReplication()
-    } 
-    setReplicating(!replicating)
-  }
+    datastore.startReplication()
+  });
 
   useEffect(() => {
     const subscription = subscribeToUpdates();
@@ -59,12 +65,11 @@ function App() {
                 </Button>
                 <Button
                   type="primary"
-                  onClick={() => toggleReplication()}
                   danger
                   ghost
                 >
                   {
-                    replicating ? "Go Offline" : "Go Online"
+                    replicating ? "Online" : "Offline"
                   }
                 </Button>
               </>

packages/datastore/datastore/package.json

@@ -1,6 +1,6 @@
 {
   "name": "offix-datastore",
-  "version": "0.3.18",
+  "version": "0.4.0",
   "main": "dist/index.js",
   "types": "types/index.d.ts",
   "repository": {

packages/datastore/datastore/src/DataStore.ts

@@ -95,4 +95,12 @@ export class DataStore {
   public stopReplication() {
     this.replicator?.stopReplication();
   }
+
+  /**
+   * Expose the Datastore network indicator to
+   * the client.
+   */
+  public getNetworkIndicator() {
+    return this.replicator?.getNetworkIndicator();
+  }
 }

packages/datastore/datastore/src/replication/GraphQLReplicator.ts

@@ -105,4 +105,12 @@ export class GraphQLReplicator {
     this.mutationQueue?.stopReplication();
     this.models.forEach(model => model.getReplicator()?.stopReplication());
   }
+
+  /**
+   * Getter method for replicator
+   * network status indicator
+   */
+  public getNetworkIndicator() {
+    return this.networkIndicator;
+  }
 }

packages/datastore/datastore/src/replication/fetch/FetchReplicator.ts

@@ -46,15 +46,15 @@ export class FetchReplicator {
     if (config.liveupdates?.enabled) {
       logger("Initializing subscription replication");
       const queries = buildGraphQLCRUDSubscriptions(model);
-      const subscrptionOptions = {
+      const subscriptionOptions = {
         config: config.liveupdates,
         client: client,
         networkIndicator: networkIndicator,
         storage,
         queries: queries,
         model: model
       };
-      this.subscriptionReplicator  = new SubscriptionReplicator(subscrptionOptions);
+      this.subscriptionReplicator  = new SubscriptionReplicator(subscriptionOptions);
     }
     // provide the model with a reference to the replicator
     model.setReplicator(this);
@@ -71,9 +71,6 @@ export class FetchReplicator {
     if (this.deltaReplicator) {
       this.deltaReplicator.start();
     }
-    if (this.subscriptionReplicator) {
-      this.subscriptionReplicator.start();
-    }
     this.replicationFlag = true;
   }