Add useFormStatus to Flight fixture (#26773)
This commit is contained in:
parent
2c1117a8d0
commit
f533cee8cb
|
@ -1,29 +1,30 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import {flushSync} from 'react-dom';
|
||||
import {experimental_useFormStatus as useFormStatus} from 'react-dom';
|
||||
import ErrorBoundary from './ErrorBoundary.js';
|
||||
|
||||
export default function Button({action, children}) {
|
||||
const [isPending, setIsPending] = React.useState(false);
|
||||
|
||||
function ButtonDisabledWhilePending({action, children}) {
|
||||
const {pending} = useFormStatus();
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<form>
|
||||
<button
|
||||
disabled={isPending}
|
||||
disabled={pending}
|
||||
formAction={async () => {
|
||||
// TODO: Migrate to useFormPending once that exists
|
||||
flushSync(() => setIsPending(true));
|
||||
try {
|
||||
const result = await action();
|
||||
console.log(result);
|
||||
} finally {
|
||||
React.startTransition(() => setIsPending(false));
|
||||
}
|
||||
}}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Button({action, children}) {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<form>
|
||||
<ButtonDisabledWhilePending action={action}>
|
||||
{children}
|
||||
</ButtonDisabledWhilePending>
|
||||
</form>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
|
|
@ -1,9 +1,14 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import {flushSync} from 'react-dom';
|
||||
import {experimental_useFormStatus as useFormStatus} from 'react-dom';
|
||||
import ErrorBoundary from './ErrorBoundary.js';
|
||||
|
||||
function Status() {
|
||||
const {pending} = useFormStatus();
|
||||
return pending ? 'Saving...' : null;
|
||||
}
|
||||
|
||||
export default function Form({action, children}) {
|
||||
const [isPending, setIsPending] = React.useState(false);
|
||||
|
||||
|
@ -11,14 +16,8 @@ export default function Form({action, children}) {
|
|||
<ErrorBoundary>
|
||||
<form
|
||||
action={async formData => {
|
||||
// TODO: Migrate to useFormPending once that exists
|
||||
flushSync(() => setIsPending(true));
|
||||
try {
|
||||
const result = await action(formData);
|
||||
alert(result);
|
||||
} finally {
|
||||
React.startTransition(() => setIsPending(false));
|
||||
}
|
||||
}}>
|
||||
<label>
|
||||
Name: <input name="name" />
|
||||
|
@ -27,7 +26,7 @@ export default function Form({action, children}) {
|
|||
File: <input type="file" name="file" />
|
||||
</label>
|
||||
<button>Say Hi</button>
|
||||
{isPending ? 'Saving...' : null}
|
||||
<Status />
|
||||
</form>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue