feat: add alerts for error and success during creation process

dhis2 · Dec 19, 2024 · 2b9d8c1 · 2b9d8c1
1 parent 1ae85df
commit 2b9d8c1
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 17 deletions.
diff --git a/src/components/sections/KeysDataSection.tsx b/src/components/sections/KeysDataSection.tsx
@@ -3,6 +3,7 @@ import { IconAdd16, colors } from '@dhis2/ui'
 import React, { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
+import useCustomAlert from '../../hooks/useCustomAlert'
 import i18n from '../../locales'
 import ErrorNotice from '../error/ErrorNotice'
 import PanelHeader from '../header/PanelHeader'
@@ -21,7 +22,9 @@ const KeysDataSection = ({ query }) => {
     const engine = useDataEngine()
     const { store, namespace: currentNamespace } = useParams()
 
-    const [openModal, setOpenModal] = useState(false)
+    const [openCreateModal, setOpenCreateModal] = useState(false)
+
+    const { showError, showSuccess } = useCustomAlert()
 
     const { error, loading, data, refetch } = useDataQuery<QueryResults>(
         query,
@@ -40,10 +43,28 @@ const KeysDataSection = ({ query }) => {
                 data: () => ({}),
             },
             {
-                onComplete: () => setOpenModal(false),
+                onComplete() {
+                    setOpenCreateModal(false)
+                    showSuccess(
+                        i18n.t("Key '{{key}}' added successfully", {
+                            key,
+                        })
+                    )
+                    refetch({ id: currentNamespace })
+                },
+                onError(error) {
+                    showError(
+                        i18n.t(
+                            'There was a problem adding this key - {{error}}',
+                            {
+                                error: error.message,
+                                interpolation: { escapeValue: false },
+                            }
+                        )
+                    )
+                },
             }
         )
-        refetch({ id: currentNamespace })
     }
 
     useEffect(() => {
@@ -66,7 +87,7 @@ const KeysDataSection = ({ query }) => {
                 </span>
                 <CreateButton
                     label={i18n.t('New Key')}
-                    handleClick={() => setOpenModal(true)}
+                    handleClick={() => setOpenCreateModal(true)}
                     icon={<IconAdd16 color={colors.grey600} />}
                 />
             </PanelHeader>
@@ -76,10 +97,10 @@ const KeysDataSection = ({ query }) => {
             <div>
                 {data && <ItemsTable data={data} label={i18n.t('Key')} />}
             </div>
-            {openModal && (
+            {openCreateModal && (
                 <CreateModal
                     title={i18n.t('Add New Key')}
-                    closeModal={() => setOpenModal(false)}
+                    closeModal={() => setOpenCreateModal(false)}
                     handleCreate={handleCreate}
                 >
                     <KeysField initialFocus />

diff --git a/src/components/sections/NamespaceDataSection.tsx b/src/components/sections/NamespaceDataSection.tsx
@@ -3,6 +3,7 @@ import { IconAdd24, colors } from '@dhis2/ui'
 import React, { useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
+import useCustomAlert from '../../hooks/useCustomAlert'
 import i18n from '../../locales'
 import ErrorNotice from '../error/ErrorNotice'
 import CenteredLoader from '../loader/Loader'
@@ -20,18 +21,47 @@ const NamespaceDataSection = ({ query }) => {
     const engine = useDataEngine()
     const navigate = useNavigate()
     const { store } = useParams()
-    const [openModal, setOpenModal] = useState(false)
+    const [openCreateModal, setOpenCreateModal] = useState(false)
+
+    const { showError, showSuccess } = useCustomAlert()
 
     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}`)
+        await engine.mutate(
+            {
+                type: 'create',
+                resource: `${store}/${values?.namespace}/${values?.key}`,
+                data: () => ({}),
+            },
+            {
+                onComplete() {
+                    showSuccess(
+                        i18n.t(
+                            "Namespace '{{namespace}}' and key '{{key}}' added successfully!",
+                            {
+                                namespace: values.namespace,
+                                key: values.key,
+                            }
+                        )
+                    )
+                    refetch()
+                    navigate(`edit/${values?.namespace}`)
+                    setOpenCreateModal(false)
+                },
+                onError(error) {
+                    showError(
+                        i18n.t(
+                            'There was a problem adding this namespace - {{error}}',
+                            {
+                                error: error.message,
+                                interpolation: { escapeValue: false },
+                            }
+                        )
+                    )
+                },
+            }
+        )
     }
 
     if (error) {
@@ -48,17 +78,17 @@ const NamespaceDataSection = ({ query }) => {
                 <SearchField placeholder={i18n.t('Search namespaces')} />
                 <CreateButton
                     label={i18n.t('New Namespace')}
-                    handleClick={() => setOpenModal(true)}
+                    handleClick={() => setOpenCreateModal(true)}
                     icon={<IconAdd24 color={colors.grey600} />}
                 />
             </div>
             <div>
                 {data && <ItemsTable data={data} label={i18n.t('Namespace')} />}
             </div>
-            {openModal && (
+            {openCreateModal && (
                 <CreateModal
                     title={i18n.t('Add New Namespace')}
-                    closeModal={() => setOpenModal(false)}
+                    closeModal={() => setOpenCreateModal(false)}
                     handleCreate={handleCreate}
                 >
                     <NamespaceField initialFocus />

diff --git a/src/hooks/useCustomAlert.tsx b/src/hooks/useCustomAlert.tsx
@@ -0,0 +1,15 @@
+import { useAlert } from '@dhis2/app-runtime'
+
+const useCustomAlert = () => {
+    const { show } = useAlert(
+        ({ message }) => message,
+        ({ isError }) =>
+            isError ? { critical: true } : { success: true, duration: 3000 }
+    )
+    return {
+        showSuccess: (message) => show({ message }),
+        showError: (message) => show({ message, isError: true }),
+    }
+}
+
+export default useCustomAlert