Skip to content

Commit

Permalink
feat: fetch and display selected key's values
Browse files Browse the repository at this point in the history
  • Loading branch information
d-rita committed Dec 18, 2024
1 parent c308e5e commit f88a588
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 16 deletions.
38 changes: 24 additions & 14 deletions src/components/panels/EditorPanel.tsx
Original file line number Diff line number Diff line change
@@ -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()
Expand All @@ -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>
Expand Down Expand Up @@ -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>
)
}
Expand Down
37 changes: 37 additions & 0 deletions src/components/sections/EditorSection.tsx
Original file line number Diff line number Diff line change
@@ -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
10 changes: 8 additions & 2 deletions src/components/table/ItemsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -23,6 +23,8 @@ const ItemsTable = ({ data, label }: TableProps) => {
const navigate = useNavigate()
const { namespace: currentNamespace } = useParams()

const [activeCell, setActiveCell] = useState(null)

return (
<div>
{data && (
Expand Down Expand Up @@ -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={
Expand All @@ -64,6 +69,7 @@ const ItemsTable = ({ data, label }: TableProps) => {
} else {
navigate(`edit/${item}`)
}
setActiveCell(item)
}}
>
{item}
Expand Down

0 comments on commit f88a588

Please sign in to comment.