From c71fe9036d5df1d7e73f45bdb3e0356526373766 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Wed, 4 Dec 2024 18:23:13 +0100
Subject: [PATCH] refactor: use DefaultMergeFormContents

---
 .../merge/DefaultMergeFormContents.tsx        | 32 +++++++++++-------
 src/components/merge/MergeFormBase.tsx        | 33 +++----------------
 src/components/merge/index.ts                 |  1 +
 src/pages/indicatorTypes/Merge.tsx            | 22 ++++++++-----
 4 files changed, 39 insertions(+), 49 deletions(-)

diff --git a/src/components/merge/DefaultMergeFormContents.tsx b/src/components/merge/DefaultMergeFormContents.tsx
index 6192a17a..2309dee7 100644
--- a/src/components/merge/DefaultMergeFormContents.tsx
+++ b/src/components/merge/DefaultMergeFormContents.tsx
@@ -4,10 +4,12 @@ import React from 'react'
 import { useFormState } from 'react-final-form'
 import { DefaultFormErrorNotice } from '../form/DefaultFormErrorNotice'
 import { LinkButton } from '../LinkButton'
+import { StandardFormSectionTitle } from '../standardForm'
 
 export const DefaultMergeFormContents = ({
     children,
-}: React.PropsWithChildren) => {
+    title,
+}: React.PropsWithChildren<{ title?: React.ReactNode }>) => {
     const { submitting, submitSucceeded } = useFormState({
         subscription: { submitting: true, submitSucceeded: true },
     })
@@ -16,17 +18,21 @@ export const DefaultMergeFormContents = ({
         return <MergeComplete />
     }
 
+    if (submitting) {
+        return (
+            <>
+                {title}
+                <MergeInProgress />
+            </>
+        )
+    }
     return (
-        <div>
-            {submitting && <MergeInProgress />}
-            {!submitting && !submitSucceeded && (
-                <>
-                    {children}
-                    <DefaultFormErrorNotice />
-                    <MergeActions />
-                </>
-            )}
-        </div>
+        <>
+            {title}
+            {children}
+            <DefaultFormErrorNotice />
+            <MergeActions />
+        </>
     )
 }
 
@@ -55,7 +61,9 @@ export const MergeInProgress = () => {
 export const MergeComplete = () => {
     return (
         <div>
-            <h2>Merge complete</h2>
+            <StandardFormSectionTitle>
+                {i18n.t('Merge complete')}
+            </StandardFormSectionTitle>
             <LinkButton to="../">{i18n.t('Back to list')}</LinkButton>
         </div>
     )
diff --git a/src/components/merge/MergeFormBase.tsx b/src/components/merge/MergeFormBase.tsx
index dfddf671..3be38a13 100644
--- a/src/components/merge/MergeFormBase.tsx
+++ b/src/components/merge/MergeFormBase.tsx
@@ -9,7 +9,9 @@ import { MergeFormValuesBase } from './mergeSchemaBase'
 
 export type MergeFormBaseProps<TValues> = {
     initialValues: Partial<TValues>
-    onSubmit: (values: TValues) => Promise<Record<string, unknown>>
+    onSubmit: (
+        values: TValues
+    ) => Promise<Record<string, unknown | undefined> | undefined>
     validate: (values: TValues) => Record<string, string> | undefined
     children: React.ReactNode
 }
@@ -30,7 +32,7 @@ export const MergeFormBase = <TValues extends MergeFormValuesBase>({
                 submitSucceeded: true,
             }}
         >
-            {({ handleSubmit, submitSucceeded, submitting }) => (
+            {({ handleSubmit }) => (
                 <form
                     onSubmit={handleSubmit}
                     style={{
@@ -41,32 +43,7 @@ export const MergeFormBase = <TValues extends MergeFormValuesBase>({
                         backgroundColor: 'white',
                     }}
                 >
-                    {submitting && (
-                        <span>
-                            <CircularLoader small />
-                            Merging...
-                        </span>
-                    )}
-                    {!submitting && !submitSucceeded && (
-                        <>
-                            {children}
-                            <DefaultFormErrorNotice />
-                            <ButtonStrip>
-                                <Button primary type="submit">
-                                    {i18n.t('Merge')}
-                                </Button>
-                                <Button secondary>{i18n.t('Cancel')}</Button>
-                            </ButtonStrip>
-                        </>
-                    )}
-                    {submitSucceeded && (
-                        <div>
-                            <h2>Merge complete</h2>
-                            <LinkButton to="../">
-                                {i18n.t('Back to list')}
-                            </LinkButton>
-                        </div>
-                    )}
+                    {children}
                 </form>
             )}
         </Form>
diff --git a/src/components/merge/index.ts b/src/components/merge/index.ts
index 297dcb9c..26ae1685 100644
--- a/src/components/merge/index.ts
+++ b/src/components/merge/index.ts
@@ -1,3 +1,4 @@
 export * from './MergeFieldsBase'
 export * from './MergeFormBase'
 export * from './mergeSchemaBase'
+export * from './DefaultMergeFormContents'
diff --git a/src/pages/indicatorTypes/Merge.tsx b/src/pages/indicatorTypes/Merge.tsx
index 59069ef5..9b01109b 100644
--- a/src/pages/indicatorTypes/Merge.tsx
+++ b/src/pages/indicatorTypes/Merge.tsx
@@ -1,8 +1,8 @@
 import { useDataEngine } from '@dhis2/app-runtime'
-import { Card } from '@dhis2/ui'
+import { FORM_ERROR } from 'final-form'
 import React, { useMemo } from 'react'
 import { StandardFormSectionTitle } from '../../components'
-import { MergeFormBase } from '../../components/merge'
+import { DefaultMergeFormContents, MergeFormBase } from '../../components/merge'
 import { getDefaults, useLocationWithState } from '../../lib'
 import { IndicatorTypeMergeForm } from './merge/IndicatorTypeMerge'
 import {
@@ -10,8 +10,6 @@ import {
     mergeFormSchema,
     validate,
 } from './merge/indicatorTypeMergeSchema'
-import { Form } from 'react-final-form'
-import { FORM_ERROR } from 'final-form'
 
 export const Component = () => {
     const location = useLocationWithState<{ selectedModels: Set<string> }>()
@@ -39,9 +37,10 @@ export const Component = () => {
                 type: 'create',
                 data,
             })
+            return undefined
         } catch (e) {
             console.error(e)
-            return { [FORM_ERROR]: e.toString() }
+            return { [FORM_ERROR]: (e as Error).toString() }
         }
     }
 
@@ -51,10 +50,15 @@ export const Component = () => {
             onSubmit={onSubmit}
             validate={validate}
         >
-            <StandardFormSectionTitle>
-                Configure indicator type merge
-            </StandardFormSectionTitle>
-            <IndicatorTypeMergeForm />
+            <DefaultMergeFormContents
+                title={
+                    <StandardFormSectionTitle>
+                        Configure indicator type merge
+                    </StandardFormSectionTitle>
+                }
+            >
+                <IndicatorTypeMergeForm />
+            </DefaultMergeFormContents>
         </MergeFormBase>
     )
 }