From f88a58819c3b231b69d4360da4c2ee2927f85237 Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Wed, 18 Dec 2024 20:43:51 +0300
Subject: [PATCH] feat: fetch and display selected key's values

---
 src/components/panels/EditorPanel.tsx     | 38 ++++++++++++++---------
 src/components/sections/EditorSection.tsx | 37 ++++++++++++++++++++++
 src/components/table/ItemsTable.tsx       | 10 ++++--
 3 files changed, 69 insertions(+), 16 deletions(-)
 create mode 100644 src/components/sections/EditorSection.tsx

diff --git a/src/components/panels/EditorPanel.tsx b/src/components/panels/EditorPanel.tsx
index bc445b6..c0a55c2 100644
--- a/src/components/panels/EditorPanel.tsx
+++ b/src/components/panels/EditorPanel.tsx
@@ -1,10 +1,26 @@
 import { Button } from '@dhis2/ui'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
 import i18n from '../../locales'
 import PanelHeader from '../header/PanelHeader'
-import Editor from '../sections/Editor'
+import EditorSection from '../sections/EditorSection'
+
+const DataStoreKeyValuesQuery = {
+    results: {
+        resource: 'dataStore',
+        id: ({ key, namespace }: { key: string; namespace: string }) =>
+            `${namespace}/${key}`,
+    },
+}
+
+const UserDataStoreKeyValuesQuery = {
+    results: {
+        resource: 'userDataStore',
+        id: ({ key, namespace }: { key: string; namespace: string }) =>
+            `${namespace}/${key}`,
+    },
+}
 
 const EditorPanel = () => {
     const { key, namespace, store } = useParams()
@@ -17,13 +33,7 @@ const EditorPanel = () => {
             mission_status: 'active',
         },
     }
-    const [value, setValue] = useState(
-        JSON.stringify(data?.results, null, 4) || ''
-    )
 
-    useEffect(() => {
-        setValue(JSON.stringify(data?.results, null, 4))
-    }, [data])
     return (
         <div>
             <PanelHeader>
@@ -53,12 +63,12 @@ const EditorPanel = () => {
                     </Button>
                 </div>
             </PanelHeader>
-            <div>
-                <Editor
-                    value={value}
-                    handleChange={() => console.log('editor changes')}
-                />
-            </div>
+            {store === 'dataStore' && (
+                <EditorSection query={DataStoreKeyValuesQuery} />
+            )}
+            {store === 'userDataStore' && (
+                <EditorSection query={UserDataStoreKeyValuesQuery} />
+            )}
         </div>
     )
 }
diff --git a/src/components/sections/EditorSection.tsx b/src/components/sections/EditorSection.tsx
new file mode 100644
index 0000000..3ad9c42
--- /dev/null
+++ b/src/components/sections/EditorSection.tsx
@@ -0,0 +1,37 @@
+import { useAlert, useDataQuery } from '@dhis2/app-runtime'
+import React, { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import Editor from './Editor'
+
+const EditorSection = ({ query }) => {
+    const { key, namespace } = useParams()
+    const { show: showError } = useAlert('An error fetching this data', {
+        critical: true,
+    })
+    const { data, loading } = useDataQuery(query, {
+        variables: {
+            key,
+            namespace,
+        },
+        onError: () => showError(),
+    })
+
+    const [value, setValue] = useState(
+        JSON.stringify(data?.results, null, 4) || ''
+    )
+
+    useEffect(() => {
+        setValue(JSON.stringify(data?.results, null, 4))
+    }, [data])
+
+    return (
+        <div>
+            <Editor
+                value={loading ? 'Loading...' : value}
+                handleChange={() => console.log('editor changes')}
+            />
+        </div>
+    )
+}
+
+export default EditorSection
diff --git a/src/components/table/ItemsTable.tsx b/src/components/table/ItemsTable.tsx
index d5532a6..7115c2a 100644
--- a/src/components/table/ItemsTable.tsx
+++ b/src/components/table/ItemsTable.tsx
@@ -6,7 +6,7 @@ import {
     TableBody,
     TableHead,
 } from '@dhis2/ui'
-import React from 'react'
+import React, { useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
 import i18n from '../../locales'
@@ -23,6 +23,8 @@ const ItemsTable = ({ data, label }: TableProps) => {
     const navigate = useNavigate()
     const { namespace: currentNamespace } = useParams()
 
+    const [activeCell, setActiveCell] = useState(null)
+
     return (
         <div>
             {data && (
@@ -50,7 +52,10 @@ const ItemsTable = ({ data, label }: TableProps) => {
                             <>
                                 {data.results.map((item, index) => {
                                     return (
-                                        <DataTableRow key={`${item}-${index}`}>
+                                        <DataTableRow
+                                            key={`${item}-${index}`}
+                                            selected={item === activeCell}
+                                        >
                                             <DataTableCell
                                                 bordered
                                                 width={
@@ -64,6 +69,7 @@ const ItemsTable = ({ data, label }: TableProps) => {
                                                     } else {
                                                         navigate(`edit/${item}`)
                                                     }
+                                                    setActiveCell(item)
                                                 }}
                                             >
                                                 {item}