@dhis2/app-service-offline 3.11.3 → 3.12.0-alpha.1

package/build/es/lib/__tests__/use-cacheable-section.test.js

@@ -1,32 +1,31 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act, waitFor } from '@testing-library/react';
 import React from 'react';
 import { errorRecordingMock, failedMessageRecordingMock, mockOfflineInterface } from '../../utils/test-mocks';
 import { useCacheableSection } from '../cacheable-section';
-import { OfflineProvider } from '../offline-provider'; // Suppress 'act' warning for these tests
+import { OfflineProvider } from '../offline-provider';
 
+// Suppress 'act' warning for these tests
 const originalError = console.error;
 beforeEach(() => {
   jest.spyOn(console, 'error').mockImplementation(function () {
     const pattern = /Warning: An update to .* inside a test was not wrapped in act/;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     if (typeof args[0] === 'string' && pattern.test(args[0])) {
       return;
     }
-
     return originalError.call(console, ...args);
   });
 });
 afterEach(() => {
-  jest.clearAllMocks() // This syntax appeases typescript:
+  jest.clearAllMocks()
+  // This syntax appeases typescript:
   ;
   console.error.mockRestore();
 });
 it('renders in the default state initially', () => {
-  const wrapper = (_ref) => {
+  const wrapper = _ref => {
     let {
       children
     } = _ref;
@@ -34,7 +33,6 @@ it('renders in the default state initially', () => {
       offlineInterface: mockOfflineInterface
     }, children);
   };
-
   const {
     result
   } = renderHook(() => useCacheableSection('one'), {
@@ -45,7 +43,7 @@ it('renders in the default state initially', () => {
   expect(result.current.lastUpdated).toBeUndefined();
 });
 it('has stable references', () => {
-  const wrapper = (_ref2) => {
+  const wrapper = _ref2 => {
     let {
       children
     } = _ref2;
@@ -53,7 +51,6 @@ it('has stable references', () => {
       offlineInterface: mockOfflineInterface
     }, children);
   };
-
   const {
     result,
     rerender
@@ -74,61 +71,67 @@ it('has stable references', () => {
 });
 it('handles a successful recording', async done => {
   const [sectionId, timeoutDelay] = ['one', 1234];
-  const testOfflineInterface = { ...mockOfflineInterface,
+  const recordingSuccessOfflineInterface = {
+    ...mockOfflineInterface,
     getCachedSections: jest.fn().mockResolvedValueOnce([]).mockResolvedValueOnce([{
       sectionId: sectionId,
       lastUpdated: new Date()
     }])
   };
-
-  const wrapper = (_ref3) => {
+  const wrapper = _ref3 => {
     let {
       children
     } = _ref3;
     return /*#__PURE__*/React.createElement(OfflineProvider, {
-      offlineInterface: testOfflineInterface
+      offlineInterface: recordingSuccessOfflineInterface
     }, children);
   };
-
   const {
-    result,
-    waitFor
+    result
   } = renderHook(() => useCacheableSection(sectionId), {
     wrapper
   });
-
   const assertRecordingStarted = () => {
     expect(result.current.recordingState).toBe('recording');
   };
-
   const assertRecordingCompleted = async () => {
-    expect(result.current.recordingState).toBe('default'); // Test that 'isCached' gets updated
-
-    expect(testOfflineInterface.getCachedSections).toBeCalledTimes(2);
+    expect(result.current.recordingState).toBe('default');
+
+    // Test that 'isCached' gets updated
+    expect(recordingSuccessOfflineInterface.getCachedSections).toBeCalledTimes(2);
+    // Recording states are updated synchronously, but getting isCached
+    // state is asynchronous -- need to wait for that here.
+    // An assertion is not used as the waitFor condition because it may skew
+    // the total number assertions in this test if it needs to retry. Number
+    // of assertions is checked at the bottom of this test to make sure both
+    // of these callbacks are called.
     await waitFor(() => result.current.isCached === true);
     expect(result.current.isCached).toBe(true);
-    expect(result.current.lastUpdated).toBeInstanceOf(Date); // If this cb is not called, test should time out and fail
+    expect(result.current.lastUpdated).toBeInstanceOf(Date);
 
+    // If this cb is not called, test should time out and fail
     done();
   };
-
   await act(async () => {
     await result.current.startRecording({
       onStarted: assertRecordingStarted,
       onCompleted: assertRecordingCompleted,
       recordingTimeoutDelay: timeoutDelay
     });
-  }); // At this stage, recording should be 'pending'
+  });
 
-  expect(result.current.recordingState).toBe('pending'); // Check correct options sent to offline interface
+  // At this stage, recording should be 'pending'
+  expect(result.current.recordingState).toBe('pending');
 
+  // Check correct options sent to offline interface
   const options = mockOfflineInterface.startRecording.mock.calls[0][0];
   expect(options.sectionId).toBe(sectionId);
   expect(options.recordingTimeoutDelay).toBe(timeoutDelay);
   expect(typeof options.onStarted).toBe('function');
   expect(typeof options.onCompleted).toBe('function');
-  expect(typeof options.onError).toBe('function'); // Make sure all async assertions are called
+  expect(typeof options.onError).toBe('function');
 
+  // Make sure all async assertions are called
   expect.assertions(11);
 });
 it('handles a recording that encounters an error', async done => {
@@ -136,78 +139,72 @@ it('handles a recording that encounters an error', async done => {
   jest.spyOn(console, 'error').mockImplementation(function () {
     const actPattern = /Warning: An update to .* inside a test was not wrapped in act/;
     const errPattern = /Error during recording/;
-
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     const matchesPattern = actPattern.test(args[0]) || errPattern.test(args[0]);
-
     if (typeof args[0] === 'string' && matchesPattern) {
       return;
     }
-
     return originalError.call(console, ...args);
   });
-  const testOfflineInterface = { ...mockOfflineInterface,
+  const recordingErrorOfflineInterface = {
+    ...mockOfflineInterface,
     startRecording: errorRecordingMock
   };
-
-  const wrapper = (_ref4) => {
+  const wrapper = _ref4 => {
     let {
       children
     } = _ref4;
     return /*#__PURE__*/React.createElement(OfflineProvider, {
-      offlineInterface: testOfflineInterface
+      offlineInterface: recordingErrorOfflineInterface
     }, children);
   };
-
   const {
     result
   } = renderHook(() => useCacheableSection('one'), {
     wrapper
   });
-
   const assertRecordingStarted = () => {
     expect(result.current.recordingState).toBe('recording');
   };
-
   const assertRecordingError = error => {
     expect(result.current.recordingState).toBe('error');
     expect(error.message).toMatch(/test err/); // see errorRecordingMock
+    expect(console.error).toHaveBeenCalledWith('Error during recording:', error);
 
-    expect(console.error).toHaveBeenCalledWith('Error during recording:', error); // Expect only one call, from initialization:
-
-    expect(mockOfflineInterface.getCachedSections).toBeCalledTimes(1); // If this cb is not called, test should time out and fail
+    // Expect only one call, from initialization:
+    expect(mockOfflineInterface.getCachedSections).toBeCalledTimes(1);
 
+    // If this cb is not called, test should time out and fail
     done();
   };
-
   await act(async () => {
     await result.current.startRecording({
       onStarted: assertRecordingStarted,
       onError: assertRecordingError
     });
-  }); // At this stage, recording should be 'pending'
+  });
 
-  expect(result.current.recordingState).toBe('pending'); // Make sure all async assertions are called
+  // At this stage, recording should be 'pending'
+  expect(result.current.recordingState).toBe('pending');
 
+  // Make sure all async assertions are called
   expect.assertions(6);
 });
 it('handles an error starting the recording', async () => {
-  const testOfflineInterface = { ...mockOfflineInterface,
+  const messageErrorOfflineInterface = {
+    ...mockOfflineInterface,
     startRecording: failedMessageRecordingMock
   };
-
-  const wrapper = (_ref5) => {
+  const wrapper = _ref5 => {
     let {
       children
     } = _ref5;
     return /*#__PURE__*/React.createElement(OfflineProvider, {
-      offlineInterface: testOfflineInterface
+      offlineInterface: messageErrorOfflineInterface
     }, children);
   };
-
   const {
     result
   } = renderHook(() => useCacheableSection('err'), {
@@ -218,72 +215,71 @@ it('handles an error starting the recording', async () => {
 });
 it('handles remove and updates sections', async () => {
   const sectionId = 'one';
-  const testOfflineInterface = { ...mockOfflineInterface,
+  const sectionOpsOfflineInterface = {
+    ...mockOfflineInterface,
     getCachedSections: jest.fn().mockResolvedValueOnce([{
       sectionId: sectionId,
       lastUpdated: new Date()
     }]).mockResolvedValueOnce([])
   };
-
-  const wrapper = (_ref6) => {
+  const wrapper = _ref6 => {
     let {
       children
     } = _ref6;
     return /*#__PURE__*/React.createElement(OfflineProvider, {
-      offlineInterface: testOfflineInterface
+      offlineInterface: sectionOpsOfflineInterface
     }, children);
   };
-
   const {
-    result,
-    waitFor
+    result
   } = renderHook(() => useCacheableSection(sectionId), {
     wrapper
-  }); // Wait for state to sync with indexedDB
+  });
 
-  await waitFor(() => result.current.isCached === true);
+  // Wait for state to sync with indexedDB
+  await waitFor(() => expect(result.current.isCached).toBe(true));
   let success;
   await act(async () => {
     success = await result.current.remove();
   });
-  expect(success).toBe(true); // Test that 'isCached' gets updated
-
-  expect(testOfflineInterface.getCachedSections).toBeCalledTimes(2);
-  await waitFor(() => result.current.isCached === false);
+  expect(success).toBe(true);
+  // Test that 'isCached' gets updated
+  expect(sectionOpsOfflineInterface.getCachedSections).toBeCalledTimes(2);
+  await waitFor(() => expect(result.current.isCached).toBe(false));
   expect(result.current.isCached).toBe(false);
   expect(result.current.lastUpdated).toBeUndefined();
 });
 it('handles a change in ID', async () => {
-  const testOfflineInterface = { ...mockOfflineInterface,
+  const idChangeOfflineInterface = {
+    ...mockOfflineInterface,
     getCachedSections: jest.fn().mockResolvedValue([{
       sectionId: 'id-one',
       lastUpdated: new Date()
     }])
   };
-
-  const wrapper = (_ref7) => {
+  const wrapper = _ref7 => {
     let {
       children
     } = _ref7;
     return /*#__PURE__*/React.createElement(OfflineProvider, {
-      offlineInterface: testOfflineInterface
+      offlineInterface: idChangeOfflineInterface
     }, children);
   };
-
   const {
     result,
-    waitFor,
     rerender
   } = renderHook(id => useCacheableSection(id), {
     wrapper,
     initialProps: 'id-one'
-  }); // Wait for state to sync with indexedDB
+  });
 
-  await waitFor(() => result.current.isCached === true);
-  rerender('id-two'); // Test that 'isCached' gets updated
-  // expect(testOfflineInterface.getCachedSections).toBeCalledTimes(2)
+  // Wait for state to sync with indexedDB
+  await waitFor(() => expect(result.current.isCached).toBe(true));
+  rerender('id-two');
 
-  await waitFor(() => result.current.isCached === false);
+  // Test that 'isCached' gets updated
+  // expect(idChangeOfflineInterface.getCachedSections).toBeCalledTimes(2)
+  await waitFor(() => expect(result.current.isCached).toBe(false));
   expect(result.current.isCached).toBe(false);
   expect(result.current.lastUpdated).toBeUndefined();
 });

package/build/es/lib/__tests__/use-online-status-message.test.js

@@ -1,11 +1,11 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import React from 'react';
 import { mockOfflineInterface } from '../../utils/test-mocks';
 import { OfflineProvider } from '../offline-provider';
 import { useOnlineStatusMessage } from '../online-status-message';
 describe('useOnlineStatusMessage', () => {
   it('should allow the online status to be updated ', () => {
-    const wrapper = (_ref) => {
+    const wrapper = _ref => {
       let {
         children
       } = _ref;
@@ -13,7 +13,6 @@ describe('useOnlineStatusMessage', () => {
         offlineInterface: mockOfflineInterface
       }, children);
     };
-
     const {
       result
     } = renderHook(() => useOnlineStatusMessage(), {

package/build/es/lib/cacheable-section-state.js

@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { createStore, useGlobalState, useGlobalStateMutation, GlobalStateProvider } from './global-state-service';
-import { useOfflineInterface } from './offline-interface'; // Functions in here use the global state service to manage cacheable section
+import { useOfflineInterface } from './offline-interface';
+
+// Functions in here use the global state service to manage cacheable section
 // state in a performant way
 
 /**
@@ -17,19 +19,19 @@ function getSectionsById(sectionsArray) {
       sectionId,
       lastUpdated
     } = _ref;
-    return { ...result,
+    return {
+      ...result,
       [sectionId]: {
         lastUpdated
       }
     };
   }, {});
 }
+
 /**
  * Create a store for Cacheable Section state.
  * Expected to be used in app adapter
  */
-
-
 export function createCacheableSectionStore() {
   const initialState = {
     recordingStates: {},
@@ -37,40 +39,39 @@ export function createCacheableSectionStore() {
   };
   return createStore(initialState);
 }
+
 /**
  * Helper hook that returns a value that will persist between renders but makes
  * sure to only set its initial state once.
  * See https://gist.github.com/amcgee/42bb2fa6d5f79e607f00e6dccc733482
  */
-
 function useConst(factory) {
   const ref = React.useRef(null);
-
   if (ref.current === null) {
     ref.current = factory();
   }
-
   return ref.current;
 }
+
 /**
  * Provides context for a global state context which will track cached
  * sections' status and cacheable sections' recording states, which will
  * determine how that component will render. The provider will be a part of
  * the OfflineProvider.
  */
-
-
 export function CacheableSectionProvider(_ref2) {
   let {
     children
   } = _ref2;
   const offlineInterface = useOfflineInterface();
-  const store = useConst(createCacheableSectionStore); // On load, get sections and add to store
+  const store = useConst(createCacheableSectionStore);
 
+  // On load, get sections and add to store
   useEffect(() => {
     if (offlineInterface) {
       offlineInterface.getCachedSections().then(sections => {
-        store.mutate(state => ({ ...state,
+        store.mutate(state => ({
+          ...state,
           cachedSections: getSectionsById(sections)
         }));
       });
@@ -83,7 +84,6 @@ export function CacheableSectionProvider(_ref2) {
 CacheableSectionProvider.propTypes = {
   children: PropTypes.node
 };
-
 /**
  * Uses an optimized global state to manage 'recording state' values without
  * unnecessarily rerendering all consuming components
@@ -94,17 +94,21 @@ CacheableSectionProvider.propTypes = {
 export function useRecordingState(id) {
   const recordingStateSelector = useCallback(state => state.recordingStates[id], [id]);
   const [recordingState] = useGlobalState(recordingStateSelector);
-  const setRecordingStateMutationCreator = useCallback(newState => state => ({ ...state,
-    recordingStates: { ...state.recordingStates,
+  const setRecordingStateMutationCreator = useCallback(newState => state => ({
+    ...state,
+    recordingStates: {
+      ...state.recordingStates,
       [id]: newState
     }
   }), [id]);
   const setRecordingState = useGlobalStateMutation(setRecordingStateMutationCreator);
   const removeRecordingStateMutationCreator = useCallback(() => state => {
-    const recordingStates = { ...state.recordingStates
+    const recordingStates = {
+      ...state.recordingStates
     };
     delete recordingStates[id];
-    return { ...state,
+    return {
+      ...state,
       recordingStates
     };
   }, [id]);
@@ -115,16 +119,17 @@ export function useRecordingState(id) {
     removeRecordingState
   }), [recordingState, setRecordingState, removeRecordingState]);
 }
+
 /**
  * Returns a function that syncs cached sections in the global state
  * with IndexedDB, so that IndexedDB is the single source of truth
  *
  * @returns {Function} syncCachedSections
  */
-
 function useSyncCachedSections() {
   const offlineInterface = useOfflineInterface();
-  const setCachedSectionsMutationCreator = useCallback(cachedSections => state => ({ ...state,
+  const setCachedSectionsMutationCreator = useCallback(cachedSections => state => ({
+    ...state,
     cachedSections
   }), []);
   const setCachedSections = useGlobalStateMutation(setCachedSectionsMutationCreator);
@@ -133,7 +138,6 @@ function useSyncCachedSections() {
     setCachedSections(getSectionsById(sections));
   }, [offlineInterface, setCachedSections]);
 }
-
 /**
  * Uses global state to manage an object of cached sections' statuses
  *
@@ -143,6 +147,7 @@ export function useCachedSections() {
   const [cachedSections] = useGlobalState(state => state.cachedSections);
   const syncCachedSections = useSyncCachedSections();
   const offlineInterface = useOfflineInterface();
+
   /**
    * Uses offline interface to remove a section from IndexedDB and Cache
    * Storage.
@@ -150,14 +155,11 @@ export function useCachedSections() {
    * Returns a promise that resolves to `true` if a section is found and
    * deleted, or `false` if asection with the specified ID does not exist.
    */
-
   const removeById = useCallback(async id => {
     const success = await offlineInterface.removeSection(id);
-
     if (success) {
       await syncCachedSections();
     }
-
     return success;
   }, [offlineInterface, syncCachedSections]);
   return useMemo(() => ({
@@ -166,7 +168,6 @@ export function useCachedSections() {
     syncCachedSections
   }), [cachedSections, removeById, syncCachedSections]);
 }
-
 /**
  * Uses global state to manage the cached status of just one section, which
  * prevents unnecessary rerenders of consuming components
@@ -179,6 +180,7 @@ export function useCachedSection(id) {
   const syncCachedSections = useSyncCachedSections();
   const offlineInterface = useOfflineInterface();
   const lastUpdated = status && status.lastUpdated;
+
   /**
    * Uses offline interface to remove a section from IndexedDB and Cache
    * Storage.
@@ -186,14 +188,11 @@ export function useCachedSection(id) {
    * Returns `true` if a section is found and deleted, or `false` if a
    * section with the specified ID does not exist.
    */
-
   const remove = useCallback(async () => {
     const success = await offlineInterface.removeSection(id);
-
     if (success) {
       await syncCachedSections();
     }
-
     return success;
   }, [offlineInterface, id, syncCachedSections]);
   return useMemo(() => ({

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

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useMemo } from 'react';
+import { flushSync } from 'react-dom';
 import { useRecordingState, useCachedSection } from './cacheable-section-state';
 import { useOfflineInterface } from './offline-interface';
 const recordingStates = {
@@ -8,7 +9,6 @@ const recordingStates = {
   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.
@@ -35,9 +35,8 @@ export function useCacheableSection(id) {
     // 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
-
-
+    }
+    // On unnmount, remove recording state if not recording
     return () => {
       if (recordingState && recordingState !== recordingStates.recording && recordingState !== recordingStates.pending) {
         removeRecordingState();
@@ -70,21 +69,30 @@ export function useCacheableSection(id) {
       sectionId: id,
       recordingTimeoutDelay,
       onStarted: () => {
-        onRecordingStarted();
+        // Flush this state update synchronously so that the
+        // right recordingState is set before any other callbacks
+        flushSync(() => {
+          onRecordingStarted();
+        });
         onStarted && onStarted();
       },
       onCompleted: () => {
-        onRecordingCompleted();
+        flushSync(() => {
+          onRecordingCompleted();
+        });
         onCompleted && onCompleted();
       },
       onError: error => {
-        onRecordingError(error);
+        flushSync(() => {
+          onRecordingError(error);
+        });
         onError && onError(error);
       }
     }).then(() => setRecordingState(recordingStates.pending));
-  }, [id, offlineInterface, onRecordingCompleted, onRecordingError, onRecordingStarted, setRecordingState]); // isCached, lastUpdated, remove: _could_ be accessed by useCachedSection,
-  // but provided through this hook for convenience
+  }, [id, offlineInterface, onRecordingCompleted, onRecordingError, onRecordingStarted, setRecordingState]);
 
+  // isCached, lastUpdated, remove: _could_ be accessed by useCachedSection,
+  // but provided through this hook for convenience
   return useMemo(() => ({
     recordingState,
     startRecording,
@@ -93,7 +101,6 @@ export function useCacheableSection(id) {
     remove
   }), [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
@@ -114,18 +121,19 @@ export function CacheableSection(_ref) {
   // Accesses recording state that useCacheableSection controls
   const {
     recordingState
-  } = useRecordingState(id); // The following causes the component to reload in the event of a recording
+  } = 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.createElement(React.Fragment, null, children);
-  } // Handling rendering with the following conditions prevents an unncessary
-  // rerender after successful recording
-
+  }
 
+  // Handling rendering with the following conditions prevents an unncessary
+  // rerender after successful recording
   return /*#__PURE__*/React.createElement(React.Fragment, null, recordingState === recordingStates.recording && loadingMask, recordingState !== recordingStates.pending && children);
 }
 CacheableSection.propTypes = {