1import { BackendClient } from "@monorepo-multi-stack/backend/Client";
2import * as Effect from "effect/Effect";
3import * as FetchHttpClient from "effect/http/FetchHttpClient";
4import React from "react";
5import ReactDOM from "react-dom/client";
6
7const API_URL = import.meta.env.VITE_API_URL ?? "http://localhost:8787";
8
9const client = BackendClient(API_URL).pipe(
10 Effect.provide(FetchHttpClient.layer),
11);
12
13function App() {
14 const [message, setMessage] = React.useState<string>("loading…");
15
16 React.useEffect(() => {
17 client
18 .pipe(
19 Effect.flatMap((client) => client.Hello.hello()),
20 Effect.map((greeting) => greeting.message),
21 Effect.runPromise,
22 )
23 .then(setMessage, (err) => setMessage(`error: ${String(err)}`));
24 }, []);
25
26 return (
27 <main>
28 <h1>{message}</h1>
29 <p>
30 Edit <code>src/main.tsx</code> and redeploy.
31 </p>
32 </main>
33 );
34}
35
36ReactDOM.createRoot(document.getElementById("root")!).render(
37 <React.StrictMode>
38 <App />
39 </React.StrictMode>,
40);