fix: remove d2

src/AppWrapper.js

@@ -1,21 +1,81 @@
-import { useConfig, useDataEngine } from '@dhis2/app-runtime'
-import { D2Shim } from '@dhis2/app-runtime-adapter-d2'
+import { CachedDataQueryProvider } from '@dhis2/analytics'
+import { useDataEngine } from '@dhis2/app-runtime'
 import { DataStoreProvider } from '@dhis2/app-service-datastore'
 import React from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
 import thunk from 'redux-thunk'
 import { App } from './components/App.js'
-import UserSettingsProvider, {
-    UserSettingsCtx,
-} from './components/UserSettingsProvider.js'
 import configureStore from './configureStore.js'
 import metadataMiddleware from './middleware/metadata.js'
 import { USER_DATASTORE_NAMESPACE } from './modules/currentAnalyticalObject.js'
-import history from './modules/history.js'
+import { systemSettingsKeys } from './modules/systemSettings.js'
+import {
+    USER_SETTINGS_DISPLAY_PROPERTY,
+    DERIVED_USER_SETTINGS_DISPLAY_NAME_PROPERTY,
+} from './modules/userSettings.js'
 import './locales/index.js'
 
+const query = {
+    currentUser: {
+        resource: 'me',
+        params: {
+            fields: 'id,username,displayName~rename(name),settings',
+        },
+    },
+    systemSettings: {
+        resource: 'systemSettings',
+        params: {
+            key: systemSettingsKeys,
+        },
+    },
+    rootOrgUnits: {
+        resource: 'organisationUnits',
+        params: {
+            fields: 'id,displayName,name',
+            userDataViewFallback: true,
+            paging: false,
+        },
+    },
+    orgUnitLevels: {
+        resource: 'organisationUnitLevels',
+        // TODO how to handle passing params like this?
+        params: ({ displayNameProp = 'displayName' } = {}) => ({
+            fields: `id,level,${displayNameProp}~rename(displayName),name`,
+            paging: false,
+        }),
+    },
+}
+
+const providerDataTransformation = ({
+    currentUser,
+    systemSettings,
+    rootOrgUnits,
+    orgUnitLevels,
+}) => {
+    const displayNameProperty =
+        currentUser.settings[USER_SETTINGS_DISPLAY_PROPERTY] === 'name'
+            ? 'displayName'
+            : 'displayShortName'
+
+    return {
+        currentUser: {
+            ...currentUser,
+            settings: {
+                uiLocale: currentUser.settings.keyUiLocale,
+                displayProperty:
+                    currentUser.settings[USER_SETTINGS_DISPLAY_PROPERTY],
+                displayNameProperty,
+                [DERIVED_USER_SETTINGS_DISPLAY_NAME_PROPERTY]:
+                    displayNameProperty,
+            },
+        },
+        systemSettings,
+        rootOrgUnits: rootOrgUnits.organisationUnits,
+        orgUnitLevels: orgUnitLevels.organisationUnitLevels,
+    }
+}
+
 const AppWrapper = () => {
-    const { baseUrl } = useConfig()
     const engine = useDataEngine()
     const store = configureStore([
         thunk.withExtraArgument(engine),
@@ -26,43 +86,15 @@ const AppWrapper = () => {
         window.store = store
     }
 
-    const schemas = ['visualization', 'organisationUnit', 'userGroup']
-    const d2Config = {
-        schemas,
-    }
-
     return (
         <ReduxProvider store={store}>
             <DataStoreProvider namespace={USER_DATASTORE_NAMESPACE}>
-                <UserSettingsProvider>
-                    <UserSettingsCtx.Consumer>
-                        {({ userSettings }) => {
-                            return userSettings?.uiLocale ? (
-                                <D2Shim
-                                    d2Config={d2Config}
-                                    locale={userSettings.uiLocale}
-                                >
-                                    {({ d2 }) => {
-                                        if (!d2) {
-                                            // TODO: Handle errors in d2 initialization
-                                            return null
-                                        } else {
-                                            return (
-                                                <App
-                                                    d2={d2}
-                                                    location={history.location}
-                                                    baseUrl={baseUrl}
-                                                    dataEngine={engine}
-                                                    userSettings={userSettings}
-                                                />
-                                            )
-                                        }
-                                    }}
-                                </D2Shim>
-                            ) : null
-                        }}
-                    </UserSettingsCtx.Consumer>
-                </UserSettingsProvider>
+                <CachedDataQueryProvider
+                    query={query}
+                    dataTransformation={providerDataTransformation}
+                >
+                    <App />
+                </CachedDataQueryProvider>
             </DataStoreProvider>
         </ReduxProvider>
     )

src/actions/current.js

@@ -11,7 +11,7 @@ export const acSetCurrent = (value) => ({
     value,
 })
 
-export const acClear = () => ({
+export const acClearCurrent = () => ({
     type: CLEAR_CURRENT,
 })
 

src/actions/index.js

@@ -130,15 +130,15 @@ export const clearAll =
             dispatch(fromLoader.acClearLoadError())
         }
 
-        dispatch(fromVisualization.acClear())
-        dispatch(fromCurrent.acClear())
+        dispatch(fromVisualization.acClearVisualization())
+        dispatch(fromCurrent.acClearCurrent())
 
         const rootOrganisationUnits = sGetRootOrgUnits(getState())
         const relativePeriod = sGetRelativePeriod(getState())
         const digitGroupSeparator = sGetSettingsDigitGroupSeparator(getState())
 
         dispatch(
-            fromUi.acClear({
+            fromUi.acClearUi({
                 rootOrganisationUnits,
                 relativePeriod,
                 digitGroupSeparator,

src/actions/ui.js

@@ -34,7 +34,7 @@ export const acSetUi = (value) => ({
     value,
 })
 
-export const acClear = (value) => ({
+export const acClearUi = (value) => ({
     type: CLEAR_UI,
     value,
 })

src/actions/visualization.js

@@ -14,6 +14,6 @@ export const acSetVisualization = (visualization) => {
     }
 }
 
-export const acClear = () => ({
+export const acClearVisualization = () => ({
     type: CLEAR_VISUALIZATION,
 })

src/components/App.js

@@ -1,4 +1,4 @@
-import { apiFetchOrganisationUnitLevels, Toolbar } from '@dhis2/analytics'
+import { useCachedDataQuery, Toolbar } from '@dhis2/analytics'
 import { useSetting } from '@dhis2/app-service-datastore'
 import i18n from '@dhis2/d2-i18n'
 import {
@@ -49,16 +49,6 @@ export class UnconnectedApp extends Component {
         previousLocation: null,
         initialLoadIsComplete: false,
         locationToConfirm: false,
-
-        ouLevels: null,
-    }
-
-    fetchOuLevels = async () => {
-        const ouLevels = await apiFetchOrganisationUnitLevels(
-            this.props.dataEngine
-        )
-
-        this.setState({ ouLevels: ouLevels })
     }
 
     /**
@@ -119,7 +109,7 @@ export class UnconnectedApp extends Component {
             if (!urlContainsCurrentAOKey && this.refetch(location)) {
                 await this.props.setVisualization({
                     id,
-                    ouLevels: this.state.ouLevels,
+                    ouLevels: this.props.ouLevels,
                 })
             }
         } else {
@@ -130,15 +120,13 @@ export class UnconnectedApp extends Component {
     }
 
     componentDidMount = async () => {
-        const { d2, userSettings } = this.props
+        const { currentUser, userSettings } = this.props
 
         await this.props.addSettings(userSettings)
-        this.props.setUser(d2.currentUser)
+        this.props.setUser(currentUser)
         this.props.loadUserAuthority(APPROVAL_LEVEL_OPTION_AUTH)
         this.props.setDimensions()
 
-        await this.fetchOuLevels()
-
         const rootOrgUnits = this.props.settings.rootOrganisationUnits
 
         const metaData = { ...defaultMetadata() }
@@ -154,7 +142,7 @@ export class UnconnectedApp extends Component {
 
         this.props.addMetadata(metaData)
 
-        this.loadVisualization(this.props.location)
+        this.loadVisualization(history.location)
 
         this.unlisten = history.listen(({ location }) => {
             const isSaving = location.state?.isSaving
@@ -225,7 +213,6 @@ export class UnconnectedApp extends Component {
         return {
             baseUrl: this.props.baseUrl,
             i18n,
-            d2: this.props.d2,
             dataEngine: this.props.dataEngine,
         }
     }
@@ -344,8 +331,8 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = {
     setCurrentFromUi: fromActions.fromCurrent.tSetCurrentFromUi,
-    clearVisualization: fromActions.fromVisualization.acClear,
-    clearCurrent: fromActions.fromCurrent.acClear,
+    clearVisualization: fromActions.fromVisualization.acClearVisualization,
+    clearCurrent: fromActions.fromCurrent.acClearCurrent,
     setUiFromVisualization: fromActions.fromUi.acSetUiFromVisualization,
     addParentGraphMap: fromActions.fromUi.acAddParentGraphMap,
     clearSnackbar: fromActions.fromSnackbar.acClearSnackbar,
@@ -363,7 +350,6 @@ UnconnectedApp.contextTypes = {
 }
 
 UnconnectedApp.childContextTypes = {
-    d2: PropTypes.object,
     dataEngine: PropTypes.object,
     baseUrl: PropTypes.string,
     i18n: PropTypes.object,
@@ -379,10 +365,10 @@ UnconnectedApp.propTypes = {
     clearVisualization: PropTypes.func,
     current: PropTypes.object,
     currentAO: PropTypes.object,
-    d2: PropTypes.object,
+    currentUser: PropTypes.object,
     dataEngine: PropTypes.object,
     loadUserAuthority: PropTypes.func,
-    location: PropTypes.object,
+    ouLevels: PropTypes.array,
     setCurrentFromUi: PropTypes.func,
     setDimensions: PropTypes.func,
     setUiFromVisualization: PropTypes.func,
@@ -394,15 +380,23 @@ UnconnectedApp.propTypes = {
     visualization: PropTypes.object,
 }
 
-const withCurrentAO = (Component) => {
+const withData = (Component) => {
     return function WrappedComponent(props) {
         const [currentAO] = useSetting(USER_DATASTORE_CURRENT_AO_KEY)
+        const { currentUser, orgUnitLevels } = useCachedDataQuery()
 
-        return <Component {...props} currentAO={currentAO} />
+        return (
+            <Component
+                {...props}
+                currentAO={currentAO}
+                currentUser={currentUser}
+                ouLevels={orgUnitLevels}
+            />
+        )
     }
 }
 
 export const App = connect(
     mapStateToProps,
     mapDispatchToProps
-)(withCurrentAO(UnconnectedApp))
+)(withData(UnconnectedApp))

src/components/DetailsPanel/DetailsPanel.js

@@ -1,4 +1,8 @@
-import { AboutAOUnit, InterpretationsUnit } from '@dhis2/analytics'
+import {
+    AboutAOUnit,
+    InterpretationsUnit,
+    useCachedDataQuery,
+} from '@dhis2/analytics'
 import PropTypes from 'prop-types'
 import { stringify } from 'query-string'
 import React from 'react'
@@ -18,30 +22,27 @@ const navigateToOpenModal = (interpretationId, initialFocus) => {
     )
 }
 
-const DetailsPanel = (
-    { interpretationsUnitRef, visualization, disabled },
-    context
-) => (
-    <div className={classes.panel}>
-        <AboutAOUnit type="visualization" id={visualization.id} />
-        <InterpretationsUnit
-            ref={interpretationsUnitRef}
-            type="visualization"
-            id={visualization.id}
-            currentUser={context.d2.currentUser}
-            onInterpretationClick={(interpretationId) =>
-                navigateToOpenModal(interpretationId)
-            }
-            onReplyIconClick={(interpretationId) =>
-                navigateToOpenModal(interpretationId, true)
-            }
-            disabled={disabled}
-        />
-    </div>
-)
+const DetailsPanel = ({ interpretationsUnitRef, visualization, disabled }) => {
+    const { currentUser } = useCachedDataQuery()
 
-DetailsPanel.contextTypes = {
-    d2: PropTypes.object,
+    return (
+        <div className={classes.panel}>
+            <AboutAOUnit type="visualization" id={visualization.id} />
+            <InterpretationsUnit
+                ref={interpretationsUnitRef}
+                type="visualization"
+                id={visualization.id}
+                currentUser={currentUser}
+                onInterpretationClick={(interpretationId) =>
+                    navigateToOpenModal(interpretationId)
+                }
+                onReplyIconClick={(interpretationId) =>
+                    navigateToOpenModal(interpretationId, true)
+                }
+                disabled={disabled}
+            />
+        </div>
+    )
 }
 
 DetailsPanel.propTypes = {