@dhis2/app-service-offline 2.10.0 → 2.12.0

package/build/cjs/lib/cacheable-section.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCacheableSection = useCacheableSection;
+exports.CacheableSection = CacheableSection;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _cacheableSectionState = require("./cacheable-section-state");
+
+var _offlineInterface = require("./offline-interface");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const recordingStates = {
+  default: 'default',
+  pending: 'pending',
+  recording: 'recording',
+  error: 'error'
+};
+
+/**
+ * Returns the main controls for a cacheable section and manages recording
+ * state, which affects the render state of the CacheableSection component.
+ * Also returns the cached status of the section, which come straight from
+ * the `useCachedSection` hook.
+ *
+ * @param {String} id
+ * @returns {Object}
+ */
+function useCacheableSection(id) {
+  const offlineInterface = (0, _offlineInterface.useOfflineInterface)();
+  const {
+    isCached,
+    lastUpdated,
+    remove,
+    syncCachedSections
+  } = (0, _cacheableSectionState.useCachedSection)(id);
+  const {
+    recordingState,
+    setRecordingState,
+    removeRecordingState
+  } = (0, _cacheableSectionState.useRecordingState)(id);
+  (0, _react.useEffect)(() => {
+    // On mount, add recording state for this ID to context if needed
+    if (!recordingState) {
+      setRecordingState(recordingStates.default);
+    } // On unnmount, remove recording state if not recording
+
+
+    return () => {
+      if (recordingState && recordingState !== recordingStates.recording && recordingState !== recordingStates.pending) {
+        removeRecordingState();
+      }
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function startRecording({
+    recordingTimeoutDelay = 1000,
+    onStarted,
+    onCompleted,
+    onError
+  } = {}) {
+    // This promise resolving means that the message to the service worker
+    // to start recording was successful. Waiting for resolution prevents
+    // unnecessarily rerendering the whole component in case of an error
+    return offlineInterface.startRecording({
+      sectionId: id,
+      recordingTimeoutDelay,
+      onStarted: () => {
+        onRecordingStarted();
+        onStarted && onStarted();
+      },
+      onCompleted: () => {
+        onRecordingCompleted();
+        onCompleted && onCompleted();
+      },
+      onError: error => {
+        onRecordingError(error);
+        onError && onError(error);
+      }
+    }).then(() => setRecordingState(recordingStates.pending));
+  }
+
+  function onRecordingStarted() {
+    setRecordingState(recordingStates.recording);
+  }
+
+  function onRecordingCompleted() {
+    setRecordingState(recordingStates.default);
+    syncCachedSections();
+  }
+
+  function onRecordingError(error) {
+    console.error('Error during recording:', error);
+    setRecordingState(recordingStates.error);
+  } // isCached, lastUpdated, remove: _could_ be accessed by useCachedSection,
+  // but provided through this hook for convenience
+
+
+  return {
+    recordingState,
+    startRecording,
+    lastUpdated,
+    isCached,
+    remove
+  };
+}
+
+/**
+ * Used to wrap the relevant component to be recorded and saved offline.
+ * Depending on the recording state of the section, this wrapper will
+ * render its children, not render its children while recording is pending,
+ * or RErerender the chilren to force data fetching to record by the service
+ * worker.
+ *
+ * During recording, a loading mask provided by props is also rendered that is
+ * intended to prevent other interaction with the app that might interfere
+ * with the recording process.
+ */
+function CacheableSection({
+  id,
+  loadingMask,
+  children
+}) {
+  // Accesses recording state that useCacheableSection controls
+  const {
+    recordingState
+  } = (0, _cacheableSectionState.useRecordingState)(id); // The following causes the component to reload in the event of a recording
+  // error; the state will be cleared next time recording moves to pending.
+  // It fixes a component getting stuck while rendered without data after
+  // failing a recording while offline.
+  // Errors can be handled in the `onError` callback to `startRecording`.
+
+  if (recordingState === recordingStates.error) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  } // Handling rendering with the following conditions prevents an unncessary
+  // rerender after successful recording
+
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, recordingState === recordingStates.recording && loadingMask, recordingState !== recordingStates.pending && children);
+}
+
+CacheableSection.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  children: _propTypes.default.node,
+  loadingMask: _propTypes.default.node
+};

package/build/cjs/lib/clear-sensitive-caches.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clearSensitiveCaches = clearSensitiveCaches;
+exports.SECTIONS_STORE = exports.SECTIONS_DB = void 0;
+// IndexedDB names; should be the same as in @dhis2/pwa
+const SECTIONS_DB = 'sections-db';
+exports.SECTIONS_DB = SECTIONS_DB;
+const SECTIONS_STORE = 'sections-store'; // Non-sensitive caches that can be kept:
+
+exports.SECTIONS_STORE = SECTIONS_STORE;
+const KEEPABLE_CACHES = [/^workbox-precache/, // precached static assets
+/^other-assets/ // static assets cached at runtime - shouldn't be sensitive
+];
+
+/*
+ * Clears the 'sections-db' IndexedDB if it exists. Designed to avoid opening
+ * a new DB if it doesn't exist yet. Firefox can't check if 'sections-db'
+ * exists, in which circumstance the IndexedDB is unaffected. It's inelegant
+ * but acceptable because the IndexedDB has no sensitive data (only metadata
+ * of recorded sections), and the OfflineInterface handles discrepancies
+ * between CacheStorage and IndexedDB.
+ */
+const clearDB = async dbName => {
+  if (!('databases' in indexedDB)) {
+    // FF does not have indexedDB.databases. For that, just clear caches,
+    // and offline interface will handle discrepancies in PWA apps.
+    return;
+  }
+
+  const dbs = await window.indexedDB.databases();
+
+  if (!dbs.some(({
+    name
+  }) => name === dbName)) {
+    // Sections-db is not created; nothing to do here
+    return;
+  }
+
+  return new Promise((resolve, reject) => {
+    // IndexedDB fun:
+    const openDBRequest = indexedDB.open(dbName);
+
+    openDBRequest.onsuccess = e => {
+      const db = e.target.result;
+      const tx = db.transaction(SECTIONS_STORE, 'readwrite'); // When the transaction completes is when the operation is done:
+
+      tx.oncomplete = () => resolve();
+
+      tx.onerror = e => reject(e.target.error);
+
+      const os = tx.objectStore(SECTIONS_STORE);
+      const clearReq = os.clear();
+
+      clearReq.onerror = e => reject(e.target.error);
+    };
+
+    openDBRequest.onerror = e => {
+      reject(e.target.error);
+    };
+  });
+};
+/**
+ * Used to clear caches and 'sections-db' IndexedDB when a user logs out or a
+ * different user logs in to prevent someone from accessing a different user's
+ * caches. Should be able to be used in a non-PWA app.
+ */
+
+
+async function clearSensitiveCaches(dbName = SECTIONS_DB) {
+  console.debug('Clearing sensitive caches');
+  const cacheKeys = await caches.keys();
+  return Promise.all([clearDB(dbName), // remove caches if not in keepable list
+  ...cacheKeys.map(key => {
+    if (!KEEPABLE_CACHES.some(pattern => pattern.test(key))) {
+      // .then() satisfies typescript
+      return caches.delete(key).then(() => undefined);
+    }
+  })]).then(responses => {
+    // Return true if any caches have been cleared
+    // (caches.delete() returns true if a cache is deleted successfully)
+    // PWA apps can reload to restore their app shell cache
+    return responses.some(response => response);
+  });
+}

package/build/cjs/lib/global-state-service.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGlobalStateMutation = useGlobalStateMutation;
+exports.useGlobalState = exports.GlobalStateProvider = exports.createStore = void 0;
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// This file creates a redux-like state management service using React context
+// that minimizes unnecessary rerenders that consume the context.
+// See more at https://github.com/amcgee/state-service-poc
+const identity = state => state;
+
+const createStore = (initialState = {}) => {
+  const subscriptions = new Set();
+  let state = initialState;
+  return {
+    getState: () => state,
+    subscribe: callback => {
+      subscriptions.add(callback);
+    },
+    unsubscribe: callback => {
+      subscriptions.delete(callback);
+    },
+    mutate: mutation => {
+      state = mutation(state);
+
+      for (const callback of subscriptions) {
+        callback(state);
+      }
+    }
+  };
+};
+
+exports.createStore = createStore;
+
+const GlobalStateContext = /*#__PURE__*/_react.default.createContext(createStore());
+
+const useGlobalStateStore = () => (0, _react.useContext)(GlobalStateContext);
+
+const GlobalStateProvider = ({
+  store,
+  children
+}) => /*#__PURE__*/_react.default.createElement(GlobalStateContext.Provider, {
+  value: store
+}, children);
+
+exports.GlobalStateProvider = GlobalStateProvider;
+GlobalStateProvider.propTypes = {
+  children: _propTypes.default.node,
+  store: _propTypes.default.shape({})
+};
+
+const useGlobalState = (selector = identity) => {
+  const store = useGlobalStateStore();
+  const [selectedState, setSelectedState] = (0, _react.useState)(selector(store.getState()));
+  (0, _react.useEffect)(() => {
+    // NEW: deep equality check before updating
+    const callback = state => {
+      const newSelectedState = selector(state); // Second condition handles case where a selected object gets
+      // deleted, but state does not update
+
+      if (!(0, _isEqual.default)(selectedState, newSelectedState) || selectedState === undefined) setSelectedState(newSelectedState);
+    };
+
+    store.subscribe(callback); // Make sure to update state when selector changes
+
+    callback(store.getState());
+    return () => store.unsubscribe(callback);
+  }, [store, selector]);
+  /* eslint-disable-line react-hooks/exhaustive-deps */
+
+  return [selectedState, store.mutate];
+};
+
+exports.useGlobalState = useGlobalState;
+
+function useGlobalStateMutation(mutationCreator) {
+  const store = useGlobalStateStore();
+  return (0, _react.useCallback)((...args) => {
+    store.mutate(mutationCreator(...args));
+  }, [mutationCreator, store]);
+}

package/build/cjs/lib/offline-interface.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OfflineInterfaceProvider = OfflineInterfaceProvider;
+exports.useOfflineInterface = useOfflineInterface;
+
+var _appServiceAlerts = require("@dhis2/app-service-alerts");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// This is to prevent 'offlineInterface could be null' type-checking errors
+const noopOfflineInterface = {
+  pwaEnabled: false,
+  init: () => () => null,
+  startRecording: async () => undefined,
+  getCachedSections: async () => [],
+  removeSection: async () => false
+};
+const OfflineInterfaceContext = /*#__PURE__*/(0, _react.createContext)(noopOfflineInterface);
+
+/**
+ * Receives an OfflineInterface instance as a prop (presumably from the app
+ * adapter) and provides it as context for other offline tools.
+ *
+ * On mount, it initializes the offline interface, which (among other things)
+ * checks for service worker updates and, if updates are ready, prompts the
+ * user with an alert to skip waiting and reload the page to use new content.
+ */
+function OfflineInterfaceProvider({
+  offlineInterface,
+  children
+}) {
+  const {
+    show
+  } = (0, _appServiceAlerts.useAlert)(({
+    message
+  }) => message, ({
+    action,
+    onConfirm
+  }) => ({
+    actions: [{
+      label: action,
+      onClick: onConfirm
+    }],
+    permanent: true
+  }));
+
+  _react.default.useEffect(() => {
+    // Init returns a tear-down function
+    return offlineInterface.init({
+      promptUpdate: show
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+
+  return /*#__PURE__*/_react.default.createElement(OfflineInterfaceContext.Provider, {
+    value: offlineInterface
+  }, children);
+}
+
+OfflineInterfaceProvider.propTypes = {
+  children: _propTypes.default.node,
+  offlineInterface: _propTypes.default.shape({
+    init: _propTypes.default.func
+  })
+};
+
+function useOfflineInterface() {
+  const offlineInterface = (0, _react.useContext)(OfflineInterfaceContext);
+
+  if (offlineInterface === undefined) {
+    throw new Error('Offline interface context not found. If this app is using the app platform, make sure `pwa: { enabled: true }` is in d2.config.js. If this is not a platform app, make sure your app is wrapped with an app-runtime <Provider> or an <OfflineProvider> from app-service-offline.');
+  }
+
+  return offlineInterface;
+}

package/build/cjs/lib/offline-provider.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OfflineProvider = OfflineProvider;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cacheableSectionState = require("./cacheable-section-state");
+
+var _offlineInterface = require("./offline-interface");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/** A context provider for all the relevant offline contexts */
+function OfflineProvider({
+  offlineInterface,
+  children
+}) {
+  // If an offline interface is not provided, or if one is provided and PWA
+  // is not enabled, skip adding context providers
+  if (!offlineInterface) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  } // If PWA is not enabled, just init interface to make sure new SW gets
+  // activated with code that unregisters SW. Not technically necessary if a
+  // killswitch SW takes over, but the killswitch may not always be in use.
+  // Then, skip adding any context
+
+
+  if (!offlineInterface.pwaEnabled) {
+    offlineInterface.init({
+      promptUpdate: ({
+        onConfirm
+      }) => onConfirm()
+    });
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_offlineInterface.OfflineInterfaceProvider, {
+    offlineInterface: offlineInterface
+  }, /*#__PURE__*/_react.default.createElement(_cacheableSectionState.CacheableSectionProvider, null, children));
+}
+
+OfflineProvider.propTypes = {
+  children: _propTypes.default.node,
+  offlineInterface: _propTypes.default.shape({
+    init: _propTypes.default.func,
+    pwaEnabled: _propTypes.default.bool
+  })
+};