feat: handle JSON parsing errors

dhis2 · Dec 13, 2024 · 09aa5fa · 09aa5fa
1 parent d72fc48
commit 09aa5fa
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 27 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-12-11T06:17:01.578Z\n"
-"PO-Revision-Date: 2024-12-11T06:17:01.580Z\n"
+"POT-Creation-Date: 2024-12-13T09:39:44.127Z\n"
+"PO-Revision-Date: 2024-12-13T09:39:44.128Z\n"
 
 msgid "DataStore"
 msgstr "DataStore"
@@ -56,23 +56,38 @@ msgstr "Add Key"
 msgid "Add Namespace"
 msgstr "Add Namespace"
 
+msgid "Invalid JSON value"
+msgstr "Invalid JSON value"
+
 msgid "Save"
 msgstr "Save"
 
 msgid "Save changes"
 msgstr "Save changes"
 
+msgid "Loading"
+msgstr "Loading"
+
+msgid "Error getting this information"
+msgstr "Error getting this information"
+
+msgid "Search namespaces"
+msgstr "Search namespaces"
+
+msgid "Search keys in this namespace"
+msgstr "Search keys in this namespace"
+
+msgid "Key Name"
+msgstr "Key Name"
+
 msgid "An error has occurred"
 msgstr "An error has occurred"
 
 msgid "Back to datastore"
 msgstr "Back to datastore"
 
-msgid "Search keys in this namespace"
-msgstr "Search keys in this namespace"
+msgid "Key updated successfully"
+msgstr "Key updated successfully"
 
-msgid "Key name"
-msgstr "Key name"
-
-msgid "Search namespaces"
-msgstr "Search namespaces"
+msgid "There was an error updating the key"
+msgstr "There was an error updating the key"
diff --git a/src/components/sections/EditSection.tsx b/src/components/sections/EditSection.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@dhis2-ui/button'
 import React, { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
+import useCustomAlert from '../../hooks/useCustomAlert'
 import i18n from '../../locales'
 import classes from '../../Page.module.css'
 import Editor from '../Editor'
@@ -24,6 +25,8 @@ const EditSection = ({
     mutationLoading,
 }: EditSectionProps) => {
     const { key, namespace } = useParams()
+    const [editError, setEditError] = useState(null)
+    const { showError } = useCustomAlert()
     const [value, setValue] = useState(
         JSON.stringify(data?.results, null, 4) || ''
     )
@@ -33,15 +36,24 @@ const EditSection = ({
     }
 
     const handleUpdate = async () => {
-        await updateKey({
-            key,
-            namespace,
-            value,
-        })
-        refetch({
-            key,
-            namespace,
-        })
+        let body
+        setEditError(null)
+
+        try {
+            body = JSON.parse(value)
+            await updateKey({
+                key,
+                namespace,
+                body,
+            })
+            refetch({
+                key,
+                namespace,
+            })
+        } catch (error) {
+            setEditError(error.message)
+            showError(i18n.t('Invalid JSON value'))
+        }
     }
 
     useEffect(() => {
@@ -55,7 +67,9 @@ const EditSection = ({
                     <Button
                         aria-label={i18n.t('Cancel')}
                         name="cancel"
-                        onClick={() => console.log('')}
+                        onClick={() =>
+                            console.log('what exactly does this cancel do?')
+                        }
                         title={i18n.t('Cancel')}
                     >
                         {i18n.t('Cancel')}
@@ -64,12 +78,11 @@ const EditSection = ({
                         aria-label={i18n.t('Save')}
                         name="create"
                         onClick={() => {
-                            console.log('Save changes')
                             handleUpdate()
                         }}
                         title={i18n.t('Save')}
                         primary
-                        loading={mutationLoading}
+                        loading={!editError && mutationLoading}
                     >
                         {i18n.t('Save changes')}
                     </Button>

diff --git a/src/hooks/useCustomAlert.js → src/hooks/useCustomAlert.tsx b/src/hooks/useCustomAlert.js → src/hooks/useCustomAlert.tsx
@@ -1,9 +1,10 @@
-import { useAlert } from '@dhis2/app-service-alerts'
+import { useAlert } from '@dhis2/app-runtime'
 
 const useCustomAlert = () => {
     const { show } = useAlert(
         ({ message }) => message,
-        ({ isError }) => (isError ? { critical: true } : { success: true })
+        ({ isError }) =>
+            isError ? { critical: true } : { success: true, duration: 3000 }
     )
     return {
         showSuccess: (message) => show({ message }),

diff --git a/src/pages/Edit.tsx b/src/pages/Edit.tsx
@@ -26,15 +26,15 @@ const modifyDSKeyMutation = {
     resource: 'dataStore',
     id: ({ key, namespace }: { key: string; namespace: string }) =>
         `${namespace}/${key}`,
-    data: ({ value }) => JSON.parse(value),
+    data: ({ body }) => body,
 }
 
 const modifyUserDSKeyMutation = {
     type: 'update' as const,
     resource: 'userDataStore',
     id: ({ key, namespace }: { key: string; namespace: string }) =>
         `${namespace}/${key}`,
-    data: ({ value }) => JSON.parse(value),
+    data: ({ body }) => body,
 }
 
 const DataStoreEditSection = () => {
@@ -51,8 +51,6 @@ const DataStoreEditSection = () => {
         },
     })
 
-    console.log(data, 'data')
-
     const { showError, showSuccess } = useCustomAlert()
 
     const [updateKey, { loading: mutationLoading }] = useDataMutation(