Prepare AppContainer for visibility and connectivity changes to be used for Sync

src/components/App/App.container.js

@@ -16,7 +16,14 @@ import {
   updateUnloggedUserLocation,
   updateConnectivity
 } from '../App/App.actions';
-import { isCordova, isElectron } from '../../cordova-util';
+import { getApiObjects } from '../Board/Board.actions';
+import {
+  isCordova,
+  isElectron,
+  onCvaResume,
+  cleanUpCvaOnResume
+} from '../../cordova-util';
+
 export class AppContainer extends Component {
   static propTypes = {
     /**
@@ -43,9 +50,20 @@ export class AppContainer extends Component {
     /**
      * User Id
      */
-    userId: PropTypes.string
+    userId: PropTypes.string,
+    /**
+     * Get API objects (boards and communicators)
+     */
+    getApiObjects: PropTypes.func.isRequired
   };
 
+  constructor(props) {
+    super(props);
+    this.syncDebounceTimer = null;
+    this.handleOnline = null;
+    this.handleOffline = null;
+  }
+
   componentDidMount() {
     const localizeUser = () => {
       const {
@@ -94,33 +112,94 @@ export class AppContainer extends Component {
 
     const configureConnectionStatus = () => {
       const { updateConnectivity } = this.props;
-      const setAsOnline = () => {
-        updateConnectivity({ isConnected: true });
-      };
 
-      const setAsOffline = () => {
+      this.handleOffline = () => {
+        if (navigator.onLine) {
+          return;
+        }
         updateConnectivity({ isConnected: false });
       };
 
+      this.handleOnline = () => {
+        if (!navigator.onLine) {
+          return;
+        }
+        updateConnectivity({ isConnected: true });
+        this.handleDataRefresh('Connection restored');
+      };
+
       const addConnectionEventListeners = () => {
-        window.addEventListener('offline', setAsOffline);
-        window.addEventListener('online', setAsOnline);
+        window.addEventListener('offline', this.handleOffline);
+        window.addEventListener('online', this.handleOnline);
       };
 
       const setCurrentConnectionStatus = () => {
         if (!navigator.onLine) {
-          setAsOffline();
+          this.handleOffline();
           return;
         }
-        setAsOnline();
-        return;
+        updateConnectivity({ isConnected: true });
       };
 
       setCurrentConnectionStatus();
       addConnectionEventListeners();
     };
 
     configureConnectionStatus();
+
+    this.handleDataRefresh = (source = 'Unknown') => {
+      const { isLogged } = this.props;
+
+      if (!isLogged) {
+        return;
+      }
+
+      if (!window.navigator.onLine) {
+        console.log('Sync skipped - Device is offline');
+        return;
+      }
+
+      if (this.syncDebounceTimer) {
+        clearTimeout(this.syncDebounceTimer);
+      }
+
+      this.syncDebounceTimer = setTimeout(() => {
+        console.log(`Sync dispatched - ${source}`);
+        // TODO: Replace with actual API call
+        // this.props.getApiObjects();
+      }, 2000);
+    };
+
+    this.handleWebVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        this.handleDataRefresh('Tab focused');
+      }
+    };
+
+    onCvaResume(() => this.handleDataRefresh('App resumed'));
+    document.addEventListener(
+      'visibilitychange',
+      this.handleWebVisibilityChange
+    );
+  }
+
+  componentWillUnmount() {
+    if (this.syncDebounceTimer) {
+      clearTimeout(this.syncDebounceTimer);
+    }
+
+    cleanUpCvaOnResume(() => this.handleDataRefresh('App resumed'));
+    document.removeEventListener(
+      'visibilitychange',
+      this.handleWebVisibilityChange
+    );
+
+    if (this.handleOnline) {
+      window.removeEventListener('online', this.handleOnline);
+    }
+    if (this.handleOffline) {
+      window.removeEventListener('offline', this.handleOffline);
+    }
   }
 
   handleNewContentAvailable = () => {
@@ -185,7 +264,8 @@ const mapDispatchToProps = {
   updateUserDataFromAPI,
   updateLoggedUserLocation,
   updateUnloggedUserLocation,
-  updateConnectivity
+  updateConnectivity,
+  getApiObjects
 };
 
 export default connect(