From 7ee779e3192d21b7d65f1bd6a2c168548d58f9ca Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Sat, 30 Nov 2024 07:03:57 +0300
Subject: [PATCH] feat: display namespace keys in table

---
 i18n/en.pot                            | 25 +++++---
 src/App.module.css                     | 36 ++++++++++-
 src/App.tsx                            | 24 +------
 src/components/keys/keysTable.tsx      | 74 ++++++++++++++++++++++
 src/components/list.tsx                | 53 ----------------
 src/components/namespaces/list.tsx     | 87 ++++++++++++++++++++++++++
 src/components/sidebar/searchField.tsx | 18 ++++++
 src/components/sidebar/select.tsx      | 33 ++++++++++
 src/components/sidebar/sidebar.tsx     | 60 ++++++++++++++++++
 src/routes/layout.tsx                  | 40 +++---------
 src/routes/router.tsx                  | 24 +++++++
 11 files changed, 355 insertions(+), 119 deletions(-)
 create mode 100644 src/components/keys/keysTable.tsx
 delete mode 100644 src/components/list.tsx
 create mode 100644 src/components/namespaces/list.tsx
 create mode 100644 src/components/sidebar/searchField.tsx
 create mode 100644 src/components/sidebar/select.tsx
 create mode 100644 src/components/sidebar/sidebar.tsx
 create mode 100644 src/routes/router.tsx

diff --git a/i18n/en.pot b/i18n/en.pot
index 0cca95d..c673c94 100644
--- a/i18n/en.pot
+++ b/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"
diff --git a/src/App.module.css b/src/App.module.css
index a824cff..a8b2006 100644
--- a/src/App.module.css
+++ b/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;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 3149666..aa18058 100644
--- a/src/App.tsx
+++ b/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 (
diff --git a/src/components/keys/keysTable.tsx b/src/components/keys/keysTable.tsx
new file mode 100644
index 0000000..af99ed5
--- /dev/null
+++ b/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
diff --git a/src/components/list.tsx b/src/components/list.tsx
deleted file mode 100644
index 14b488c..0000000
--- a/src/components/list.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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} />
-}
diff --git a/src/components/namespaces/list.tsx b/src/components/namespaces/list.tsx
new file mode 100644
index 0000000..3efa6a1
--- /dev/null
+++ b/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} />
+    }
+}
diff --git a/src/components/sidebar/searchField.tsx b/src/components/sidebar/searchField.tsx
new file mode 100644
index 0000000..c2a0cf4
--- /dev/null
+++ b/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
diff --git a/src/components/sidebar/select.tsx b/src/components/sidebar/select.tsx
new file mode 100644
index 0000000..3453be8
--- /dev/null
+++ b/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
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
new file mode 100644
index 0000000..79f210c
--- /dev/null
+++ b/src/components/sidebar/sidebar.tsx
@@ -0,0 +1,60 @@
+import { Card, Divider } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { NavLink, useNavigate, useParams } from 'react-router-dom'
+import classes from '../../App.module.css'
+import { NameSpaceLinks } from '../namespaces/list'
+import SearchField from './searchField'
+import SelectDataStore from './select'
+
+export const SidebarNavLink = ({ to, label }) => {
+    return (
+        <li>
+            <NavLink
+                to={to}
+                className={({ isActive, isPending }) =>
+                    isActive ? 'active' : isPending ? 'pending' : ''
+                }
+            >
+                {label}
+            </NavLink>
+        </li>
+    )
+}
+
+SidebarNavLink.propTypes = {
+    label: PropTypes.string,
+    to: PropTypes.string,
+}
+
+export const SidebarNavigation = () => {
+    return (
+        <>
+            <SearchField />
+            <NameSpaceLinks />
+        </>
+    )
+}
+
+const Sidebar = () => {
+    const navigate = useNavigate()
+    const { store } = useParams()
+    const [option, setOption] = useState(store)
+
+    const handleDataStoreSelect = ({ selected }) => {
+        setOption(selected)
+        navigate(`/${selected}`)
+    }
+    return (
+        <Card className={classes.sidebarContent}>
+            <SelectDataStore
+                option={option}
+                handleChange={handleDataStoreSelect}
+            />
+            <Divider />
+            {store && <SidebarNavigation />}
+        </Card>
+    )
+}
+
+export default Sidebar
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
index 2e86659..87d0402 100644
--- a/src/routes/layout.tsx
+++ b/src/routes/layout.tsx
@@ -1,41 +1,15 @@
 import React from 'react'
-import { Outlet, Link } from 'react-router-dom'
+import { Outlet } from 'react-router-dom'
+import classes from '../App.module.css'
+import Sidebar from '../components/sidebar/sidebar'
 
 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 className={classes.container}>
+            <div id="sidebar" className={classes.sidebar}>
+                <Sidebar />
             </div>
-            <div
-                id="main"
-                style={{
-                    width: '80%',
-                    paddingLeft: '1em',
-                }}
-            >
+            <div id="main" className={classes.main}>
                 <Outlet />
             </div>
         </div>
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
new file mode 100644
index 0000000..b69493b
--- /dev/null
+++ b/src/routes/router.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { createHashRouter } from 'react-router-dom'
+import Keys from '../components/keys/keysTable'
+import ErrorPage from '../pages/errorPage'
+import Layout from './layout'
+
+export const router = createHashRouter([
+    {
+        path: '/',
+        errorElement: <ErrorPage />,
+        element: <Layout />,
+        children: [
+            {
+                path: ':store',
+                children: [
+                    {
+                        path: ':namespace',
+                        element: <Keys />,
+                    },
+                ],
+            },
+        ],
+    },
+])