Add useFormStatus to Flight fixture (#26773)

facebook · May 3, 2023 · f533cee · f533cee
1 parent 2c1117a
commit f533cee
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 26 deletions.
diff --git a/fixtures/flight/src/Button.js b/fixtures/flight/src/Button.js
@@ -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 (
+    <button
+      disabled={pending}
+      formAction={async () => {
+        const result = await action();
+        console.log(result);
+      }}>
+      {children}
+    </button>
+  );
+}
 
+export default function Button({action, children}) {
   return (
     <ErrorBoundary>
       <form>
-        <button
-          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));
-            }
-          }}>
+        <ButtonDisabledWhilePending action={action}>
           {children}
-        </button>
+        </ButtonDisabledWhilePending>
       </form>
     </ErrorBoundary>
   );

diff --git a/fixtures/flight/src/Form.js b/fixtures/flight/src/Form.js
@@ -1,24 +1,23 @@
 '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);
 
   return (
     <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));
-          }
+          const result = await action(formData);
+          alert(result);
         }}>
         <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>
   );