blob: 6a82f97f524ae869478710d557802bcde51e896e (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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>
);
}
|