feat: lazy load dashboards into the navigation menu [DHIS2-10624]

cypress/support/utils.js

@@ -1,4 +1,4 @@
-export const EXTENDED_TIMEOUT = { timeout: 25000 }
+export const EXTENDED_TIMEOUT = { timeout: 15000 }
 
 export const getApiBaseUrl = () => {
     const baseUrl = Cypress.env('dhis2BaseUrl') || ''

i18n/en.pot

@@ -679,12 +679,12 @@ msgstr "Create a new dashboard with the + button."
 msgid "Your most viewed dashboards"
 msgstr "Your most viewed dashboards"
 
-msgid "No dashboards found. Use the + button to create a new dashboard."
-msgstr "No dashboards found. Use the + button to create a new dashboard."
-
 msgid "Requested dashboard not found"
 msgstr "Requested dashboard not found"
 
+msgid "No dashboards found. Use the + button to create a new dashboard."
+msgstr "No dashboards found. Use the + button to create a new dashboard."
+
 msgid "No description"
 msgstr "No description"
 

src/actions/editDashboard.js

@@ -30,7 +30,6 @@ import {
     sGetItemConfigInsertPosition,
     RECEIVED_CODE,
 } from '../reducers/editDashboard.js'
-import { tFetchDashboards } from './dashboards.js'
 
 // actions
 
@@ -183,8 +182,5 @@ export const tSaveDashboard = () => async (dispatch, getState, dataEngine) => {
         ? await updateDashboard(dataEngine, dashboardToSave)
         : await postDashboard(dataEngine, dashboardToSave)
 
-    // update the dashboard list
-    await dispatch(tFetchDashboards())
-
     return Promise.resolve(dashboardId)
 }

src/actions/offlineDashboards.js

@@ -0,0 +1,15 @@
+import {
+    SET_OFFLINE_DASHBOARDS,
+    STAR_OFFLINE_DASHBOARD,
+} from '../reducers/offlineDashboards.js'
+
+// Action creators
+export const acSetOfflineDashboards = (dashboards) => ({
+    type: SET_OFFLINE_DASHBOARDS,
+    dashboards,
+})
+
+export const acSetOfflineDashboardStarred = (value) => ({
+    type: STAR_OFFLINE_DASHBOARD,
+    value,
+})

src/actions/selected.js

@@ -6,9 +6,9 @@ import { storePreferredDashboardId } from '../modules/localStorage.js'
 import {
     SET_SELECTED,
     CLEAR_SELECTED,
+    SET_SELECTED_STARRED,
     sGetSelectedId,
 } from '../reducers/selected.js'
-import { acAppendDashboards } from './dashboards.js'
 import { acClearItemActiveTypes } from './itemActiveTypes.js'
 import { acClearItemFilters } from './itemFilters.js'
 import { acClearVisualizations } from './visualizations.js'
@@ -24,21 +24,17 @@ export const acClearSelected = () => ({
     type: CLEAR_SELECTED,
 })
 
+export const acSetSelectedStarred = (isStarred) => ({
+    type: SET_SELECTED_STARRED,
+    value: isStarred,
+})
+
 // thunks
 export const tSetSelectedDashboardById =
     (id, username) => async (dispatch, getState, dataEngine) => {
         const dashboard = await apiFetchDashboard(dataEngine, id, {
             mode: VIEW,
         })
-        dispatch(
-            acAppendDashboards([
-                {
-                    id: dashboard.id,
-                    displayName: dashboard.displayName,
-                    starred: dashboard.starred,
-                },
-            ])
-        )
 
         if (username) {
             storePreferredDashboardId(username, id)

src/api/fetchDashboards.js

@@ -0,0 +1,35 @@
+export const firstDashboardQuery = {
+    dashboards: {
+        resource: 'dashboards',
+        params: {
+            fields: 'id,displayName',
+            order: 'favorite:desc,displayName:asc',
+            paging: true,
+            pageSize: 1,
+        },
+    },
+}
+
+export const requestedDashboardQuery = {
+    dashboard: {
+        resource: 'dashboards',
+        id: ({ id }) => id,
+        params: {
+            fields: ['id', 'displayName'],
+        },
+    },
+}
+
+export const dashboardsByIdsQuery = {
+    dashboards: {
+        resource: 'dashboards',
+        params: ({ ids }) => {
+            return {
+                fields: 'id,displayName,favorite~rename(starred)',
+                order: 'favorite:desc,displayName:asc',
+                filter: ids ? `id:in:[${ids.join(',')}]` : undefined,
+                paging: false,
+            }
+        },
+    },
+}

src/components/App.jsx

@@ -4,8 +4,6 @@ import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { Redirect, HashRouter as Router, Route, Switch } from 'react-router-dom'
 import { acClearActiveModalDimension } from '../actions/activeModalDimension.js'
-import { tFetchDashboards } from '../actions/dashboards.js'
-import { acClearDashboardsFilter } from '../actions/dashboardsFilter.js'
 import { acClearEditDashboard } from '../actions/editDashboard.js'
 import { acClearItemActiveTypes } from '../actions/itemActiveTypes.js'
 import { acClearItemFilters } from '../actions/itemFilters.js'
@@ -26,14 +24,13 @@ import 'react-grid-layout/css/styles.css'
 import 'react-resizable/css/styles.css'
 import './styles/ItemGrid.css'
 
-const App = ({ fetchDashboards, setShowDescription, resetState }) => {
+const App = ({ setShowDescription, resetState }) => {
     const systemSettings = useSystemSettings()
     const currentUser = useCurrentUser()
 
     useEffect(() => {
-        fetchDashboards()
         setShowDescription()
-    }, [fetchDashboards, setShowDescription])
+    }, [setShowDescription])
 
     return (
         systemSettings && (
@@ -48,10 +45,7 @@ const App = ({ fetchDashboards, setShowDescription, resetState }) => {
                                 systemSettings.startModuleEnableLightweight ? (
                                     <Redirect to={ROUTE_START_PATH} />
                                 ) : (
-                                    <ViewDashboard
-                                        {...props}
-                                        username={currentUser.username}
-                                    />
+                                    <ViewDashboard {...props} />
                                 )
                             }
                         />
@@ -73,12 +67,7 @@ const App = ({ fetchDashboards, setShowDescription, resetState }) => {
                         <Route
                             exact
                             path="/:dashboardId"
-                            render={(props) => (
-                                <ViewDashboard
-                                    {...props}
-                                    username={currentUser.username}
-                                />
-                            )}
+                            render={(props) => <ViewDashboard {...props} />}
                         />
                         <Route
                             exact
@@ -105,17 +94,14 @@ const App = ({ fetchDashboards, setShowDescription, resetState }) => {
 }
 
 App.propTypes = {
-    fetchDashboards: PropTypes.func,
     resetState: PropTypes.func,
     setShowDescription: PropTypes.func,
 }
 
 const mapDispatchToProps = {
-    fetchDashboards: tFetchDashboards,
     setShowDescription: tSetShowDescription,
     resetState: () => (dispatch) => {
         dispatch(acSetSelected({}))
-        dispatch(acClearDashboardsFilter())
         dispatch(acClearVisualizations())
         dispatch(acClearEditDashboard())
         dispatch(acClearPrintDashboard())

src/components/DashboardsBar/ConfigureSupersetDashboard/CreateSupersetDashboardModal.jsx

@@ -10,9 +10,7 @@ import {
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useCallback, useState } from 'react'
-import { useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
-import { tFetchDashboards } from '../../../actions/dashboards.js'
 import { parseSupersetDashboardFieldValues } from '../../../modules/parseSupersetDashboardFieldValues.js'
 import { useSupersetDashboardFieldsState } from '../../../modules/useSupersetDashboardFieldsState.js'
 import styles from './styles/SupersetDashboardModal.module.css'
@@ -29,7 +27,6 @@ export const CreateSupersetDashboardModal = ({
     backToChooseDashboardModal,
     closeModal,
 }) => {
-    const dispatch = useDispatch()
     const history = useHistory()
     const [loading, setLoading] = useState(false)
     const [postDashboard, { error }] = useDataMutation(postDashboardQuery, {
@@ -49,12 +46,11 @@ export const CreateSupersetDashboardModal = ({
             event.preventDefault()
             setLoading(true)
             const { response } = await postDashboard({ values })
-            await dispatch(tFetchDashboards())
             setLoading(false)
             closeModal()
             history.push(`/${response.uid}`)
         },
-        [values, postDashboard, closeModal, dispatch, history]
+        [values, postDashboard, closeModal, history]
     )
 
     return (

src/components/DashboardsBar/InformationBlock/InformationBlock.jsx

@@ -1,15 +1,11 @@
 import { useAlert, useDataEngine } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import PropTypes from 'prop-types'
 import React, { useCallback } from 'react'
-import { connect } from 'react-redux'
-import { acSetDashboardStarred } from '../../../actions/dashboards.js'
+import { useDispatch, useSelector } from 'react-redux'
+import { acSetOfflineDashboardStarred } from '../../../actions/offlineDashboards.js'
+import { acSetSelectedStarred } from '../../../actions/selected.js'
 import { isSmallScreen } from '../../../modules/smallScreen.js'
-import { sGetDashboardStarred } from '../../../reducers/dashboards.js'
-import {
-    sGetSelected,
-    sGetSelectedIsEmbedded,
-} from '../../../reducers/selected.js'
+import { sGetSelected } from '../../../reducers/selected.js'
 import { useWindowDimensions } from '../../WindowDimensionsProvider.jsx'
 import ActionsBar from './ActionsBar.jsx'
 import { apiStarDashboard } from './apiStarDashboard.js'
@@ -18,14 +14,12 @@ import LastUpdatedTag from './LastUpdatedTag.jsx'
 import StarDashboardButton from './StarDashboardButton.jsx'
 import classes from './styles/InformationBlock.module.css'
 
-const InformationBlock = ({
-    id,
-    isEmbeddedDashboard,
-    displayName,
-    starred,
-    setDashboardStarred,
-}) => {
+const InformationBlock = () => {
     const dataEngine = useDataEngine()
+    const dispatch = useDispatch()
+    const { id, displayName, starred, embedded } = useSelector(sGetSelected)
+    const isEmbeddedDashboard = !!embedded
+
     const { show: showAlert } = useAlert(
         ({ msg }) => msg,
         ({ isCritical }) =>
@@ -35,15 +29,18 @@ const InformationBlock = ({
         () =>
             apiStarDashboard(dataEngine, id, !starred)
                 .then(() => {
-                    setDashboardStarred(id, !starred)
+                    dispatch(acSetSelectedStarred(!starred))
+                    dispatch(
+                        acSetOfflineDashboardStarred({ id, starred: !starred })
+                    )
                 })
                 .catch(() => {
                     const msg = starred
                         ? i18n.t('Failed to unstar the dashboard')
                         : i18n.t('Failed to star the dashboard')
                     showAlert({ msg, isCritical: false })
                 }),
-        [dataEngine, id, setDashboardStarred, showAlert, starred]
+        [dataEngine, id, showAlert, starred, dispatch]
     )
 
     const { width } = useWindowDimensions()
@@ -76,27 +73,4 @@ const InformationBlock = ({
     )
 }
 
-InformationBlock.propTypes = {
-    displayName: PropTypes.string,
-    id: PropTypes.string,
-    isEmbeddedDashboard: PropTypes.bool,
-    setDashboardStarred: PropTypes.func,
-    starred: PropTypes.bool,
-}
-
-const mapStateToProps = (state) => {
-    const dashboard = sGetSelected(state)
-
-    return {
-        displayName: dashboard.displayName,
-        id: dashboard.id,
-        starred: dashboard.id
-            ? sGetDashboardStarred(state, dashboard.id)
-            : false,
-        isEmbeddedDashboard: sGetSelectedIsEmbedded(state),
-    }
-}
-
-export default connect(mapStateToProps, {
-    setDashboardStarred: acSetDashboardStarred,
-})(InformationBlock)
+export default InformationBlock

src/components/DashboardsBar/NavigationMenu/EndIntersectionDetector.jsx

@@ -0,0 +1,24 @@
+import { IntersectionDetector } from '@dhis2-ui/intersection-detector'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './styles/EndIntersectionDetector.module.css'
+
+export const EndIntersectionDetector = ({ rootRef, onEndReached }) => {
+    return (
+        <div className={styles.container}>
+            <IntersectionDetector
+                rootRef={rootRef}
+                onChange={({ isIntersecting }) =>
+                    isIntersecting && onEndReached()
+                }
+            />
+        </div>
+    )
+}
+
+EndIntersectionDetector.propTypes = {
+    rootRef: PropTypes.shape({
+        current: PropTypes.instanceOf(HTMLElement),
+    }).isRequired,
+    onEndReached: PropTypes.func.isRequired,
+}