Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(react-formio): fix onAsyncSubmit on useForm hook
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| import { SubmissionType } from "../../interfaces"; | ||
|
|
||
| function useFetch(url: string, opts: any) { | ||
| const [data, setData] = useState(null); | ||
| const [loading, setLoading] = useState(true); | ||
| const [error, setError] = useState(null); | ||
|
|
||
| function fetchData() { | ||
| fetch(url, opts) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| setData(data); | ||
| setLoading(false); | ||
| }) | ||
| .catch((err) => { | ||
| setError(err); | ||
| setLoading(false); | ||
| }); | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| fetchData(); | ||
| }, [url, opts.method]); | ||
|
|
||
| return { data, loading, error, fetchData }; | ||
| } | ||
|
|
||
| async function updateSubmission(model: string, submissionId: string, submission: SubmissionType["data"]) { | ||
| const response = await fetch(`https://local.dev/form/${model}/submissions/${submissionId}`, { | ||
| method: "PUT", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| Accept: "application/json" | ||
| }, | ||
| body: JSON.stringify(submission) | ||
| }); | ||
|
|
||
| const data = await response.json(); | ||
|
|
||
| if (!response.ok) { | ||
| const error: any = new Error("Update submission failed"); | ||
| error.errors = [data]; | ||
| throw error; | ||
| } | ||
|
|
||
| return data; | ||
| } | ||
|
|
||
| export function useEditForm({ model, submissionId }: any) { | ||
| const form = useFetch(`https://local.dev/form/${model}`, { | ||
| method: "GET", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| Accept: "application/json" | ||
| } | ||
| }); | ||
|
|
||
| const submission = useFetch(`https://local.dev/form/${model}/submissions/${submissionId}`, { | ||
| method: "GET", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| Accept: "application/json" | ||
| } | ||
| }); | ||
|
|
||
| function onSubmit(submission: any) { | ||
| return updateSubmission(model, submissionId, submission.data).then((data) => { | ||
| return { | ||
| ...submission, | ||
| data | ||
| }; | ||
| }); | ||
| } | ||
|
|
||
| return { | ||
| form: form.data, | ||
| data: submission.data, | ||
| loading: form.loading || submission.loading, | ||
| error: form.error || submission.error, | ||
| onSubmit | ||
| }; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,29 @@ | ||
| import { JSON } from "../../interfaces"; | ||
| import { useForm, UseFormProps } from "./useForm.hook"; | ||
|
|
||
| class CSSProperties {} | ||
|
|
||
| export interface FormProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends UseFormProps<Data> { | ||
| ["data-testid"]?: string; | ||
| /** | ||
| * | ||
| */ | ||
| className?: string; | ||
|
|
||
| style?: CSSProperties; | ||
| } | ||
|
|
||
| export function Form<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({ | ||
| style, | ||
| className, | ||
| "data-testid": dataTestId = "formio-container", | ||
| ...props | ||
| }: Partial<FormProps<Data>>) { | ||
| const { element } = useForm<Data>(props); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div data-testid={dataTestId} style={style} className={className} ref={element} /> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.