feat: Only sync when online

Author: munen

src/App.js

@@ -28,7 +28,11 @@ import './base.css';
 
 import Entry from './components/Entry';
 
-import { listenToBrowserButtons, syncOnBecomingVisible } from './lib/initial_setup';
+import {
+  listenToBrowserButtons,
+  syncOnBecomingVisible,
+  listenToNetworkConnectionEvents,
+} from './lib/initial_setup';
 
 import _ from 'lodash';
 import { Map } from 'immutable';
@@ -145,6 +149,7 @@ export default class App extends PureComponent {
 
     listenToBrowserButtons(this.store);
     syncOnBecomingVisible(this.store);
+    listenToNetworkConnectionEvents(this.store);
 
     _.bindAll(this, ['handleDragEnd']);
   }

src/actions/base.js

@@ -18,6 +18,11 @@ export const setIsLoading = (isLoading, path) => ({
   path,
 });
 
+export const setIsOnline = (online) => ({
+  type: 'SET_IS_ONLINE',
+  online,
+});
+
 export const setDisappearingLoadingMessage = (loadingMessage, delay) => (dispatch) => {
   dispatch(setLoadingMessage(loadingMessage));
   setTimeout(() => dispatch(hideLoadingMessage()), delay);

src/actions/org.js

@@ -79,16 +79,20 @@ const syncDebounced = (dispatch, getState, options) => {
 };
 
 export const sync = (options) => (dispatch, getState) => {
-  // If the user hits the 'sync' button, no matter if there's a sync
-  // in progress or if the sync 'should' be debounced, listen to the
-  // user and start a sync.
-  if (options.forceAction === 'manual') {
-    console.log('forcing sync');
-    const files = getState().org.present.get('files');
-    // sync all files on manual sync
-    files.keySeq().forEach((path) => dispatch(doSync({ ...options, path })));
-  } else {
-    syncDebounced(dispatch, getState, options);
+  // Don't do anything if the browser is not online. When it gets back
+  // from an offline state, a new `sync`action will be triggered then.
+  if (getState().base.get('online')) {
+    // If the user hits the 'sync' button, no matter if there's a sync
+    // in progress or if the sync 'should' be debounced, listen to the
+    // user and start a sync.
+    if (options.forceAction === 'manual') {
+      console.log('forcing sync');
+      const files = getState().org.present.get('files');
+      // sync all files on manual sync
+      files.keySeq().forEach((path) => dispatch(doSync({ ...options, path })));
+    } else {
+      syncDebounced(dispatch, getState, options);
+    }
   }
 };
 

src/components/OrgFile/components/ActionDrawer/index.js

@@ -26,6 +26,7 @@ const ActionDrawer = ({
   selectedTableCellId,
   inEditMode,
   isLoading,
+  online,
   shouldDisableSyncButtons,
 }) => {
   const [isDisplayingArrowButtons, setIsDisplayingArrowButtons] = useState(false);
@@ -354,7 +355,7 @@ const ActionDrawer = ({
             iconName="cloud"
             subIconName="sync-alt"
             shouldSpinSubIcon={isLoading}
-            isDisabled={shouldDisableSyncButtons}
+            isDisabled={shouldDisableSyncButtons || !online}
             onClick={handleSync}
             style={{
               opacity:
@@ -400,6 +401,7 @@ const mapStateToProps = (state) => {
     captureTemplates: state.capture.get('captureTemplates', List()),
     path,
     isLoading: !state.base.get('isLoading').isEmpty(),
+    online: state.base.get('online'),
   };
 };
 

src/lib/initial_setup.js

@@ -1,8 +1,30 @@
 import { debounce } from 'lodash';
 
 import { setPath, sync } from '../actions/org';
+import { setIsOnline } from '../actions/base';
 import { STATIC_FILE_PREFIX } from './org_utils';
 
+// When offline, don't sync and don't enable sync button. When online,
+// enable sync button. When newly online, force sync of all things
+// possibly dirty.
+export function listenToNetworkConnectionEvents(store) {
+  // Is the user online when starting up the application?
+  store.dispatch(setIsOnline(navigator.onLine));
+
+  window.onoffline = function () {
+    store.dispatch(setIsOnline(false));
+  };
+
+  window.ononline = function () {
+    store.dispatch(setIsOnline(true));
+    // Add grace period, because browsers might get the event `onLine`
+    // too soon to actually do network requests.
+    setTimeout(() => {
+      sync({ shouldSuppressMessages: true, forceAction: 'manual' })(store.dispatch, store.getState);
+    }, 2000);
+  };
+}
+
 // Generally, opening files and other routing is done with the
 // `react-router-dom` package (i.e. `<Link/ > tags). However, organice
 // also should react to browser buttons.

src/reducers/base.js

@@ -114,6 +114,10 @@ const setIsLoading = (state, action) => {
   }
 };
 
+const setIsOnline = (state, action) => {
+  return state.set('online', action.online);
+};
+
 const setAgendaTimeframe = (state, action) => state.set('agendaTimeframe', action.agendaTimeframe);
 
 const setColorScheme = (state, action) => {
@@ -183,6 +187,8 @@ export default (state = Map(), action) => {
       return closePopup(state, action);
     case 'SET_IS_LOADING':
       return setIsLoading(state, action);
+    case 'SET_IS_ONLINE':
+      return setIsOnline(state, action);
     case 'SET_AGENDA_TIMEFRAME':
       return setAgendaTimeframe(state, action);
     default: