fix: local offline handling [DHIS2-12937] (#2230)

* fix: migrate to useDhis2ConnectionStatus * chore: update @dhis2/analytics for offline support --------- Co-authored-by: Edoardo Sabadelli <[email protected]>
dhis2 · Mar 22, 2023 · bdcf374 · bdcf374
1 parent 964e007
commit bdcf374
Show file tree

Hide file tree

Showing 29 changed files with 146 additions and 112 deletions.
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
     "private": true,
     "license": "BSD-3-Clause",
     "dependencies": {
-        "@dhis2/analytics": "^24.2.5",
-        "@dhis2/app-runtime": "^3.7.0",
+        "@dhis2/analytics": "^24.9.2",
+        "@dhis2/app-runtime": "^3.9.0",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/d2-i18n": "^1.1.1",
         "@dhis2/d2-ui-core": "^7.4.1",
@@ -51,7 +51,7 @@
         "cy:capture": "cypress_dhis2_api_stub_mode=CAPTURE yarn d2-utils-cypress run --appStart 'yarn cypress:start'"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^10.2.3",
+        "@dhis2/cli-app-scripts": "^10.3.0",
         "@dhis2/cli-style": "^10.4.1",
         "@dhis2/cli-utils-cypress": "^7.0.1",
         "@dhis2/cypress-commands": "^7.0.1",

diff --git a/src/components/DashboardsBar/Chip.js b/src/components/DashboardsBar/Chip.js
@@ -1,4 +1,4 @@
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import { Chip as UiChip, colors, IconStarFilled24 } from '@dhis2/ui'
 import cx from 'classnames'
 import debounce from 'lodash/debounce.js'
@@ -12,7 +12,7 @@ import classes from './styles/Chip.module.css'
 
 const Chip = ({ starred, selected, label, dashboardId, onClick }) => {
     const { lastUpdated } = useCacheableSection(dashboardId)
-    const { online } = useOnlineStatus()
+    const { isConnected: online } = useDhis2ConnectionStatus()
     const chipProps = {
         selected,
     }

diff --git a/src/components/DashboardsBar/Content.js b/src/components/DashboardsBar/Content.js
@@ -1,4 +1,4 @@
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Button, ComponentCover, Tooltip, IconAdd24 } from '@dhis2/ui'
 import cx from 'classnames'
@@ -24,7 +24,7 @@ const Content = ({
     onSearchClicked,
 }) => {
     const [redirectUrl, setRedirectUrl] = useState(null)
-    const { offline } = useOnlineStatus()
+    const { isDisconnected: offline } = useDhis2ConnectionStatus()
 
     const onSelectDashboard = () => {
         const id = getFilteredDashboards(dashboards, filterText)[0]?.id

diff --git a/src/components/DashboardsBar/__tests__/Chip.spec.js b/src/components/DashboardsBar/__tests__/Chip.spec.js
@@ -29,7 +29,7 @@ jest.mock('@dhis2/ui', () => {
 /* eslint-enable react/prop-types */
 
 jest.mock('@dhis2/app-runtime', () => ({
-    useOnlineStatus: () => ({ online: true }),
+    useDhis2ConnectionStatus: () => ({ isConnected: true }),
     useCacheableSection: jest.fn(),
 }))
 

diff --git a/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js b/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js
@@ -37,7 +37,7 @@ const dashboards = {
 }
 
 jest.mock('@dhis2/app-runtime', () => ({
-    useOnlineStatus: () => ({ online: true }),
+    useDhis2ConnectionStatus: () => ({ isConnected: true }),
     useCacheableSection: jest.fn(() => ({
         isCached: false,
         recordingState: 'default',

diff --git a/...mponents/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.js b/...mponents/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.js
@@ -15,7 +15,10 @@ jest.mock('../../../../SystemSettingsProvider', () => {
 })
 
 jest.mock('@dhis2/app-runtime', () => ({
-    useOnlineStatus: jest.fn(() => ({ online: false, offline: true })),
+    useDhis2ConnectionStatus: jest.fn(() => ({
+        isConnected: false,
+        isDisconnected: true,
+    })),
     useConfig: jest.fn(() => ({ baseUrl: 'dhis2' })),
 }))
 

diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.js b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.js
@@ -15,7 +15,10 @@ jest.mock('../../../../SystemSettingsProvider', () => {
 })
 
 jest.mock('@dhis2/app-runtime', () => ({
-    useOnlineStatus: jest.fn(() => ({ online: true, offline: false })),
+    useDhis2ConnectionStatus: jest.fn(() => ({
+        isConnected: true,
+        isDisconnected: false,
+    })),
     useConfig: jest.fn(() => ({ baseUrl: 'dhis2' })),
 }))
 

diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js
@@ -1,4 +1,4 @@
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import { render } from '@testing-library/react'
 import React from 'react'
 import {
@@ -11,25 +11,28 @@ import {
 import ViewAsMenuItems from '../ViewAsMenuItems.js'
 
 jest.mock('@dhis2/app-runtime', () => ({
-    useOnlineStatus: jest.fn(() => ({ online: true, offline: false })),
+    useDhis2ConnectionStatus: jest.fn(() => ({
+        isConnected: true,
+        isDisconnected: false,
+    })),
 }))
 
 const offline = {
-    online: false,
-    offline: true,
+    isConnected: false,
+    isDisconnected: true,
 }
 
 const online = {
-    online: true,
-    offline: false,
+    isConnected: true,
+    isDisconnected: false,
 }
 
 const defaultProps = {
     onActiveTypeChanged: jest.fn(),
 }
 
 test('renders menu for active type MAP and type CHART', async () => {
-    useOnlineStatus.mockImplementation(jest.fn(() => online))
+    useDhis2ConnectionStatus.mockImplementation(jest.fn(() => online))
     const props = Object.assign({}, defaultProps, {
         type: CHART,
         activeType: MAP,
@@ -41,7 +44,7 @@ test('renders menu for active type MAP and type CHART', async () => {
 })
 
 test('renders disabled menu items when offline', () => {
-    useOnlineStatus.mockImplementation(jest.fn(() => offline))
+    useDhis2ConnectionStatus.mockImplementation(jest.fn(() => offline))
 
     const props = Object.assign({}, defaultProps, {
         type: CHART,
@@ -53,7 +56,7 @@ test('renders disabled menu items when offline', () => {
 })
 
 test('renders menu for active type CHART and type MAP', async () => {
-    useOnlineStatus.mockImplementation(jest.fn(() => online))
+    useDhis2ConnectionStatus.mockImplementation(jest.fn(() => online))
     const props = Object.assign({}, defaultProps, {
         type: MAP,
         activeType: CHART,
@@ -68,7 +71,7 @@ test('renders menu for active type CHART and type MAP', async () => {
 })
 
 test('renders menu for active type MAP and type MAP without Thematic layer', async () => {
-    useOnlineStatus.mockImplementation(jest.fn(() => online))
+    useDhis2ConnectionStatus.mockImplementation(jest.fn(() => online))
     const props = Object.assign({}, defaultProps, {
         type: MAP,
         activeType: MAP,
@@ -83,7 +86,7 @@ test('renders menu for active type MAP and type MAP without Thematic layer', asy
 })
 
 test('renders menu for active type MAP and type MAP without Thematic layer when offline', async () => {
-    useOnlineStatus.mockImplementation(jest.fn(() => offline))
+    useDhis2ConnectionStatus.mockImplementation(jest.fn(() => offline))
     const props = Object.assign({}, defaultProps, {
         type: MAP,
         activeType: MAP,
@@ -98,7 +101,7 @@ test('renders menu for active type MAP and type MAP without Thematic layer when
 })
 
 test('renders menu for active type REPORT_TABLE and type CHART', async () => {
-    useOnlineStatus.mockImplementation(jest.fn(() => online))
+    useDhis2ConnectionStatus.mockImplementation(jest.fn(() => online))
     const props = Object.assign({}, defaultProps, {
         type: CHART,
         activeType: REPORT_TABLE,
@@ -111,7 +114,7 @@ test('renders menu for active type REPORT_TABLE and type CHART', async () => {
 })
 
 test('renders menu for active type CHART and type REPORT_TABLE', async () => {
-    useOnlineStatus.mockImplementation(jest.fn(() => online))
+    useDhis2ConnectionStatus.mockImplementation(jest.fn(() => online))
     const props = Object.assign({}, defaultProps, {
         type: REPORT_TABLE,
         activeType: CHART,
@@ -124,7 +127,7 @@ test('renders menu for active type CHART and type REPORT_TABLE', async () => {
 })
 
 test('renders menu for active type EVENT_REPORT and type EVENT_CHART', async () => {
-    useOnlineStatus.mockImplementation(jest.fn(() => online))
+    useDhis2ConnectionStatus.mockImplementation(jest.fn(() => online))
     const props = Object.assign({}, defaultProps, {
         type: EVENT_CHART,
         activeType: EVENT_REPORT,
@@ -137,7 +140,7 @@ test('renders menu for active type EVENT_REPORT and type EVENT_CHART', async ()
 })
 
 test('renders menu for active type EVENT_CHART and type EVENT_REPORT', async () => {
-    useOnlineStatus.mockImplementation(jest.fn(() => online))
+    useDhis2ConnectionStatus.mockImplementation(jest.fn(() => online))
     const props = Object.assign({}, defaultProps, {
         type: EVENT_REPORT,
         activeType: EVENT_CHART,

diff --git a/src/components/Item/VisualizationItem/ItemFooter.js b/src/components/Item/VisualizationItem/ItemFooter.js
@@ -1,4 +1,4 @@
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import { useD2 } from '@dhis2/app-runtime-adapter-d2'
 import i18n from '@dhis2/d2-i18n'
 import InterpretationsComponent from '@dhis2/d2-ui-interpretations'
@@ -10,7 +10,7 @@ import classes from './styles/ItemFooter.module.css'
 
 const ItemFooter = (props) => {
     const { d2 } = useD2()
-    const { offline } = useOnlineStatus()
+    const { isDisconnected: offline } = useDhis2ConnectionStatus()
 
     return (
         <div className={classes.itemFooter} data-test="dashboarditem-footer">

diff --git a/src/components/Item/VisualizationItem/Visualization/MapPlugin.js b/src/components/Item/VisualizationItem/Visualization/MapPlugin.js
@@ -1,4 +1,4 @@
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -8,7 +8,7 @@ import NoVisualizationMessage from './NoVisualizationMessage.js'
 const mapViewIsEELayer = (mapView) => mapView.layer.includes('earthEngine')
 
 const MapPlugin = ({ visualization, style, ...pluginProps }) => {
-    const { offline } = useOnlineStatus()
+    const { isDisconnected: offline } = useDhis2ConnectionStatus()
 
     if (offline && visualization.mapViews?.find(mapViewIsEELayer)) {
         return (

diff --git a/src/components/MenuItemWithTooltip.js b/src/components/MenuItemWithTooltip.js
@@ -1,5 +1,5 @@
 import { OfflineTooltip } from '@dhis2/analytics'
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { MenuItem } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -12,7 +12,7 @@ const MenuItemWithTooltip = ({
     disabled,
     ...rest
 }) => {
-    const { offline } = useOnlineStatus()
+    const { isDisconnected: offline } = useDhis2ConnectionStatus()
 
     const tooltipContent =
         disabledWhenOffline && offline

diff --git a/src/components/__tests__/App.spec.js b/src/components/__tests__/App.spec.js
@@ -10,7 +10,10 @@ import { useSystemSettings } from '../SystemSettingsProvider.js'
 
 jest.mock('@dhis2/analytics')
 jest.mock('@dhis2/app-runtime', () => ({
-    useOnlineStatus: jest.fn(() => ({ online: true, offline: false })),
+    useDhis2ConnectionStatus: jest.fn(() => ({
+        isConnected: true,
+        isDisconnected: false,
+    })),
     useDataEngine: jest.fn(() => ({ query: Function.prototype })),
     useCacheableSection: jest.fn,
 }))

diff --git a/src/pages/edit/ActionsBar.js b/src/pages/edit/ActionsBar.js
@@ -1,5 +1,9 @@
 import { OfflineTooltip, TranslationDialog } from '@dhis2/analytics'
-import { useOnlineStatus, useDataEngine, useAlert } from '@dhis2/app-runtime'
+import {
+    useDhis2ConnectionStatus,
+    useDataEngine,
+    useAlert,
+} from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Button, ButtonStrip } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -43,7 +47,7 @@ const fieldsToTranslate = ['name', 'description']
 
 const EditBar = ({ dashboard, ...props }) => {
     const dataEngine = useDataEngine()
-    const { online } = useOnlineStatus()
+    const { isConnected: online } = useDhis2ConnectionStatus()
     const [translationDlgIsOpen, setTranslationDlgIsOpen] = useState(false)
     const [filterSettingsDlgIsOpen, setFilterSettingsDlgIsOpen] =
         useState(false)

diff --git a/src/pages/edit/ItemSelector/ItemSearchField.js b/src/pages/edit/ItemSelector/ItemSearchField.js
@@ -1,12 +1,12 @@
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Input, Tooltip } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import classes from './styles/ItemSearchField.module.css'
 
 const ItemSearchField = (props) => {
-    const { online } = useOnlineStatus()
+    const { isConnected: online } = useDhis2ConnectionStatus()
 
     const getInput = () => (
         // autoComplete not supported in ui@6, remove this form after upgrade

diff --git a/src/pages/edit/LayoutModal.js b/src/pages/edit/LayoutModal.js
@@ -1,5 +1,5 @@
 import { OfflineTooltip } from '@dhis2/analytics'
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import {
     Modal,
@@ -27,7 +27,7 @@ const getColsSaveValue = (value) =>
     value === '' ? DEFAULT_COLUMNS : parseInt(value, 10)
 
 export const LayoutModal = ({ columns, onSaveLayout, onClose }) => {
-    const { offline } = useOnlineStatus()
+    const { isDisconnected: offline } = useDhis2ConnectionStatus()
     const [cols, setCols] = useState(columns)
 
     useEffect(() => setCols(columns), [])

diff --git a/src/pages/edit/TitleBar.js b/src/pages/edit/TitleBar.js
@@ -1,5 +1,5 @@
 import { OfflineTooltip } from '@dhis2/analytics'
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { InputField, TextAreaField, Radio, Button } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -37,7 +37,7 @@ const EditTitleBar = ({
     onChangeDescription,
     onSaveLayout,
 }) => {
-    const { offline } = useOnlineStatus()
+    const { isDisconnected: offline } = useDhis2ConnectionStatus()
 
     const updateTitle = (_, e) => {
         onChangeTitle(e.target.value)

diff --git a/src/pages/edit/__tests__/ActionsBar.spec.js b/src/pages/edit/__tests__/ActionsBar.spec.js
@@ -67,7 +67,10 @@ useD2.mockReturnValue({
 })
 
 jest.mock('@dhis2/app-runtime', () => ({
-    useOnlineStatus: jest.fn(() => ({ online: true, offline: false })),
+    useDhis2ConnectionStatus: jest.fn(() => ({
+        isConnected: true,
+        isDisconnected: false,
+    })),
     useDataEngine: jest.fn(() => ({ dataEngine: {} })),
     useAlert: jest.fn(() => ({})),
 }))

diff --git a/src/pages/edit/__tests__/FilterSettingsDialog.spec.js b/src/pages/edit/__tests__/FilterSettingsDialog.spec.js
@@ -3,7 +3,7 @@ import React from 'react'
 import FilterSettingsDialog from '../FilterSettingsDialog.js'
 
 jest.mock('@dhis2/app-runtime', () => ({
-    useOnlineStatus: () => ({ online: true }),
+    useDhis2ConnectionStatus: () => ({ isConnected: true }),
 }))
 
 /* eslint-disable react/prop-types */

diff --git a/src/pages/start/StartScreen.js b/src/pages/start/StartScreen.js
@@ -1,4 +1,4 @@
-import { useDataEngine, useOnlineStatus } from '@dhis2/app-runtime'
+import { useDataEngine, useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
@@ -9,7 +9,7 @@ import styles from './styles/StartScreen.module.css'
 const StartScreen = ({ username }) => {
     const [mostViewedDashboards, setMostViewedDashboards] = useState([])
     const dataEngine = useDataEngine()
-    const { online } = useOnlineStatus()
+    const { isConnected: online } = useDhis2ConnectionStatus()
 
     useEffect(() => {
         async function populateMostViewedDashboards(dataEngine) {

diff --git a/src/pages/view/FilterBar/FilterBadge.js b/src/pages/view/FilterBar/FilterBadge.js
@@ -1,4 +1,4 @@
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Tooltip } from '@dhis2/ui'
 import cx from 'classnames'
@@ -11,7 +11,7 @@ import { sGetSelectedId } from '../../../reducers/selected.js'
 import classes from './styles/FilterBadge.module.css'
 
 const FilterBadge = ({ dashboardId, filter, openFilterModal, onRemove }) => {
-    const { online } = useOnlineStatus()
+    const { isConnected: online } = useDhis2ConnectionStatus()
     const { isCached } = useCacheableSection(dashboardId)
 
     const notAllowed = !isCached && !online

diff --git a/src/pages/view/FilterBar/FilterBar.js b/src/pages/view/FilterBar/FilterBar.js
@@ -1,4 +1,4 @@
-import { useOnlineStatus } from '@dhis2/app-runtime'
+import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
@@ -13,7 +13,7 @@ import FilterBadge from './FilterBadge.js'
 import classes from './styles/FilterBar.module.css'
 
 const FilterBar = ({ filters, removeFilter, removeAllFilters }) => {
-    const { online } = useOnlineStatus()
+    const { isConnected: online } = useDhis2ConnectionStatus()
     const [dialogIsOpen, setDialogIsOpen] = useState(false)
 
     const onRemoveFilter = (filterId) => {