From 4577d52fc550c50fa4e9a543536e6b59cf426d87 Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Thu, 19 Dec 2024 17:24:52 +0300
Subject: [PATCH] feat: create new key functionality

---
 src/components/sections/KeysDataSection.tsx | 36 ++++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/sections/KeysDataSection.tsx b/src/components/sections/KeysDataSection.tsx
index 0de43c6..d61f326 100644
--- a/src/components/sections/KeysDataSection.tsx
+++ b/src/components/sections/KeysDataSection.tsx
@@ -1,12 +1,14 @@
-import { useDataQuery } from '@dhis2/app-runtime'
+import { useDataEngine, useDataQuery } from '@dhis2/app-runtime'
 import { IconAdd16, colors } from '@dhis2/ui'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
 import i18n from '../../locales'
 import ErrorNotice from '../error/ErrorNotice'
 import PanelHeader from '../header/PanelHeader'
 import CenteredLoader from '../loader/Loader'
+import CreateModal from '../modals/CreateModal'
+import { KeysField } from '../modals/Fields'
 import ItemsTable from '../table/ItemsTable'
 import CreateButton from './CreateButton'
 import SearchField from './SearchField'
@@ -16,7 +18,10 @@ interface QueryResults {
 }
 
 const KeysDataSection = ({ query }) => {
-    const { namespace: currentNamespace } = useParams()
+    const engine = useDataEngine()
+    const { store, namespace: currentNamespace } = useParams()
+
+    const [openModal, setOpenModal] = useState(false)
 
     const { error, loading, data, refetch } = useDataQuery<QueryResults>(
         query,
@@ -27,6 +32,20 @@ const KeysDataSection = ({ query }) => {
         }
     )
 
+    const handleCreate = async ({ key }) => {
+        await engine.mutate(
+            {
+                type: 'create',
+                resource: `${store}/${currentNamespace}/${key}`,
+                data: () => ({}),
+            },
+            {
+                onComplete: () => setOpenModal(false),
+            }
+        )
+        refetch({ id: currentNamespace })
+    }
+
     useEffect(() => {
         refetch({ id: currentNamespace })
     }, [currentNamespace])
@@ -47,7 +66,7 @@ const KeysDataSection = ({ query }) => {
                 </span>
                 <CreateButton
                     label={i18n.t('New Key')}
-                    handleClick={() => console.log('create new key')}
+                    handleClick={() => setOpenModal(true)}
                     icon={<IconAdd16 color={colors.grey600} />}
                 />
             </PanelHeader>
@@ -57,6 +76,15 @@ const KeysDataSection = ({ query }) => {
             <div>
                 {data && <ItemsTable data={data} label={i18n.t('Key')} />}
             </div>
+            {openModal && (
+                <CreateModal
+                    title={i18n.t('Add New Key')}
+                    closeModal={() => setOpenModal(false)}
+                    handleCreate={handleCreate}
+                >
+                    <KeysField initialFocus />
+                </CreateModal>
+            )}
         </>
     )
 }