[Flight Fixture] Extract mutations into a custom Hook

Author: gaearon

fixtures/flight/src/AddTodo.client.js

@@ -1,33 +1,27 @@
 import * as React from 'react';
 
 import Container from './Container.js';
-import {RefreshContext} from './Context.client';
+import useMutation from './useMutation.client';
 
 export default function AddTodo() {
   const [text, setText] = React.useState('');
-  const [startTransition, isPending] = React.unstable_useTransition();
-  const refresh = React.useContext(RefreshContext);
+  const [postTodo, isPosting] = useMutation(async () => {
+    setText('');
+    await fetch('http://localhost:3001/todos', {
+      method: 'POST',
+      mode: 'cors',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({text}),
+    });
+  });
   return (
     <Container>
       <input value={text} onChange={e => setText(e.target.value)} />
-      <button
-        onClick={async () => {
-          await fetch('http://localhost:3001/todos', {
-            method: 'POST',
-            mode: 'cors',
-            headers: {
-              Accept: 'application/json',
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({text}),
-          });
-          startTransition(() => {
-            refresh();
-          });
-        }}>
-        add
-      </button>
-      {isPending && ' ...'}
+      <button onClick={() => postTodo()}>add</button>
+      {isPosting && ' ...'}
     </Container>
   );
 }

fixtures/flight/src/DeleteTodo.client.js

@@ -1,22 +1,12 @@
 import * as React from 'react';
-import {RefreshContext} from './Context.client';
+import useMutation from './useMutation.client';
 
 export default function DeleteTodo({id}) {
-  const [startTransition] = React.unstable_useTransition();
-  const refresh = React.useContext(RefreshContext);
-
-  return (
-    <button
-      onClick={async () => {
-        await fetch('http://localhost:3001/todos/' + id, {
-          method: 'DELETE',
-          mode: 'cors',
-        });
-        startTransition(() => {
-          refresh();
-        });
-      }}>
-      x
-    </button>
-  );
+  const [deleteTodo] = useMutation(async () => {
+    await fetch('http://localhost:3001/todos/' + id, {
+      method: 'DELETE',
+      mode: 'cors',
+    });
+  });
+  return <button onClick={() => deleteTodo()}>x</button>;
 }

fixtures/flight/src/useMutation.client.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import {RefreshContext} from './Context.client';
+
+export default function useMutation(performMutation) {
+  const [pendingCount, setPendingCount] = React.useState(0);
+  const [startTransition, isTransitioning] = React.unstable_useTransition();
+  const refresh = React.useContext(RefreshContext);
+
+  async function handleMutation(...args) {
+    setPendingCount(c => c + 1);
+    try {
+      await performMutation(...args);
+    } finally {
+      setPendingCount(c => c - 1);
+    }
+    startTransition(() => {
+      refresh();
+    });
+  }
+
+  return [handleMutation, pendingCount > 0 || isTransitioning];
+}