refactor(shell): make shell a library that exports a react component

dhis2 · Mohammer5 · Mar 29, 2022 · Mar 29, 2022 · Mar 30, 2022 · Mar 30, 2022
commit c0b2b72299867b212ef132435ddef65676ded722
diff --git a/shell/.browserslistrc b/shell/.browserslistrc
diff --git a/shell/.env b/shell/.env
diff --git a/shell/d2.config.js b/shell/d2.config.js
@@ -0,0 +1,12 @@
+const config = {
+ type: 'lib',
+ name: '@dhis2/app-shell',
+ title: 'App Shell',
+ description: 'Provides wrappers and contexts',
+ coreApp: true,
+ entryPoints: {
+ lib: './src/index.js',
+ },
+}
+
+module.exports = config
diff --git a/shell/package.json b/shell/package.json
@@ -29,15 +29,20 @@
  "typescript": "^3.6.3"
  },
  "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "build": "d2-app-scripts build",
  "test": "react-scripts test",
- "eject": "react-scripts eject",
  "analyze": "source-map-explorer 'build/static/js/*.js'"
  },
  "devDependencies": {
+ "@dhis2/cli-app-scripts": "^9.0.0",
  "enzyme": "^3.10.0",
  "enzyme-adapter-react-16": "^1.14.0",
  "react-test-renderer": "^16.8.6"
+ },
+ "main": "./build/cjs/index.js",
+ "module": "./build/es/index.js",
+ "exports": {
+ "import": "./build/es/index.js",
+ "require": "./build/cjs/index.js"
  }
 }
diff --git a/shell/public/android-chrome-192x192.png b/shell/public/android-chrome-192x192.png
diff --git a/shell/public/android-chrome-384x384.png b/shell/public/android-chrome-384x384.png
diff --git a/shell/public/apple-touch-icon.png b/shell/public/apple-touch-icon.png
diff --git a/shell/public/browserconfig.xml b/shell/public/browserconfig.xml
diff --git a/shell/public/dhis2-app-icon.png b/shell/public/dhis2-app-icon.png
diff --git a/shell/public/favicon-16x16.png b/shell/public/favicon-16x16.png
diff --git a/shell/public/favicon-32x32.png b/shell/public/favicon-32x32.png
diff --git a/shell/public/favicon-48x48.png b/shell/public/favicon-48x48.png
diff --git a/shell/public/favicon.ico b/shell/public/favicon.ico
diff --git a/shell/public/index.html b/shell/public/index.html
diff --git a/shell/public/mstile-150x150.png b/shell/public/mstile-150x150.png
diff --git a/shell/public/safari-pinned-tab.svg b/shell/public/safari-pinned-tab.svg
diff --git a/shell/public/service-worker.js b/shell/public/service-worker.js
diff --git a/shell/src/App.js b/shell/src/App.js
diff --git a/shell/src/App.test.js b/shell/src/App.test.js
diff --git a/shell/src/D2App/app.js b/shell/src/D2App/app.js
diff --git a/shell/src/index.css b/shell/src/index.css
diff --git a/shell/src/index.js b/shell/src/index.js
@@ -1,14 +1,2 @@
-import { CssReset } from '@dhis2/ui'
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
-import 'typeface-roboto'
-import './index.css'
-
-ReactDOM.render(
- <>
- <CssReset />
- <App />
- </>,
- document.getElementById('dhis2-app-root')
-)
+import { Shell } from './shell.js'
+export default Shell
diff --git a/shell/src/service-worker.js b/shell/src/service-worker.js
diff --git a/shell/src/setupTests.js b/shell/src/setupTests.js
diff --git a/shell/src/shell.js b/shell/src/shell.js
@@ -0,0 +1,32 @@
+import AppAdapter from '@dhis2/app-adapter'
+import { CssReset } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import createAppConfig from './shell/create-app-config.js'
+import LoadingDisplay from './shell/loading-display.js'
+import verifyChildrenIsTheApp from './shell/verify-children-is-the-app.js'
+
+export function Shell({ children }) {
+ verifyChildrenIsTheApp(children)
+
+ const appConfig = createAppConfig()
+ const appWithConfig = React.Children.map(
+ children,
+ child => React.cloneElement(child, { config: appConfig })
+ )
+
+ return (
+ <>
+ <CssReset />
+ <AppAdapter {...appConfig}>
+ <React.Suspense fallback={<LoadingDisplay />}>
+ {appWithConfig}
+ </React.Suspense>
+ </AppAdapter>
+ </>
+ )
+}
+
+Shell.propTypes = {
+ children: PropTypes.node,
+}
diff --git a/shell/src/shell/create-app-config.js b/shell/src/shell/create-app-config.js
@@ -0,0 +1,10 @@
+export default function createAppConfig() {
+ return {
+ url:
+ process.env.REACT_APP_DHIS2_BASE_URL ||
+ window.localStorage.DHIS2_BASE_URL,
+ appName: process.env.REACT_APP_DHIS2_APP_NAME || '',
+ apiVersion: parseInt(process.env.REACT_APP_DHIS2_API_VERSION),
+ pwaEnabled: process.env.REACT_APP_DHIS2_APP_PWA_ENABLED === 'true',
+ }
+}
diff --git a/shell/src/shell/loading-display.js b/shell/src/shell/loading-display.js
@@ -0,0 +1,21 @@
+import {
+ CenteredContent,
+ CircularLoader,
+ CssReset,
+ Layer,
+ layers
+} from '@dhis2/ui'
+import React from 'react'
+
+export default function LoadingDisplay() {
+ return (
+ <>
+ <CssReset />
+ <Layer translucent level={layers.alert}>
+ <CenteredContent>
+ <CircularLoader />
+ </CenteredContent>
+ </Layer>
+ </>
+ )
+}
diff --git a/shell/src/shell/verify-children-is-the-app.js b/shell/src/shell/verify-children-is-the-app.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function verifyChildrenIsTheApp(children) {
+ const childCount = React.Children.count(children)
+ if (childCount !== 1) {
+ throw new Error(
+ `The app-shell expects exactly 1 child (the app), received ${childCount} children`
+ )
+ }
+}