hello form

actions/hello.ts

@@ -1,23 +1,22 @@
 import { Action, type ActionParams } from "../api";
-import { ensureNumber } from "../util/formatters";
+import { ensureString } from "../util/formatters";
 
 export class Hello extends Action {
   constructor() {
     super({
       name: "hello",
       web: { route: "/hello", method: "POST" },
       inputs: {
-        name: { required: true },
-        number: {
+        name: {
           required: true,
-          default: 42,
-          formatter: ensureNumber,
+          validator: (p) => p.length > 0,
+          formatter: ensureString,
         },
       },
     });
   }
 
   async run(params: ActionParams<Hello>) {
-    return { message: `Hello, ${params.name} (${params.number})!` };
+    return { message: `Hello, ${params.name}!` };
   }
 }

components/HelloCard.tsx

@@ -0,0 +1,50 @@
+import { Button, Form } from "react-bootstrap";
+import type { ActionResponse } from "../api";
+import type { Hello } from "../actions/hello";
+import { useState } from "react";
+
+export const HelloCard = () => {
+  const [error, setError] = useState<string>();
+  const [message, setMessage] = useState<string>();
+
+  async function handleForm(event: React.SyntheticEvent) {
+    event.preventDefault();
+    setError(undefined);
+    setMessage(undefined);
+
+    const target = event.target as typeof event.target & {
+      name: { value: string };
+    };
+    const name = target.name.value;
+    const body = new FormData();
+    body.append("name", name);
+    const response = (await fetch("/api/hello", { method: "post", body }).then(
+      (res) => res.json(),
+    )) as ActionResponse<Hello>;
+
+    if (response.error) {
+      setError(response.error.message);
+    } else {
+      setMessage(response.message);
+    }
+  }
+
+  return (
+    <div>
+      <Form onSubmit={handleForm}>
+        <Form.Group className="mb-3" controlId="name">
+          <Form.Label>Name</Form.Label>
+          <Form.Control type="text" placeholder="Enter name" />
+        </Form.Group>
+
+        <Button variant="primary" type="submit">
+          Submit
+        </Button>
+      </Form>
+
+      <br />
+      {error && <div className="alert alert-danger">{error}</div>}
+      {message && <div className="alert alert-success">{message}</div>}
+    </div>
+  );
+};

pages/index.tsx

@@ -1,8 +1,9 @@
-import { Container } from "react-bootstrap";
+import { Container, Row, Col } from "react-bootstrap";
+import { mount } from "../util/browser";
 
 import { StatusCard } from "../components/StatusCard";
 import { MainLayout } from "../layouts/main";
-import { mount } from "../util/browser";
+import { HelloCard } from "../components/HelloCard";
 
 export default function Page() {
   return (
@@ -11,7 +12,14 @@ export default function Page() {
         <h1>Hello World</h1>
         <p>sups.</p>
         <hr />
-        <StatusCard />
+        <Row>
+          <Col>
+            <StatusCard />
+          </Col>
+          <Col>
+            <HelloCard />
+          </Col>
+        </Row>
       </Container>
     </MainLayout>
   );