From 8b2c4a38a461ff5ecc95972291bc711e2c5dec9a Mon Sep 17 00:00:00 2001
From: 简律纯 <hsiangnianian@outlook.com>
Date: Fri, 28 Apr 2023 01:47:57 +0800
Subject:

---
 examples/with-docker/apps/web/src/pages/index.tsx | 65 +++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 examples/with-docker/apps/web/src/pages/index.tsx

(limited to 'examples/with-docker/apps/web/src')

diff --git a/examples/with-docker/apps/web/src/pages/index.tsx b/examples/with-docker/apps/web/src/pages/index.tsx
new file mode 100644
index 0000000..6a82f97
--- /dev/null
+++ b/examples/with-docker/apps/web/src/pages/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { Button } from "ui";
+
+const API_HOST = process.env.NEXT_PUBLIC_API_HOST || "http://localhost:3001";
+
+export default function Web() {
+  const [name, setName] = useState<string>("");
+  const [response, setResponse] = useState<{ message: string } | null>(null);
+  const [error, setError] = useState<string | undefined>();
+
+  useEffect(() => {
+    setResponse(null);
+    setError(undefined);
+  }, [name]);
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setName(e.target.value);
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    try {
+      const result = await fetch(`${API_HOST}/message/${name}`);
+      const response = await result.json();
+      setResponse(response);
+    } catch (err) {
+      console.error(err);
+      setError("Unable to fetch response");
+    }
+  };
+
+  const onReset = () => {
+    setName("");
+  };
+
+  return (
+    <div>
+      <h1>Web</h1>
+      <form onSubmit={onSubmit}>
+        <label htmlFor="name">Name </label>
+        <input
+          type="text"
+          name="name"
+          id="name"
+          value={name}
+          onChange={onChange}
+        ></input>
+        <Button type="submit">Submit</Button>
+      </form>
+      {error && (
+        <div>
+          <h3>Error</h3>
+          <p>{error}</p>
+        </div>
+      )}
+      {response && (
+        <div>
+          <h3>Greeting</h3>
+          <p>{response.message}</p>
+          <Button onClick={onReset}>Reset</Button>
+        </div>
+      )}
+    </div>
+  );
+}
-- 
cgit v1.2.3-70-g09d2