Front end created

2024-07-26 20:46:23 -04:00 · 2024-07-26 20:46:23 -04:00 · a11642e0e8
parent c439bf61da
commit a11642e0e8
4 changed files with 104 additions and 2 deletions
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@ -4,3 +4,10 @@ version = "0.1.0"
 edition = "2021"

 [dependencies]
+console_error_panic_hook = "0.1.7"
+gloo-net = "0.6.0"
+log = "0.4.22"
+wasm-bindgen-futures = "0.4.42"
+wasm-logger = "0.2.0"
+yew = { version = "0.21.0", features = ["csr"] }
+yew-router = "0.18.0"
--- a/frontend/Trunk.toml
+++ b/frontend/Trunk.toml
@ -0,0 +1,3 @@
+[build]
+target = "index.html"
+dist = "../dist"
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
+    <title>Yew App</title>
+  </head>
+  <body>loading...</body>
+</html>
--- a/frontend/src/main.rs
+++ b/frontend/src/main.rs
@ -1,3 +1,86 @@
-fn main() {
-    println!("Hello, world!");
+use gloo_net::http::Request;
+use wasm_bindgen_futures::spawn_local;
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+#[derive(Clone, Routable, PartialEq)]
+enum Route {
+    #[at("/")]
+    Home,
+    #[at("/hello-server")]
+    HelloServer,
 }
+
+fn switch(routes: Route) -> Html {
+    match routes {
+        Route::Home => html! { <h1>{ "Hello Frontend" }</h1> },
+        Route::HelloServer => html! { <HelloServer /> },
+    }
+}
+
+#[function_component(App)]
+fn app() -> Html {
+    html! {
+        <BrowserRouter>
+            <Switch<Route> render={switch} />
+        </BrowserRouter>
+    }
+}
+
+#[function_component(HelloServer)]
+fn hello_server() -> Html {
+    let data = use_state(|| None);
+
+    // Request `/api/hello` once
+    {
+        let data = data.clone();
+        use_effect(move || {
+            if data.is_none() {
+                spawn_local(make_request(data));
+            }
+
+            || {}
+        });
+    }
+
+    match data.as_ref() {
+        None => {
+            html! {
+                <div>{"No server response"}</div>
+            }
+        }
+        Some(Ok(data)) => {
+            html! {
+                <div>{"Got server response: "}{data}</div>
+            }
+        }
+        Some(Err(err)) => {
+            html! {
+                <div>{"Error requesting data from server: "}{err}</div>
+            }
+        }
+    }
+}
+
+async fn make_request(data: UseStateHandle<Option<Result<String, String>>>) {
+    let resp = Request::get("/api/hello").send().await.unwrap();
+    let result = {
+        if !resp.ok() {
+            Err(format!(
+                "Error fetching data {} ({})",
+                resp.status(),
+                resp.status_text()
+            ))
+        } else {
+            resp.text().await.map_err(|err| err.to_string())
+        }
+    };
+    data.set(Some(result));
+
+}
+
+fn main() {
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
+    console_error_panic_hook::set_once();
+    yew::Renderer::<App>::new().render();
+}