feat: offline status messaging (#1258)

examples/cra/yarn.lock

@@ -1054,26 +1054,26 @@
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
 "@dhis2/app-runtime@file:../../runtime":
-  version "3.4.3"
+  version "3.5.0"
   dependencies:
-    "@dhis2/app-service-alerts" "3.4.3"
-    "@dhis2/app-service-config" "3.4.3"
-    "@dhis2/app-service-data" "3.4.3"
-    "@dhis2/app-service-offline" "3.4.3"
+    "@dhis2/app-service-alerts" "3.5.0"
+    "@dhis2/app-service-config" "3.5.0"
+    "@dhis2/app-service-data" "3.5.0"
+    "@dhis2/app-service-offline" "3.5.0"
 
-"@dhis2/app-service-alerts@3.4.3", "@dhis2/app-service-alerts@file:../../services/alerts":
-  version "3.4.3"
+"@dhis2/app-service-alerts@3.5.0", "@dhis2/app-service-alerts@file:../../services/alerts":
+  version "3.5.0"
 
-"@dhis2/app-service-config@3.4.3", "@dhis2/app-service-config@file:../../services/config":
-  version "3.4.3"
+"@dhis2/app-service-config@3.5.0", "@dhis2/app-service-config@file:../../services/config":
+  version "3.5.0"
 
-"@dhis2/app-service-data@3.4.3", "@dhis2/app-service-data@file:../../services/data":
-  version "3.4.3"
+"@dhis2/app-service-data@3.5.0", "@dhis2/app-service-data@file:../../services/data":
+  version "3.5.0"
   dependencies:
     react-query "^3.13.11"
 
-"@dhis2/app-service-offline@3.4.3", "@dhis2/app-service-offline@file:../../services/offline":
-  version "3.4.3"
+"@dhis2/app-service-offline@3.5.0", "@dhis2/app-service-offline@file:../../services/offline":
+  version "3.5.0"
   dependencies:
     lodash "^4.17.21"
 

examples/query-playground/yarn.lock

@@ -1790,26 +1790,26 @@
     moment "^2.24.0"
 
 "@dhis2/app-runtime@*", "@dhis2/app-runtime@^2.2.2", "@dhis2/app-runtime@file:../../runtime":
-  version "3.4.3"
+  version "3.5.0"
   dependencies:
-    "@dhis2/app-service-alerts" "3.4.3"
-    "@dhis2/app-service-config" "3.4.3"
-    "@dhis2/app-service-data" "3.4.3"
-    "@dhis2/app-service-offline" "3.4.3"
+    "@dhis2/app-service-alerts" "3.5.0"
+    "@dhis2/app-service-config" "3.5.0"
+    "@dhis2/app-service-data" "3.5.0"
+    "@dhis2/app-service-offline" "3.5.0"
 
-"@dhis2/app-service-alerts@3.4.3", "@dhis2/app-service-alerts@file:../../services/alerts":
-  version "3.4.3"
+"@dhis2/app-service-alerts@3.5.0", "@dhis2/app-service-alerts@file:../../services/alerts":
+  version "3.5.0"
 
-"@dhis2/app-service-config@3.4.3", "@dhis2/app-service-config@file:../../services/config":
-  version "3.4.3"
+"@dhis2/app-service-config@3.5.0", "@dhis2/app-service-config@file:../../services/config":
+  version "3.5.0"
 
-"@dhis2/app-service-data@3.4.3", "@dhis2/app-service-data@file:../../services/data":
-  version "3.4.3"
+"@dhis2/app-service-data@3.5.0", "@dhis2/app-service-data@file:../../services/data":
+  version "3.5.0"
   dependencies:
     react-query "^3.13.11"
 
-"@dhis2/app-service-offline@3.4.3", "@dhis2/app-service-offline@file:../../services/offline":
-  version "3.4.3"
+"@dhis2/app-service-offline@3.5.0", "@dhis2/app-service-offline@file:../../services/offline":
+  version "3.5.0"
   dependencies:
     lodash "^4.17.21"
 

runtime/src/index.ts

@@ -14,6 +14,7 @@ export { useAlerts, useAlert } from '@dhis2/app-service-alerts'
 
 export {
     useOnlineStatus,
+    useOnlineStatusMessage,
     useCacheableSection,
     CacheableSection,
     useCachedSections,

services/offline/src/index.ts

@@ -2,4 +2,5 @@ export { OfflineProvider } from './lib/offline-provider'
 export { CacheableSection, useCacheableSection } from './lib/cacheable-section'
 export { useCachedSections } from './lib/cacheable-section-state'
 export { useOnlineStatus } from './lib/online-status'
+export { useOnlineStatusMessage } from './lib/online-status-message'
 export { clearSensitiveCaches } from './lib/clear-sensitive-caches'

services/offline/src/lib/__tests__/use-online-staus-message.test.tsx

@@ -0,0 +1,27 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import React, { FC } 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: FC = ({ children }) => (
+            <OfflineProvider offlineInterface={mockOfflineInterface}>
+                {children}
+            </OfflineProvider>
+        )
+
+        const { result } = renderHook(() => useOnlineStatusMessage(), {
+            wrapper,
+        })
+
+        expect(result.current.onlineStatusMessage).toBeUndefined()
+
+        act(() => {
+            result.current.setOnlineStatusMessage('8 offline events')
+        })
+
+        expect(result.current.onlineStatusMessage).toEqual('8 offline events')
+    })
+})

services/offline/src/lib/offline-provider.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { OfflineInterface } from '../types'
 import { CacheableSectionProvider } from './cacheable-section-state'
 import { OfflineInterfaceProvider } from './offline-interface'
+import { OnlineStatusMessageProvider } from './online-status-message'
 
 interface OfflineProviderInput {
     offlineInterface?: OfflineInterface
@@ -22,7 +23,11 @@ export function OfflineProvider({
 
     return (
         <OfflineInterfaceProvider offlineInterface={offlineInterface}>
-            <CacheableSectionProvider>{children}</CacheableSectionProvider>
+            <CacheableSectionProvider>
+                <OnlineStatusMessageProvider>
+                    {children}
+                </OnlineStatusMessageProvider>
+            </CacheableSectionProvider>
         </OfflineInterfaceProvider>
     )
 }

services/offline/src/lib/online-status-message.tsx

@@ -0,0 +1,39 @@
+import React, { ReactElement, ReactNode, useContext, useState } from 'react'
+import { OnlineStatusMessageContextAPI } from '../types'
+
+const defaultApi: OnlineStatusMessageContextAPI = {
+    onlineStatusMessage: undefined,
+    setOnlineStatusMessage: () => undefined,
+}
+
+const OnlineStatusMessageContext =
+    React.createContext<OnlineStatusMessageContextAPI>(defaultApi)
+
+export const useOnlineStatusMessage = (): OnlineStatusMessageContextAPI => {
+    const { onlineStatusMessage, setOnlineStatusMessage } =
+        useContext<OnlineStatusMessageContextAPI>(OnlineStatusMessageContext)
+
+    return {
+        onlineStatusMessage,
+        setOnlineStatusMessage,
+    }
+}
+
+export const OnlineStatusMessageProvider = ({
+    children,
+}: {
+    children: ReactNode
+}): ReactElement => {
+    const [onlineStatusMessage, setOnlineStatusMessage] = useState<ReactNode>()
+
+    return (
+        <OnlineStatusMessageContext.Provider
+            value={{
+                onlineStatusMessage,
+                setOnlineStatusMessage,
+            }}
+        >
+            {children}
+        </OnlineStatusMessageContext.Provider>
+    )
+}

services/offline/src/types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 // Cacheable Section types
 
 export type RecordingState = 'default' | 'pending' | 'error' | 'recording'
@@ -58,3 +60,10 @@ export interface OfflineInterface {
     getCachedSections: () => Promise<IndexedDBCachedSection[]>
     removeSection: (id: string) => Promise<boolean>
 }
+
+// Online status types
+
+export type OnlineStatusMessageContextAPI = {
+    onlineStatusMessage?: ReactNode
+    setOnlineStatusMessage: (additionalInfo: ReactNode) => void
+}