Frontend: Add basic search_query state

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
@@ -223,6 +223,12 @@ dependencies = [
 ]
 
 [[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"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -246,6 +252,15 @@ 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"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -586,6 +601,9 @@ dependencies = [
 name = "frontend"
 version = "0.1.0"
 dependencies = [
+ "gloo 0.8.0",
+ "wasm-bindgen",
+ "web-sys",
  "yew",
 ]
 
@@ -730,6 +748,25 @@ dependencies = [
 ]
 
 [[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"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -775,6 +812,42 @@ dependencies = [
 ]
 
 [[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"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -823,6 +896,23 @@ dependencies = [
 ]
 
 [[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"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1904,6 +1994,18 @@ dependencies = [
 ]
 
 [[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"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -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::<HtmlInputElement>().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! {
-    <>
+        <>
         <nav class="navbar bg-light sticky-top">
             <div class="container-fluid">
                 <div>
@@ -18,10 +54,10 @@ fn app() -> Html {
                 <div class="col">
                         <b class="display-4 text-truncate">{"OSSE"}</b>
                         <p>{"Your favorite independent search engine."}</p>
-                        <form>
+                        <form onsubmit={on_submit}>
                             <div class="input-group input-group-lg my-2">
-                                <input type="text" class="form-control" placeholder="Search with OSSE" />
-                                <button class="btn btn-primary" type="button" >{"Search"}</button>
+                                <input oninput={search_query_changed} value={curr_state.search_query}type="text" class="form-control" placeholder="Search with OSSE" />
+                                <button class="btn btn-primary" type="submit" >{"Search!"}</button>
                             </div>
                         </form>
                 </div>
@@ -40,6 +76,15 @@ fn app() -> Html {
     }
 }
 
+#[function_component(App)]
+fn app() -> Html {
+    html! {
+    <>
+        <OSSE/>
+    </>
+    }
+}
+
 //Your favorite search engine in navbar
 //Search in middle