Skip to content

Commit

Permalink
refactor: use DefaultMergeFormContents
Browse files Browse the repository at this point in the history
Birkbjo committed Dec 4, 2024
1 parent b1629dd commit c71fe90
Showing 4 changed files with 39 additions and 49 deletions.
32 changes: 20 additions & 12 deletions src/components/merge/DefaultMergeFormContents.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
33 changes: 5 additions & 28 deletions src/components/merge/MergeFormBase.tsx
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions src/components/merge/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './MergeFieldsBase'
export * from './MergeFormBase'
export * from './mergeSchemaBase'
export * from './DefaultMergeFormContents'
22 changes: 13 additions & 9 deletions src/pages/indicatorTypes/Merge.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
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 {
IndicatorTypeMergeFormValues,
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>
)
}

0 comments on commit c71fe90

Please sign in to comment.