chore: restructure directory

archive/04-app-runtime/advanced-runtime-demo/.eslintrc.js

@@ -0,0 +1,5 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.eslintReact],
+}

solutions/.eslintrc.js

@@ -0,0 +1,5 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.eslintReact],
+}

solutions/.eslintrc.js.new

@@ -0,0 +1,5 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.eslintReact],
+}

solutions/.gitignore

@@ -0,0 +1,5 @@
+# DHIS2 Platform
+node_modules
+.d2
+src/locales
+build

solutions/.hooks/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn d2-style check --staged

solutions/.prettierrc.js

@@ -0,0 +1,5 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    ...require(config.prettier),
+}

solutions/README.md

@@ -0,0 +1,45 @@
+This project was bootstrapped with [DHIS2 Application Platform](https://github.com/dhis2/app-platform).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner and runs all available tests found in `/src`.<br />
+
+See the section about [running tests](https://platform.dhis2.nu/#/scripts/test) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+A deployable `.zip` file can be found in `build/bundle`!
+
+See the section about [building](https://platform.dhis2.nu/#/scripts/build) for more information.
+
+### `yarn deploy`
+
+Deploys the built app in the `build` folder to a running DHIS2 instance.<br />
+This command will prompt you to enter a server URL as well as the username and password of a DHIS2 user with the App Management authority.<br/>
+You must run `yarn build` before running `yarn deploy`.<br />
+
+See the section about [deploying](https://platform.dhis2.nu/#/scripts/deploy) for more information.
+
+## Learn More
+
+You can learn more about the platform in the [DHIS2 Application Platform Documentation](https://platform.dhis2.nu/).
+
+You can learn more about the runtime in the [DHIS2 Application Runtime Documentation](https://runtime.dhis2.nu/).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

solutions/d2.config.js

@@ -0,0 +1,9 @@
+const config = {
+    type: 'app',
+
+    entryPoints: {
+        app: './src/App.js',
+    },
+}
+
+module.exports = config

solutions/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "solutions",
+    "version": "1.0.0",
+    "description": "",
+    "license": "BSD-3-Clause",
+    "private": true,
+    "scripts": {
+        "build": "d2-app-scripts build",
+        "start": "d2-app-scripts start",
+        "test": "d2-app-scripts test",
+        "deploy": "d2-app-scripts deploy",
+        "lint": "d2-style check",
+        "format": "d2-style apply"
+    },
+    "devDependencies": {
+        "@dhis2/cli-app-scripts": "^11.1.0",
+        "@dhis2/cli-style": "^10.5.1"
+    },
+    "dependencies": {
+        "@dhis2/app-runtime": "^3.10.3",
+        "react-router-dom": "^6.22.3"
+    }
+}

solutions/src/App.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom'
+import styles from './App.module.css'
+import { Navigation } from './navigation/index.js'
+import { Form, Home, Attributes } from './views/index.js'
+
+const MyApp = () => (
+    <HashRouter
+    // HashRouter is used as there is not integration with DHIS2 server
+    >
+        <div className={styles.container}>
+            <div className={styles.left}>
+                <Navigation
+                // This component has to be inside the `BrowserRouter`
+                // because it will use the router's information
+                // (It will access the react context through hooks)
+                />
+            </div>
+
+            <div className={styles.right}>
+                <Routes>
+                    <Route
+                        // Home route, will render "Home" component
+                        // when "/" is the current url
+                        exact
+                        path="/"
+                        element={<Home />}
+                    />
+
+                    <Route
+                        // Form route, will render "Form" component
+                        // when "/form" is the current url
+                        exact
+                        path="/form"
+                        element={<Form />}
+                    />
+
+                    <Route
+                        // Attributes route, will render "Attributes" component
+                        // when "/attributes" is the current url
+                        exact
+                        path="/attributes"
+                        element={<Attributes />}
+                    />
+                    <Route
+                        // functions as default route, redirects to home
+                        // when invalid path is provided
+                        path="*"
+                        element={<Navigate to="/" />}
+                    />
+                </Routes>
+            </div>
+        </div>
+    </HashRouter>
+)
+
+export default MyApp

solutions/src/App.module.css

@@ -0,0 +1,18 @@
+.container {
+    display: flex;
+    min-height: 100vh;
+}
+
+.left {
+    min-width: 200px;
+    max-width: 200px;
+    min-height: 100vh;
+    padding-top: 20px;
+}
+
+.right {
+    flex-grow: 1;
+    min-height: 100vh;
+    padding: 26px 16px 0;
+    background: #f0f0f0;
+}

solutions/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App.js'
+
+it('renders without crashing', () => {
+    const div = document.createElement('div')
+    ReactDOM.render(<App />, div)
+    ReactDOM.unmountComponentAtNode(div)
+})

solutions/src/hooks/index.js

@@ -0,0 +1 @@
+export { useGetAttributes } from './useGetAttributes.js'

solutions/src/hooks/useGetAttributes.js

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react'
+
+const ATTRIBUTES = {
+    attributes: {
+        attributes: [
+            {
+                unique: false,
+                displayName: 'Alternative name',
+                id: 'DnrLSdo4hMl',
+            },
+            {
+                unique: false,
+                displayName: 'Catchment area',
+                id: 'ihn1wb9eho8',
+            },
+            {
+                unique: false,
+                displayName: 'Classification',
+                id: 'Z4X3J7jMLYV',
+            },
+            {
+                unique: false,
+                displayName: 'Collection method',
+                id: 'qXS2NDUEAOS',
+            },
+            {
+                unique: true,
+                displayName: 'HR identifier',
+                id: 'UKNKz1H10EE',
+            },
+            {
+                unique: true,
+                displayName: 'KE code',
+                id: 'l1VmqIHKk6t',
+            },
+            {
+                unique: false,
+                displayName: 'NGO ID',
+                id: 'n2xYlNbsfko',
+            },
+            {
+                unique: false,
+                displayName: 'PEPFAR ID',
+                id: 'dLHLR5O4YFI',
+            },
+            {
+                unique: false,
+                displayName: 'Rationale',
+                id: 'AhsCAtM3L0g',
+            },
+            {
+                unique: true,
+                displayName: 'TZ code',
+                id: 'xqWyz9jNCA5',
+            },
+            {
+                unique: false,
+                displayName: 'Unit of measure',
+                id: 'Y1LUDU8sWBR',
+            },
+        ],
+    },
+}
+
+const sleep = (ms) => {
+    return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export const useGetAttributes = () => {
+    const [loading, setLoading] = useState(true)
+    const error = null
+    const data = ATTRIBUTES
+
+    useEffect(() => {
+        const delayLoading = async () => {
+            await sleep(1000)
+            setLoading(false)
+        }
+        delayLoading()
+    }, [])
+
+    return { loading, error, data }
+}

solutions/src/navigation/Navigation.js

@@ -0,0 +1,46 @@
+import { Menu, MenuItem } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useNavigate, useMatch } from 'react-router-dom'
+
+const NavigationItem = ({ path, label }) => {
+    // function to navigate to different route
+    const navigate = useNavigate()
+
+    // "null" when not active, "object" when active
+    const routeMatch = useMatch(path)
+
+    // path is matched if routeMatch is not null
+    const isActive = Boolean(routeMatch)
+
+    const onClick = () => navigate(path)
+
+    return <MenuItem label={label} active={isActive} onClick={onClick} />
+}
+
+NavigationItem.propTypes = {
+    label: PropTypes.string.isRequired,
+    path: PropTypes.string.isRequired,
+}
+
+export const Navigation = () => (
+    <Menu>
+        <NavigationItem
+            // Menu item for the home page
+            label="Home"
+            path="/"
+        />
+
+        <NavigationItem
+            // Menu item for the meta data page
+            label="Attributes"
+            path="/attributes"
+        />
+
+        <NavigationItem
+            // Menu item for the Form page
+            label="Form"
+            path="/form"
+        />
+    </Menu>
+)

solutions/src/navigation/index.js

@@ -0,0 +1 @@
+export * from './Navigation.js'