Implement querystring

Cargo.toml

@@ -18,6 +18,7 @@ once_cell = "1.4.0"
 wasm-bindgen = "0.2.64"
 yew = "0.19.3"
 yew-router = "0.16.0"
+urlencoding = "2.1.2"
 
 [dependencies.web-sys]
 version = "0.3.36"

src/components/app.rs

@@ -2,6 +2,7 @@ use std::rc::Rc;
 
 use gloo_events::EventListener;
 use gloo_utils::document;
+use urlencoding::decode;
 use wasm_bindgen::JsCast;
 use web_sys::{HtmlInputElement, KeyboardEvent};
 use yew::{html, Component, Context, Html, NodeRef};
@@ -40,7 +41,20 @@ impl Component for App {
             }
         });
 
-        Self { input_ref: NodeRef::default(), search_query: Rc::new(String::new()), _key_listener }
+        let search_query = web_sys::window()
+            .expect("cannot access window object")
+            .location()
+            .pathname()
+            .expect("unable to get location")
+            .split("/search/")
+            .skip(1)
+            .next()
+            .unwrap_or(String::new().as_str())
+            .to_string();
+        let search_query =
+            Rc::new(decode(&search_query).expect("Cannot decode search_query").to_string());
+
+        Self { input_ref: NodeRef::default(), search_query, _key_listener }
     }
 
     fn update(&mut self, _: &Context<Self>, msg: Msg) -> bool {
@@ -65,6 +79,9 @@ impl Component for App {
 
         let search_query = self.search_query.clone();
         let render_route = Switch::render(move |route| match &route {
+            AppRoute::SearchIndex { query: slug } => {
+                html! { <Index show={IndexContents::SearchResults { search_query: Rc::new(slug.clone()) }} /> }
+            }
             AppRoute::Index | AppRoute::RecentlyStabilized | AppRoute::Unstable => {
                 let show = if search_query.is_empty() {
                     IndexContents::Explore(match &route {
@@ -98,7 +115,7 @@ impl Component for App {
 
         html! {
             <BrowserRouter>
-                <Header input_ref={self.input_ref.clone()} oninput={oninput} />
+                <Header input_ref={self.input_ref.clone()} oninput={oninput} inputval={self.search_query.to_string()} />
                 <div class="page">
                     <Switch render={render_route} />
                 </div>

src/components/header.rs

@@ -2,13 +2,11 @@ use std::mem;
 
 use gloo_events::EventListener;
 use gloo_utils::{body, document_element, window};
+use urlencoding::encode;
 use wasm_bindgen::JsCast;
-use web_sys::{HtmlElement, InputEvent, MouseEvent};
-use yew::{html, Callback, Component, Context, Html, NodeRef, Properties};
-use yew_router::{
-    history::{History, Location},
-    scope_ext::RouterScopeExt,
-};
+use web_sys::{HtmlElement, HtmlInputElement, InputEvent, MouseEvent};
+use yew::{html, Callback, Component, Context, Html, NodeRef, Properties, TargetCast};
+use yew_router::{history::History, scope_ext::RouterScopeExt};
 
 use crate::{
     icons::{fa_bars, fa_moon, fa_question_circle, fa_sun},
@@ -31,6 +29,7 @@ pub struct Props {
     #[prop_or_default]
     pub input_ref: NodeRef,
     pub oninput: Callback<InputEvent>,
+    pub inputval: String,
 }
 
 impl Component for Header {
@@ -122,9 +121,12 @@ impl Component for Header {
 
         let history = ctx.link().history().unwrap();
         let cb = ctx.props().oninput.clone();
-        let oninput = move |ev| {
-            if history.location().route::<AppRoute>() != Some(AppRoute::Index) {
-                history.push(AppRoute::Index);
+        let oninput = move |ev: InputEvent| {
+            let search_query = ev.target_unchecked_into::<HtmlInputElement>().value();
+            if !search_query.is_empty() {
+                history.replace(AppRoute::SearchIndex { query: encode(&search_query).to_string() });
+            } else {
+                history.push(AppRoute::Index)
             }
             cb.emit(ev);
         };
@@ -135,6 +137,7 @@ impl Component for Header {
                     <div class="caniuse">
                         <label for="query">{"Can I use"}</label>
                         <input ref={ctx.props().input_ref.clone()} id="query" type="search"
+                            value={ctx.props().inputval.clone()}
                             oninput={oninput} />
                         {"?"}
                     </div>

src/lib.rs

@@ -39,6 +39,8 @@ enum AppRoute {
     Unstable,
     #[at("/")]
     Index,
+    #[at("/search/:query")]
+    SearchIndex { query: String },
 }
 
 type RouterLink = yew_router::components::Link<AppRoute>;

xtask/src/main.rs

@@ -35,11 +35,20 @@ fn main() -> anyhow::Result<()> {
 fn build() -> anyhow::Result<()> {
     cmd!("wasm-pack build --no-typescript --target web").run()?;
     fs::copy("pkg/caniuse_rs_bg.wasm", "public/caniuse_rs.wasm")?;
+    #[cfg(target_os = "linux")]
     cmd!("rollup src/main.js --format iife --file public/caniuse_rs.js").run()?;
+    #[cfg(target_os = "windows")]
+    cmd!("rollup.cmd src/main.js --format iife --file public/caniuse_rs.js").run()?;
+
 
     let static_files: Vec<_> =
         fs::read_dir("static")?.map(|entry| Ok(entry?.path())).collect::<io::Result<_>>()?;
+    #[cfg(target_os = "linux")]
     cmd!("cp -r {static_files...} public/").run()?;
+    #[cfg(target_os = "windows")]
+    for file in static_files.iter() {
+        cmd!("xcopy {file} public /i /s /y /q").run()?;
+    }
 
     Ok(())
 }