feat: display namespace keys in table

i18n/en.pot

@@ -5,14 +5,23 @@ 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-28T02:03:19.120Z\n"
-"PO-Revision-Date: 2024-11-28T02:03:19.121Z\n"
-
-msgid "dataStore"
-msgstr "dataStore"
-
-msgid "userDataStore"
-msgstr "userDataStore"
+"POT-Creation-Date: 2024-11-29T23:15:51.985Z\n"
+"PO-Revision-Date: 2024-11-29T23:15:51.986Z\n"
 
 msgid "ERROR"
 msgstr "ERROR"
+
+msgid "Namespaces"
+msgstr "Namespaces"
+
+msgid "Search"
+msgstr "Search"
+
+msgid "Namespace"
+msgstr "Namespace"
+
+msgid "DataStore"
+msgstr "DataStore"
+
+msgid "User DataStore"
+msgstr "User DataStore"

src/App.module.css

@@ -2,8 +2,38 @@
     width: 100%;
     height: 100%;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    flex-direction: row;
+    /* align-items: center;
+    justify-content: center; */
     font-size: 1rem;
 }
+
+.sidebar {
+    width: 20%;
+    /* background-color: aliceblue; */
+    margin: 0.1em;
+}
+
+.sidebarContent {
+    padding: 0.3em;
+    width: 20%;
+}
+
+.sidebarList {
+    margin-top: 1em;
+}
+
+.top {
+    margin-top: 0.5em;
+}
+
+.bottom {
+    margin-bottom: 0.5em;
+}
+
+.main {
+    width: 80%;
+    /* background-color: aqua; */
+    margin: 0.1em;
+    padding: 0.5em;
+}

src/App.tsx

@@ -1,27 +1,7 @@
 import React, { FC } from 'react'
-import { RouterProvider, createHashRouter } from 'react-router-dom'
+import { RouterProvider } 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'
-
-export const router = createHashRouter([
-    {
-        path: '/',
-        errorElement: <ErrorPage />,
-        element: <Layout />,
-        children: [
-            {
-                path: 'dataStore',
-                element: <DataStoreList />,
-            },
-            {
-                path: 'userDataStore',
-                element: <UserDataStoreList />,
-            },
-        ],
-    },
-])
+import { router } from './routes/router'
 
 const App: FC = () => {
     return (

src/components/keys/keysTable.tsx

@@ -0,0 +1,74 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import {
+    DataTable,
+    DataTableCell,
+    DataTableColumnHeader,
+    DataTableRow,
+    TableBody,
+    TableHead,
+} from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+
+interface QueryResults {
+    results: []
+}
+
+const useNameSpaceQuery = ({ store, namespace }) => {
+    return useDataQuery<QueryResults>(
+        {
+            results: {
+                resource: `${store}`,
+                id: ({ id }) => id,
+            },
+        },
+        {
+            variables: {
+                id: namespace,
+            },
+        }
+    )
+}
+
+const Keys = () => {
+    const { store, namespace } = useParams()
+    const { data, refetch } = useNameSpaceQuery({ store, namespace })
+
+    useEffect(() => {
+        refetch({ id: namespace })
+    }, [namespace])
+
+    return <KeysTable data={data} />
+}
+
+export const KeysTable = ({ data }) => {
+    return (
+        <DataTable>
+            <TableHead>
+                <DataTableRow>
+                    <DataTableColumnHeader>Keys</DataTableColumnHeader>
+                    <DataTableColumnHeader>Actions</DataTableColumnHeader>
+                </DataTableRow>
+            </TableHead>
+            <TableBody>
+                {data?.results?.length && (
+                    <>
+                        {data.results.map((key, index) => (
+                            <DataTableRow key={`${key}-${index}`}>
+                                <DataTableCell>{key}</DataTableCell>
+                                <DataTableCell>Edit, Delete</DataTableCell>
+                            </DataTableRow>
+                        ))}
+                    </>
+                )}
+            </TableBody>
+        </DataTable>
+    )
+}
+
+KeysTable.propTypes = {
+    data: PropTypes.object,
+}
+
+export default Keys

src/components/namespaces/list.tsx

@@ -0,0 +1,87 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { CircularLoader } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import classes from '../../App.module.css'
+import i18n from '../../locales'
+import { SidebarNavLink } from '../sidebar/sidebar'
+
+interface QueryResults {
+    results: []
+}
+
+const dataStoreQuery = {
+    results: {
+        resource: 'dataStore',
+    },
+}
+
+const userDataStoreQuery = {
+    results: {
+        resource: 'userDataStore',
+    },
+}
+
+function List({ data, error, loading, store }) {
+    return (
+        <div className={classes.sidebarList}>
+            {error && <span>{i18n.t('ERROR')}</span>}
+            {loading && <CircularLoader />}
+            {data && (
+                <>
+                    <h4 className={classes.bottom}>{i18n.t('Namespaces')}</h4>
+                    {data.results.map((namespace: string, index) => {
+                        return (
+                            <SidebarNavLink
+                                key={`${index}-${namespace}`}
+                                to={`/${store}/${namespace}`}
+                                label={namespace}
+                            />
+                        )
+                    })}
+                </>
+            )}
+        </div>
+    )
+}
+
+List.propTypes = {
+    data: PropTypes.object,
+    error: PropTypes.any,
+    loading: PropTypes.any,
+    store: PropTypes.string,
+}
+
+export function DataStoreList({ store }) {
+    const { error, loading, data } = useDataQuery<QueryResults>(dataStoreQuery)
+
+    return <List store={store} error={error} data={data} loading={loading} />
+}
+
+DataStoreList.propTypes = {
+    store: PropTypes.string,
+}
+
+export function UserDataStoreList({ store }) {
+    const { error, loading, data } =
+        useDataQuery<QueryResults>(userDataStoreQuery)
+
+    return <List store={store} error={error} data={data} loading={loading} />
+}
+
+UserDataStoreList.propTypes = {
+    store: PropTypes.string,
+}
+
+export function NameSpaceLinks() {
+    const { store } = useParams()
+
+    if (store === 'userDataStore') {
+        return <UserDataStoreList store={store} />
+    }
+
+    if (store === 'dataStore') {
+        return <DataStoreList store={store} />
+    }
+}

src/components/sidebar/searchField.tsx

@@ -0,0 +1,18 @@
+import { InputField } from '@dhis2/ui'
+import React from 'react'
+import classes from '../../App.module.css'
+import i18n from '../../locales'
+
+const SearchField = () => {
+    return (
+        <div className={classes.bottom}>
+            <InputField
+                label={i18n.t('Search')}
+                name="search-namespace"
+                placeholder={i18n.t('Namespace')}
+            />
+        </div>
+    )
+}
+
+export default SearchField

src/components/sidebar/select.tsx

@@ -0,0 +1,33 @@
+import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import classes from '../../App.module.css'
+import i18n from '../../locales'
+
+const SelectDataStore = ({ option, handleChange }) => {
+    return (
+        <div className={classes.bottom}>
+            <SingleSelectField
+                label="Select Datastore"
+                selected={option}
+                onChange={handleChange}
+            >
+                <SingleSelectOption
+                    label={i18n.t('DataStore')}
+                    value={'dataStore'}
+                />
+                <SingleSelectOption
+                    label={i18n.t('User DataStore')}
+                    value={'userDataStore'}
+                />
+            </SingleSelectField>
+        </div>
+    )
+}
+
+SelectDataStore.propTypes = {
+    handleChange: PropTypes.func,
+    option: PropTypes.string,
+}
+
+export default SelectDataStore