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

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

diff --git a/src/components/sections/NamespaceDataSection.tsx b/src/components/sections/NamespaceDataSection.tsx
index 56eed5d..d7ffb41 100644
--- a/src/components/sections/NamespaceDataSection.tsx
+++ b/src/components/sections/NamespaceDataSection.tsx
@@ -1,10 +1,13 @@
-import { useDataQuery } from '@dhis2/app-runtime'
+import { useDataEngine, useDataQuery } from '@dhis2/app-runtime'
 import { IconAdd24, colors } 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'
 import ErrorNotice from '../error/ErrorNotice'
 import CenteredLoader from '../loader/Loader'
+import CreateModal from '../modals/CreateModal'
+import { KeysField, NamespaceField } from '../modals/Fields'
 import ItemsTable from '../table/ItemsTable'
 import CreateButton from './CreateButton'
 import SearchField from './SearchField'
@@ -14,7 +17,22 @@ interface QueryResults {
 }
 
 const NamespaceDataSection = ({ query }) => {
-    const { error, loading, data } = useDataQuery<QueryResults>(query)
+    const engine = useDataEngine()
+    const navigate = useNavigate()
+    const { store } = useParams()
+    const [openModal, setOpenModal] = useState(false)
+
+    const { error, loading, data, refetch } = useDataQuery<QueryResults>(query)
+
+    const handleCreate = async (values) => {
+        await engine.mutate({
+            type: 'create',
+            resource: `${store}/${values?.namespace}/${values?.key}`,
+            data: () => ({}),
+        })
+        refetch()
+        navigate(`edit/${values?.namespace}`)
+    }
 
     if (error) {
         return <ErrorNotice />
@@ -30,13 +48,23 @@ const NamespaceDataSection = ({ query }) => {
                 <SearchField placeholder={i18n.t('Search namespaces')} />
                 <CreateButton
                     label={i18n.t('New Namespace')}
-                    handleClick={() => console.log('create new namespace')}
+                    handleClick={() => setOpenModal(true)}
                     icon={<IconAdd24 color={colors.grey600} />}
                 />
             </div>
             <div>
                 {data && <ItemsTable data={data} label={i18n.t('Namespace')} />}
             </div>
+            {openModal && (
+                <CreateModal
+                    title={i18n.t('Add New Namespace')}
+                    closeModal={() => setOpenModal(false)}
+                    handleCreate={handleCreate}
+                >
+                    <NamespaceField initialFocus />
+                    <KeysField />
+                </CreateModal>
+            )}
         </>
     )
 }