From 187136ef6069676392a65fc05a5ba1ce09de436d Mon Sep 17 00:00:00 2001
From: Evan Tahler <evan@evantahler.com>
Date: Mon, 18 Mar 2024 21:00:48 -0700
Subject: [PATCH] hello form

---
 actions/goodbye.ts       |  15 ------------
 actions/hello.ts         |  11 ++++-----
 bun.lockb                | Bin 21360 -> 21360 bytes
 components/HelloCard.tsx |  50 +++++++++++++++++++++++++++++++++++++++
 pages/index.tsx          |  14 ++++++++---
 5 files changed, 66 insertions(+), 24 deletions(-)
 delete mode 100644 actions/goodbye.ts
 create mode 100644 components/HelloCard.tsx

diff --git a/actions/goodbye.ts b/actions/goodbye.ts
deleted file mode 100644
index 1d42766..0000000
--- a/actions/goodbye.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Action, type ActionParams } from "../api";
-
-export class Hello extends Action {
-  constructor() {
-    super({
-      name: "goodbye",
-      web: { route: "/goodbye", method: "POST" },
-      inputs: { name: { required: false } },
-    });
-  }
-
-  async run(params: ActionParams<Hello>) {
-    return { message: `Bye${params.name ? `, ${params.name}` : ""}` };
-  }
-}
diff --git a/actions/hello.ts b/actions/hello.ts
index 2af6c5a..e94b2e5 100644
--- a/actions/hello.ts
+++ b/actions/hello.ts
@@ -1,5 +1,5 @@
 import { Action, type ActionParams } from "../api";
-import { ensureNumber } from "../util/formatters";
+import { ensureString } from "../util/formatters";
 
 export class Hello extends Action {
   constructor() {
@@ -7,17 +7,16 @@ export class Hello extends Action {
       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}!` };
   }
 }
diff --git a/bun.lockb b/bun.lockb
index 18cf2fed9bab16d2bc477f836a27f5266cf4158d..1a86ca03052f3cac8ab33ea9ce448891338e28b0 100755
GIT binary patch
delta 23
fcmeycjPb)V#tnNdIT+&%E%c1^3^pINTrCLzb!Z6K

delta 23
acmeycjPb)V#tnNdIhYtAVDnMS)sg^bG6z%u

diff --git a/components/HelloCard.tsx b/components/HelloCard.tsx
new file mode 100644
index 0000000..455f49f
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/pages/index.tsx b/pages/index.tsx
index b2e117f..a76ffa2 100644
--- a/pages/index.tsx
+++ b/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>
   );