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