fix: support independent data provider, refactor example (#70)

* fix: support independent data provider, refactor example

* chore: move config parsing outside of App component

Author: amcgee

examples/cra/src/App.js

@@ -1,34 +1,28 @@
 import React from 'react'
 import './App.css'
-import { useConfig, useDataQuery } from '@dhis2/app-runtime'
+import { SwitchableProvider } from './components/SwitchableProvider'
+import { ConfigConsumer } from './components/ConfigConsumer'
+import { IndicatorList } from './components/IndicatorList'
+
+const config = {
+    baseUrl: process.env.REACT_APP_D2_BASE_URL || 'https://play.dhis2.org/dev',
+    apiVersion: process.env.REACT_APP_D2_API_VERSION || 33,
+}
+
+const providerType = (
+    process.env.REACT_APP_D2_PROVIDER_TYPE || 'runtime'
+).toLowerCase()
 
 const App = () => {
-    const config = useConfig()
-    const { loading, error, data } = useDataQuery({
-        indicators: {
-            resource: 'indicators.json',
-            order: 'shortName:desc',
-            pageSize: 10,
-        },
-    })
     return (
-        <div className="App">
-            <header className="App-header">
-                <span>
-                    <strong>Base url:</strong> {config.baseUrl}
-                </span>
-                <h3>Indicators (first 10)</h3>
-                {loading && <span>...</span>}
-                {error && <span>{`ERROR: ${error.message}`}</span>}
-                {data && (
-                    <pre>
-                        {data.indicators.indicators
-                            .map(ind => ind.displayName)
-                            .join('\n')}
-                    </pre>
-                )}
-            </header>
-        </div>
+        <SwitchableProvider type={providerType} config={config}>
+            <div className="App">
+                <header className="App-header">
+                    <ConfigConsumer />
+                    <IndicatorList />
+                </header>
+            </div>
+        </SwitchableProvider>
     )
 }
 

examples/cra/src/components/ConfigConsumer.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { useConfig } from '@dhis2/app-runtime'
+
+export const ConfigConsumer = () => {
+    const config = useConfig()
+    return (
+        <span>
+            <strong>Base url:</strong> {config.baseUrl}
+        </span>
+    )
+}

examples/cra/src/components/IndicatorList.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useDataQuery } from '@dhis2/app-runtime'
+
+export const IndicatorList = () => {
+    const { loading, error, data } = useDataQuery({
+        indicators: {
+            resource: 'indicators.json',
+            order: 'shortName:desc',
+            pageSize: 10,
+        },
+    })
+    return (
+        <div>
+            <h3>Indicators (first 10)</h3>
+            {loading && <span>...</span>}
+            {error && <span>{`ERROR: ${error.message}`}</span>}
+            {data && (
+                <pre>
+                    {data.indicators.indicators
+                        .map(ind => ind.displayName)
+                        .join('\n')}
+                </pre>
+            )}
+        </div>
+    )
+}

examples/cra/src/components/SwitchableProvider.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Provider, DataProvider } from '@dhis2/app-runtime'
+
+export const SwitchableProvider = ({ type, config, children }) => {
+    if (type === 'data') {
+        return (
+            <DataProvider
+                baseUrl={config.baseUrl}
+                apiVersion={config.apiVersion}
+            >
+                {children}
+            </DataProvider>
+        )
+    } else if (type === 'runtime') {
+        return <Provider config={config}>{children}</Provider>
+    }
+    throw new Error(`Invalid provider type ${type}`)
+}

examples/cra/src/index.js

@@ -3,19 +3,8 @@ import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
 import * as serviceWorker from './serviceWorker'
-import { Provider } from '@dhis2/app-runtime'
 
-ReactDOM.render(
-    <Provider
-        config={{
-            baseUrl: 'https://play.dhis2.org/dev',
-            apiVersion: 32,
-        }}
-    >
-        <App />
-    </Provider>,
-    document.getElementById('root')
-)
+ReactDOM.render(<App />, document.getElementById('root'))
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

examples/cra/yarn.lock

@@ -815,7 +815,7 @@
   integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
 
 "@dhis2/app-runtime@file:../../runtime":
-  version "1.4.3"
+  version "1.4.2"
 
 "@hapi/address@2.x.x":
   version "2.0.0"

services/data/src/components/DataProvider.tsx

@@ -11,7 +11,7 @@ export interface ProviderInput {
 export const DataProvider = (props: ProviderInput) => {
     const config = {
         ...useConfig(),
-        props,
+        ...props,
     }
 
     return (