From 924465f3602f171986eeac9b3d9ce0d8bded5a13 Mon Sep 17 00:00:00 2001 From: Baitinq Date: Wed, 26 Oct 2022 02:19:59 +0200 Subject: Frontend: Add basic search_query state --- Cargo.lock | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++- frontend/Cargo.toml | 5 ++- frontend/src/main.rs | 57 +++++++++++++++++++++++++--- 3 files changed, 158 insertions(+), 8 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index e579f8b..fe6eef3 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -222,6 +222,12 @@ dependencies = [ "alloc-no-stdlib", ] +[[package]] +name = "anymap2" +version = "0.13.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c" + [[package]] name = "async-channel" version = "1.7.1" @@ -245,6 +251,15 @@ version = "0.13.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "904dfeac50f3cdaba28fc6f57fdcddb75f49ed61346676a78c4ffe55877802fd" +[[package]] +name = "bincode" +version = "1.3.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "b1f45e9417d87227c7a56d22e471c6206462cba514c7590c09aff4cf6d1ddcad" +dependencies = [ + "serde", +] + [[package]] name = "bitflags" version = "1.3.2" @@ -586,6 +601,9 @@ dependencies = [ name = "frontend" version = "0.1.0" dependencies = [ + "gloo 0.8.0", + "wasm-bindgen", + "web-sys", "yew", ] @@ -729,6 +747,25 @@ dependencies = [ "gloo-utils", ] +[[package]] +name = "gloo" +version = "0.8.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3a4bef6b277b3ab073253d4bca60761240cf8d6998f4bd142211957b69a61b20" +dependencies = [ + "gloo-console", + "gloo-dialogs", + "gloo-events", + "gloo-file", + "gloo-history", + "gloo-net", + "gloo-render", + "gloo-storage", + "gloo-timers", + "gloo-utils", + "gloo-worker", +] + [[package]] name = "gloo-console" version = "0.2.3" @@ -774,6 +811,42 @@ dependencies = [ "web-sys", ] +[[package]] +name = "gloo-history" +version = "0.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "f81af52c0d31e86242eecefe1ed4d066deb79cfb80f9f7da0847fac417396bfe" +dependencies = [ + "gloo-events", + "gloo-utils", + "serde", + "serde-wasm-bindgen", + "serde_urlencoded", + "thiserror", + "wasm-bindgen", + "web-sys", +] + +[[package]] +name = "gloo-net" +version = "0.2.4" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "ec897194fb9ac576c708f63d35604bc58f2a262b8cec0fabfed26f3991255f21" +dependencies = [ + "futures-channel", + "futures-core", + "futures-sink", + "gloo-utils", + "js-sys", + "pin-project", + "serde", + "serde_json", + "thiserror", + "wasm-bindgen", + "wasm-bindgen-futures", + "web-sys", +] + [[package]] name = "gloo-render" version = "0.1.1" @@ -822,6 +895,23 @@ dependencies = [ "web-sys", ] +[[package]] +name = "gloo-worker" +version = "0.2.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "13471584da78061a28306d1359dd0178d8d6fc1c7c80e5e35d27260346e0516a" +dependencies = [ + "anymap2", + "bincode", + "gloo-console", + "gloo-utils", + "js-sys", + "serde", + "wasm-bindgen", + "wasm-bindgen-futures", + "web-sys", +] + [[package]] name = "h2" version = "0.2.7" @@ -1903,6 +1993,18 @@ dependencies = [ "serde_derive", ] +[[package]] +name = "serde-wasm-bindgen" +version = "0.3.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "618365e8e586c22123d692b72a7d791d5ee697817b65a218cdf12a98870af0f7" +dependencies = [ + "fnv", + "js-sys", + "serde", + "wasm-bindgen", +] + [[package]] name = "serde_derive" version = "1.0.145" @@ -2612,7 +2714,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "2a1ccb53e57d3f7d847338cf5758befa811cabe207df07f543c06f502f9998cd" dependencies = [ "console_error_panic_hook", - "gloo", + "gloo 0.4.2", "gloo-utils", "indexmap", "js-sys", diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml index 4963867..b6de6ad 100644 --- a/frontend/Cargo.toml +++ b/frontend/Cargo.toml @@ -6,4 +6,7 @@ edition = "2021" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -yew = "0.19" \ No newline at end of file +yew = "0.19" +gloo = "0.8.0" +web-sys = "0.3.60" +wasm-bindgen = "0.2.83" \ No newline at end of file diff --git a/frontend/src/main.rs b/frontend/src/main.rs index 860e028..30ec0ef 100644 --- a/frontend/src/main.rs +++ b/frontend/src/main.rs @@ -1,9 +1,45 @@ +use gloo::console::log; +use std::ops::Deref; +use wasm_bindgen::*; +use web_sys::{EventTarget, HtmlInputElement}; use yew::prelude::*; -#[function_component(App)] -fn app() -> Html { +#[derive(Debug, Clone)] +struct State { + pub search_query: String, +} + +#[function_component(OSSE)] +fn osse() -> Html { + let state = use_state(|| State { + search_query: "".to_string(), + }); + + let cloned_state = state.clone(); + let search_query_changed = Callback::from(move |event: InputEvent| { + let target: EventTarget = event + .target() + .expect("Event should have a target when dispatched"); + let input = target.unchecked_into::().value(); + log!("Input changed: {}", &input); + let mut state = cloned_state.deref().clone(); + state.search_query = input; + cloned_state.set(state); + }); + + let cloned_state = state.clone(); + let on_submit = Callback::from(move |event: FocusEvent| { + event.prevent_default(); + let mut state = cloned_state.deref().clone(); + log!("Submit:{}", state.search_query); + state.search_query = "".to_string(); + cloned_state.set(state); + }); + + let curr_state = state.deref().to_owned(); + html! { - <> + <>