💄 Add 'form' elements to kitchen sink post example

Author: Shrugsy

examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx

@@ -25,23 +25,28 @@ const EditablePostName = ({
     target: { value },
   }: React.ChangeEvent<HTMLInputElement>) => setName(value)
 
-  const handleUpdate = () => onUpdate(name)
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault()
+    onUpdate(name)
+  }
   const handleCancel = () => onCancel()
 
   return (
     <div>
-      <input
-        type="text"
-        onChange={handleChange}
-        value={name}
-        disabled={loading}
-      />
-      <button onClick={handleUpdate} disabled={loading}>
-        {loading ? 'Updating...' : 'Update'}
-      </button>
-      <button onClick={handleCancel} disabled={loading}>
-        Cancel
-      </button>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          onChange={handleChange}
+          value={name}
+          disabled={loading}
+        />
+        <button type="submit" disabled={loading}>
+          {loading ? 'Updating...' : 'Update'}
+        </button>
+        <button onClick={handleCancel} disabled={loading}>
+          Cancel
+        </button>
+      </form>
     </div>
   )
 }

examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx

@@ -24,25 +24,31 @@ const AddPost = () => {
     }))
   }
 
-  const handleAddPost = () => addPost(post).then(() => setPost(initialValue))
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault()
+    await addPost(post)
+    setPost(initialValue)
+  }
 
   return (
-    <div className="row">
-      <div className="column column-3">
-        <input
-          name="name"
-          placeholder="New post name"
-          type="text"
-          onChange={handleChange}
-          value={post.name}
-        />
-      </div>
-      <div className="column column-1">
-        <button onClick={handleAddPost} disabled={isLoading}>
-          {isLoading ? 'Adding...' : 'Add Post'}
-        </button>
+    <form onSubmit={handleSubmit}>
+      <div className="row">
+        <div className="column column-3">
+          <input
+            name="name"
+            placeholder="New post name"
+            type="text"
+            onChange={handleChange}
+            value={post.name}
+          />
+        </div>
+        <div className="column column-1">
+          <button type="submit" disabled={isLoading}>
+            {isLoading ? 'Adding...' : 'Add Post'}
+          </button>
+        </div>
       </div>
-    </div>
+    </form>
   )
 }