From 475ae08412b7045f69528c4860cdf452b376a006 Mon Sep 17 00:00:00 2001
From: Gianluca Zuccarelli <gzuccare@redhat.com>
Date: Thu, 25 Feb 2021 12:25:09 +0000
Subject: [PATCH] Datastore network indicator (fixes #1069) (#1070)

* fix: typo in variable name

* chore:  getter for replicator network status

* chore: expose datastore network indicator

* chore: update sample app

* chore: bump version for release

* fix: lint issues

* fix: remove uncommented code

* chore: bump datastore to 0.4.0
---
 examples/react-datastore/package.json         |  2 +-
 examples/react-datastore/src/App.tsx          | 31 +++++++++++--------
 packages/datastore/datastore/package.json     |  2 +-
 packages/datastore/datastore/src/DataStore.ts |  8 +++++
 .../src/replication/GraphQLReplicator.ts      |  8 +++++
 .../src/replication/fetch/FetchReplicator.ts  |  7 ++---
 6 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/examples/react-datastore/package.json b/examples/react-datastore/package.json
index ea92d08b6..d96f1d266 100644
--- a/examples/react-datastore/package.json
+++ b/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",
diff --git a/examples/react-datastore/src/App.tsx b/examples/react-datastore/src/App.tsx
index c08d496c2..1d231e21c 100644
--- a/examples/react-datastore/src/App.tsx
+++ b/examples/react-datastore/src/App.tsx
@@ -5,6 +5,7 @@ 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() {
 
@@ -12,23 +13,28 @@ function App() {
   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>
               </>
diff --git a/packages/datastore/datastore/package.json b/packages/datastore/datastore/package.json
index b1effcd58..83e019070 100644
--- a/packages/datastore/datastore/package.json
+++ b/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": {
diff --git a/packages/datastore/datastore/src/DataStore.ts b/packages/datastore/datastore/src/DataStore.ts
index 9e4181a30..f288e7171 100644
--- a/packages/datastore/datastore/src/DataStore.ts
+++ b/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();
+  }
 }
diff --git a/packages/datastore/datastore/src/replication/GraphQLReplicator.ts b/packages/datastore/datastore/src/replication/GraphQLReplicator.ts
index ba68d94e9..332974215 100644
--- a/packages/datastore/datastore/src/replication/GraphQLReplicator.ts
+++ b/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;
+  }
 }
diff --git a/packages/datastore/datastore/src/replication/fetch/FetchReplicator.ts b/packages/datastore/datastore/src/replication/fetch/FetchReplicator.ts
index 8ddc63794..335c8b2a5 100644
--- a/packages/datastore/datastore/src/replication/fetch/FetchReplicator.ts
+++ b/packages/datastore/datastore/src/replication/fetch/FetchReplicator.ts
@@ -46,7 +46,7 @@ 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,
@@ -54,7 +54,7 @@ export class FetchReplicator {
         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;
   }