Skip to content
This repository was archived by the owner on Dec 27, 2022. It is now read-only.

Commit 5049d4b

Browse files
chambo-echambo-e
authored
feat: remove old onSubmit way of handling submit (#574)
* feat: remove old onSubmit way of handling submit * fix: correct storybook types
1 parent 42f8f8a commit 5049d4b

File tree

30 files changed

+118
-277
lines changed

30 files changed

+118
-277
lines changed

‎src/components/CheckboxField/__stories__/BooleanChecked.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { CheckboxField } from '..'
33
import { Form, FormProps } from '../../Form'
44

55
export const BooleanChecked: Story<FormProps> = ({ errors }) => (
6-
<Form errors={errors} initialValues={{ foo: true }}>
6+
<Form onRawSubmit={() => {}} errors={errors} initialValues={{ foo: true }}>
77
<CheckboxField name="foo">Default Checked Boolean Item</CheckboxField>
88
</Form>
99
)

‎src/components/CheckboxField/__stories__/Checked.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FormProps } from '../..'
44
import { Form } from '../../Form'
55

66
export const Checked: Story<FormProps> = ({ errors }) => (
7-
<Form errors={errors} initialValues={{ foo: ['bar'] }}>
7+
<Form onRawSubmit={() => {}} errors={errors} initialValues={{ foo: ['bar'] }}>
88
<CheckboxField name="foo" value="bar">
99
Checked Item
1010
</CheckboxField>

‎src/components/CheckboxField/__stories__/index.stories.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@ import { mockErrors } from '../../../mocks'
44

55
export default {
66
component: CheckboxField,
7-
decorators: [ChildStory => <Form errors={mockErrors}>{ChildStory()}</Form>],
7+
decorators: [
8+
ChildStory => (
9+
<Form onRawSubmit={() => {}} errors={mockErrors}>
10+
{ChildStory()}
11+
</Form>
12+
),
13+
],
814
parameters: {
915
docs: {
1016
description: {

‎src/components/CheckboxField/__tests__/index.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ describe('CheckboxField', () => {
102102

103103
test('should render correctly with errors', () =>
104104
shouldMatchEmotionSnapshot(
105-
<Form errors={mockErrors}>
105+
<Form onRawSubmit={() => {}} errors={mockErrors}>
106106
<CheckboxField name="test" required>
107107
Checkbox field error
108108
</CheckboxField>

‎src/components/DateField/__stories__/index.stories.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ export default {
1111
decorators: [
1212
ChildStory => (
1313
<Container>
14-
<Form errors={mockErrors}>{ChildStory()}</Form>
14+
<Form onRawSubmit={() => {}} errors={mockErrors}>
15+
{ChildStory()}
16+
</Form>
1517
</Container>
1618
),
1719
],

‎src/components/Form/__tests__/__snapshots__/index.spec.tsx.snap‎

Lines changed: 1 addition & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -20,63 +20,7 @@ exports[`Form renders correctly with node children 1`] = `
2020
</DocumentFragment>
2121
`;
2222

23-
exports[`Form renders correctly with onRawSubmit which should take precedence 1`] = `
24-
<DocumentFragment>
25-
<form
26-
novalidate=""
27-
>
28-
<button
29-
type="submit"
30-
>
31-
Submit
32-
</button>
33-
</form>
34-
</DocumentFragment>
35-
`;
36-
37-
exports[`Form renders correctly with onSubmit that return {} 1`] = `
38-
<DocumentFragment>
39-
<form
40-
novalidate=""
41-
>
42-
<button
43-
type="submit"
44-
>
45-
Submit
46-
</button>
47-
</form>
48-
</DocumentFragment>
49-
`;
50-
51-
exports[`Form renders correctly with onSubmit that return undefined 1`] = `
52-
<DocumentFragment>
53-
<form
54-
novalidate=""
55-
>
56-
<button
57-
type="submit"
58-
>
59-
Submit
60-
</button>
61-
</form>
62-
</DocumentFragment>
63-
`;
64-
65-
exports[`Form renders correctly with onSubmit that throw 1`] = `
66-
<DocumentFragment>
67-
<form
68-
novalidate=""
69-
>
70-
<button
71-
type="submit"
72-
>
73-
Submit
74-
</button>
75-
</form>
76-
</DocumentFragment>
77-
`;
78-
79-
exports[`Form renders correctly with parseSubmitException 1`] = `
23+
exports[`Form renders correctly with onRawSubmit 1`] = `
8024
<DocumentFragment>
8125
<form
8226
novalidate=""

‎src/components/Form/__tests__/index.spec.tsx‎

Lines changed: 14 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -6,146 +6,40 @@ import { mockErrors } from '../../../mocks'
66

77
describe('Form', () => {
88
test('renders correctly ', () =>
9-
shouldMatchEmotionSnapshot(<Form errors={mockErrors}>{() => 'Test'}</Form>))
9+
shouldMatchEmotionSnapshot(
10+
<Form onRawSubmit={() => {}} errors={mockErrors}>
11+
{() => 'Test'}
12+
</Form>,
13+
))
1014
test('renders correctly with node children', () =>
11-
shouldMatchEmotionSnapshot(<Form errors={mockErrors}>Test</Form>))
12-
13-
test('renders correctly with validate', () =>
1415
shouldMatchEmotionSnapshot(
15-
<Form errors={mockErrors} validate={() => ({ test: 'test' })}>
16+
<Form onRawSubmit={() => {}} errors={mockErrors}>
1617
Test
1718
</Form>,
1819
))
1920

20-
test('renders correctly with onSubmit that return undefined', () => {
21-
const onSubmit = jest.fn(() => undefined)
22-
const onSubmitSuccess = jest.fn(() => {})
23-
const onSubmitError = jest.fn(() => {})
24-
25-
return shouldMatchEmotionSnapshot(
26-
<Form
27-
errors={mockErrors}
28-
onSubmitSuccess={onSubmitSuccess}
29-
onSubmit={onSubmit}
30-
onSubmitError={onSubmitError}
31-
>
32-
<button type="submit">Submit</button>
33-
</Form>,
34-
{
35-
transform: async ({ getByText }) => {
36-
await userEvent.click(getByText('Submit'))
37-
expect(onSubmit).toBeCalledTimes(1)
38-
await waitFor(() => expect(onSubmitSuccess).toBeCalledTimes(1))
39-
expect(onSubmitError).toBeCalledTimes(0)
40-
},
41-
},
42-
)
43-
})
44-
45-
test('renders correctly with onSubmit that return {}', () => {
46-
const onSubmit = jest.fn(() => Promise.resolve({}))
47-
const onSubmitSuccess = jest.fn(() => {})
48-
const onSubmitError = jest.fn(() => {})
49-
50-
return shouldMatchEmotionSnapshot(
51-
<Form
52-
errors={mockErrors}
53-
onSubmitSuccess={onSubmitSuccess}
54-
onSubmit={onSubmit}
55-
onSubmitError={onSubmitError}
56-
>
57-
<button type="submit">Submit</button>
58-
</Form>,
59-
{
60-
transform: async ({ getByText }) => {
61-
await userEvent.click(getByText('Submit'))
62-
expect(onSubmit).toBeCalledTimes(1)
63-
await waitFor(() => expect(onSubmitError).toBeCalledTimes(1))
64-
expect(onSubmitSuccess).toBeCalledTimes(0)
65-
},
66-
},
67-
)
68-
})
69-
70-
test('renders correctly with onSubmit that throw', () => {
71-
const onSubmit = jest.fn(() => Promise.reject())
72-
const onSubmitSuccess = jest.fn(() => {})
73-
const onSubmitError = jest.fn(() => {})
74-
75-
return shouldMatchEmotionSnapshot(
76-
<Form
77-
errors={mockErrors}
78-
onSubmitSuccess={onSubmitSuccess}
79-
onSubmit={onSubmit}
80-
onSubmitError={onSubmitError}
81-
>
82-
<button type="submit">Submit</button>
83-
</Form>,
84-
{
85-
transform: async ({ getByText }) => {
86-
await userEvent.click(getByText('Submit'))
87-
expect(onSubmit).toBeCalledTimes(1)
88-
await waitFor(() => expect(onSubmitError).toBeCalledTimes(1))
89-
expect(onSubmitSuccess).toBeCalledTimes(0)
90-
},
91-
},
92-
)
93-
})
94-
95-
test('renders correctly with parseSubmitException', () => {
96-
const onSubmit = jest.fn(() => Promise.reject(new Error('error')))
97-
const onSubmitSuccess = jest.fn(() => {})
98-
const onSubmitError = jest.fn(() => {})
99-
const parseSubmitException = jest.fn(() => 'parsed error')
100-
101-
return shouldMatchEmotionSnapshot(
21+
test('renders correctly with validate', () =>
22+
shouldMatchEmotionSnapshot(
10223
<Form
24+
onRawSubmit={() => {}}
10325
errors={mockErrors}
104-
onSubmitSuccess={onSubmitSuccess}
105-
onSubmit={onSubmit}
106-
onSubmitError={onSubmitError}
107-
parseSubmitException={parseSubmitException}
26+
validate={() => ({ test: 'test' })}
10827
>
109-
<button type="submit">Submit</button>
28+
Test
11029
</Form>,
111-
{
112-
transform: async ({ getByText }) => {
113-
await userEvent.click(getByText('Submit'))
114-
expect(onSubmit).toBeCalledTimes(1)
115-
await waitFor(() => expect(onSubmitError).toBeCalledTimes(1))
116-
await waitFor(() => expect(parseSubmitException).toBeCalledTimes(1))
117-
expect(parseSubmitException).toBeCalledWith(new Error('error'))
118-
expect(onSubmitSuccess).toBeCalledTimes(0)
119-
},
120-
},
121-
)
122-
})
30+
))
12331

124-
test('renders correctly with onRawSubmit which should take precedence', () => {
125-
const onSubmit = jest.fn(() => Promise.reject(new Error('error')))
126-
const onSubmitSuccess = jest.fn(() => {})
32+
test('renders correctly with onRawSubmit', () => {
12733
const onRawSubmit = jest.fn(() => {})
128-
const onSubmitError = jest.fn(() => {})
129-
const parseSubmitException = jest.fn(() => 'parsed error')
13034

13135
return shouldMatchEmotionSnapshot(
132-
<Form
133-
errors={mockErrors}
134-
onSubmitSuccess={onSubmitSuccess}
135-
onSubmit={onSubmit}
136-
onSubmitError={onSubmitError}
137-
parseSubmitException={parseSubmitException}
138-
onRawSubmit={onRawSubmit}
139-
>
36+
<Form errors={mockErrors} onRawSubmit={onRawSubmit}>
14037
<button type="submit">Submit</button>
14138
</Form>,
14239
{
14340
transform: async ({ getByText }) => {
14441
await userEvent.click(getByText('Submit'))
14542
await waitFor(() => expect(onRawSubmit).toBeCalledTimes(1))
146-
expect(onSubmit).toBeCalledTimes(0)
147-
expect(onSubmitError).toBeCalledTimes(0)
148-
expect(parseSubmitException).toBeCalledTimes(0)
14943
},
15044
},
15145
)

‎src/components/Form/index.tsx‎

Lines changed: 4 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Decorator, FORM_ERROR } from 'final-form'
1+
import { Decorator } from 'final-form'
22
import arrayMutators from 'final-form-arrays'
33
import createDecorator from 'final-form-focus'
44
import { ReactNode } from 'react'
@@ -8,7 +8,7 @@ import {
88
FormProps as ReactFinalFormProps,
99
} from 'react-final-form'
1010
import { ErrorProvider } from '../../providers'
11-
import { FormErrors, OnSubmitErrorFn, OnSubmitSucccessFn } from '../../types'
11+
import { FormErrors } from '../../types'
1212

1313
const focusOnErrors = createDecorator()
1414

@@ -20,21 +20,7 @@ export type FormProps<FormValues = unknown> = {
2020
/**
2121
* onRawSubmit is the base onSubmit from final-form
2222
*/
23-
onRawSubmit?: ReactFinalFormProps<FormValues, Partial<FormValues>>['onSubmit']
24-
/**
25-
* onSubmit acts as onRawSubmit but will call onSubmitSuccess/Error lifecycles
26-
* and will parse eexception with parseSubmitException if provided
27-
* @deprecated its behavior is inconsistent, favor onRawSubmit
28-
*/
29-
onSubmit?: ReactFinalFormProps<FormValues, Partial<FormValues>>['onSubmit']
30-
onSubmitSuccess?: OnSubmitSucccessFn<FormValues>
31-
onSubmitError?: OnSubmitErrorFn
32-
/**
33-
* parseSubmitException will be invoked on onSubmit throw
34-
* It will take the error and must return a readable string or undefined
35-
* @deprecated its behavior is inconsistent, favor onRawSubmit
36-
*/
37-
parseSubmitException?: (error: unknown) => string | undefined
23+
onRawSubmit: ReactFinalFormProps<FormValues, Partial<FormValues>>['onSubmit']
3824
initialValues?: Partial<FormValues>
3925
validateOnBlur?: ReactFinalFormProps<
4026
FormValues,
@@ -53,9 +39,6 @@ export type FormProps<FormValues = unknown> = {
5339
export const Form = <FormValues,>({
5440
children,
5541
onRawSubmit,
56-
onSubmit,
57-
onSubmitError,
58-
onSubmitSuccess,
5942
errors,
6043
initialValues,
6144
validateOnBlur,
@@ -64,7 +47,6 @@ export const Form = <FormValues,>({
6447
render,
6548
mutators,
6649
keepDirtyOnReinitialize,
67-
parseSubmitException,
6850
}: FormProps<FormValues>): JSX.Element => (
6951
<ReactFinalForm
7052
initialValues={initialValues}
@@ -77,30 +59,7 @@ export const Form = <FormValues,>({
7759
...arrayMutators,
7860
...mutators,
7961
}}
80-
onSubmit={async (values, form, callback) => {
81-
if (onRawSubmit) {
82-
return onRawSubmit(values, form, callback)
83-
}
84-
85-
try {
86-
const res = await onSubmit?.(values, form, callback)
87-
if (res !== undefined) {
88-
await onSubmitError?.(res)
89-
} else {
90-
await onSubmitSuccess?.(values)
91-
}
92-
93-
return res
94-
} catch (submitError) {
95-
await onSubmitError?.(submitError)
96-
97-
return {
98-
[FORM_ERROR]: parseSubmitException
99-
? parseSubmitException(submitError)
100-
: submitError,
101-
}
102-
}
103-
}}
62+
onSubmit={onRawSubmit}
10463
render={
10564
render ??
10665
(renderProps => (

‎src/components/RadioField/__stories__/Checked.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { RadioField } from '..'
33
import { Form, FormProps } from '../../Form'
44

55
export const Checked: Story<FormProps> = ({ errors }) => (
6-
<Form errors={errors} initialValues={{ foo: 'bar' }}>
6+
<Form onRawSubmit={() => {}} errors={errors} initialValues={{ foo: 'bar' }}>
77
<RadioField name="foo" value="bar">
88
Checked Radio
99
</RadioField>

‎src/components/RadioField/__stories__/index.stories.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@ import { mockErrors } from '../../../mocks'
44

55
export default {
66
component: RadioField,
7-
decorators: [ChildStory => <Form errors={mockErrors}>{ChildStory()}</Form>],
7+
decorators: [
8+
ChildStory => (
9+
<Form onRawSubmit={() => {}} errors={mockErrors}>
10+
{ChildStory()}
11+
</Form>
12+
),
13+
],
814
parameters: {
915
docs: {
1016
description: {

0 commit comments

Comments
 (0)