feat: add minimal routing setup

i18n/en.pot

@@ -5,17 +5,14 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-21T12:50:12.197Z\n"
-"PO-Revision-Date: 2024-11-21T12:50:12.198Z\n"
+"POT-Creation-Date: 2024-11-28T02:03:19.120Z\n"
+"PO-Revision-Date: 2024-11-28T02:03:19.121Z\n"
 
-msgid "ERROR"
-msgstr "ERROR"
-
-msgid "Loading..."
-msgstr "Loading..."
+msgid "dataStore"
+msgstr "dataStore"
 
-msgid "Hello {{name}}"
-msgstr "Hello {{name}}"
+msgid "userDataStore"
+msgstr "userDataStore"
 
-msgid "Welcome to DHIS2 with TypeScript!"
-msgstr "Welcome to DHIS2 with TypeScript!"
+msgid "ERROR"
+msgstr "ERROR"

package.json

@@ -20,9 +20,12 @@
         "@types/jest": "^29.5.14",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "react-router-dom": "^7.0.1",
         "typescript": "^5"
     },
     "dependencies": {
-        "@dhis2/app-runtime": "^3.11.3"
+        "@dhis2/app-runtime": "^3.11.3",
+        "@dhis2/ui": "^10.1.0",
+        "prop-types": "^15.8.1"
     }
 }

src/App.tsx

@@ -1,37 +1,34 @@
-import { useDataQuery } from '@dhis2/app-runtime'
-import i18n from '@dhis2/d2-i18n'
 import React, { FC } from 'react'
-import classes from './App.module.css'
+import { RouterProvider, createHashRouter } from 'react-router-dom'
+import AppWrapper from './components/appWrapper'
+import { DataStoreList, UserDataStoreList } from './components/list'
+import ErrorPage from './pages/errorPage'
+import Layout from './routes/layout'
 
-interface QueryResults {
-    me: {
-        name: string
-    }
-}
-
-const query = {
-    me: {
-        resource: 'me',
+export const router = createHashRouter([
+    {
+        path: '/',
+        errorElement: <ErrorPage />,
+        element: <Layout />,
+        children: [
+            {
+                path: 'dataStore',
+                element: <DataStoreList />,
+            },
+            {
+                path: 'userDataStore',
+                element: <UserDataStoreList />,
+            },
+        ],
     },
-}
-
-const MyApp: FC = () => {
-    const { error, loading, data } = useDataQuery<QueryResults>(query)
-
-    if (error) {
-        return <span>{i18n.t('ERROR')}</span>
-    }
-
-    if (loading) {
-        return <span>{i18n.t('Loading...')}</span>
-    }
+])
 
+const App: FC = () => {
     return (
-        <div className={classes.container}>
-            <h1>{i18n.t('Hello {{name}}', { name: data?.me?.name })}</h1>
-            <h3>{i18n.t('Welcome to DHIS2 with TypeScript!')}</h3>
-        </div>
+        <AppWrapper>
+            <RouterProvider router={router} />
+        </AppWrapper>
     )
 }
 
-export default MyApp
+export default App

src/components/appWrapper.tsx

@@ -0,0 +1,19 @@
+import { CssReset, CssVariables } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+function AppWrapper({ children }) {
+    return (
+        <>
+            <CssReset />
+            <CssVariables />
+            {children}
+        </>
+    )
+}
+
+AppWrapper.propTypes = {
+    children: PropTypes.node,
+}
+
+export default AppWrapper

src/components/list.tsx

@@ -0,0 +1,53 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { CircularLoader } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+interface QueryResults {
+    results: []
+}
+
+const dataStoreQuery = {
+    results: {
+        resource: 'dataStore',
+    },
+}
+
+const userDataStoreQuery = {
+    results: {
+        resource: 'userDataStore',
+    },
+}
+
+function List({ data, error, loading }) {
+    return (
+        <div>
+            {error && <div>Error fetching this data...</div>}
+            {loading && <CircularLoader />}
+            {data && (
+                <pre>
+                    {data.results.map((namespace) => namespace).join('\n')}
+                </pre>
+            )}
+        </div>
+    )
+}
+
+List.propTypes = {
+    data: PropTypes.object,
+    error: PropTypes.any,
+    loading: PropTypes.any,
+}
+
+export function DataStoreList() {
+    const { error, loading, data } = useDataQuery<QueryResults>(dataStoreQuery)
+
+    return <List error={error} data={data} loading={loading} />
+}
+
+export function UserDataStoreList() {
+    const { error, loading, data } =
+        useDataQuery<QueryResults>(userDataStoreQuery)
+
+    return <List error={error} data={data} loading={loading} />
+}

src/pages/errorPage.tsx

@@ -0,0 +1,27 @@
+import { Center } from '@dhis2/ui'
+import React from 'react'
+import { useRouteError } from 'react-router-dom'
+
+interface Error {
+    status?: number
+    statusText?: string
+    internal?: boolean
+    data?: string
+    message?: string
+}
+
+export default function ErrorPage() {
+    const error: Error = useRouteError()
+
+    return (
+        <div id="error-page">
+            <Center>
+                <h1>Oops!</h1>
+                <p>Sorry, an unexpected error has occurred</p>
+                <p>
+                    <i>{error.statusText || error.message}</i>
+                </p>
+            </Center>
+        </div>
+    )
+}

src/routes/layout.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Outlet, Link } from 'react-router-dom'
+
+export default function Layout() {
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'row',
+                height: '100%',
+                width: '100%',
+            }}
+        >
+            <div
+                id="sidebar"
+                style={{
+                    width: '20%',
+                    border: '1px groove white',
+                }}
+            >
+                <nav>
+                    <ul>
+                        <li>
+                            <Link to={`/dataStore`}>DataStore</Link>
+                        </li>
+                        <li>
+                            <Link to={`/userDataStore`}>User DataStore</Link>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+            <div
+                id="main"
+                style={{
+                    width: '80%',
+                    paddingLeft: '1em',
+                }}
+            >
+                <Outlet />
+            </div>
+        </div>
+    )
+}