push history state

AobaClient/src/components/search.rs

@@ -1,7 +1,8 @@
 use dioxus::prelude::*;
 
 #[component]
-pub fn Search(query: String, oninput: Option<EventHandler<String>>) -> Element {
+pub fn Search(query: String, oninput: Option<EventHandler<String>>, onchange: Option<EventHandler<String>>) -> Element
+{
 	rsx! {
 		div { class: "searchBar",
 			input {
@@ -13,6 +14,11 @@ pub fn Search(query: String, oninput: Option<EventHandler<String>>) -> Element {
 						handler.call(event.value());
 					}
 				},
+				onchange: move |event|{
+					if let Some(handler) = onchange {
+						handler.call(event.value());
+					}
+				}
 			}
 		}
 	}

AobaClient/src/main.rs

@@ -8,7 +8,7 @@ pub mod rpc;
 pub mod views;
 
 use contexts::AuthContext;
-use dioxus::prelude::*;
+use dioxus::{prelude::*, router::RouterConfig};
 use route::Route;
 
 #[cfg(debug_assertions)]
@@ -34,7 +34,6 @@ fn main()
 fn App() -> Element
 {
 	use_context_provider(|| AuthContext::new());
-	// use_context_provider(|| ContextMenuRenderer::default());
 	rsx! {
 		document::Link { rel: "icon", href: FAVICON }
 		document::Link { rel: "preconnect", href: "https://fonts.googleapis.com" }
@@ -46,7 +45,17 @@ fn App() -> Element
 			rel: "stylesheet",
 			href: "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap",
 		}
-
+		Router::<Route> { config: || RouterConfig::default()
-		Router::<Route> { }
+			.on_update(|state|{
+				match state.current() {
+					Route::Home {page, q} => {
+						info!("Page {}", page.unwrap_or(1));
+						return None;
+						// return Some(NavigationTarget::Internal(Route::Home { page, q }))
+					},
+					_ => None
+				}
+			})
+		}
 	}
 }

AobaClient/src/views/home.rs

@@ -1,5 +1,8 @@
-use crate::components::{MediaGrid, Pagination, PaginationInfo, Search};
+use crate::{
-use dioxus::prelude::*;
+	components::{MediaGrid, Pagination, PaginationInfo, Search},
+	route::Route,
+};
+use dioxus::{prelude::*, router::RouterConfig};
 
 // #[component]
 // pub fn Home() -> Element
@@ -19,7 +22,8 @@ use dioxus::prelude::*;
 // }
 
 #[component]
-pub fn Home(page: Option<i32>, q: Option<String>) -> Element {
+pub fn Home(page: Option<i32>, q: Option<String>) -> Element
+{
 	let mut query = use_signal(|| q.unwrap_or("".to_string()));
 	let mut page = use_signal(|| page.unwrap_or(1));
 	let page_size = use_signal::<i32>(|| 100);
@@ -33,12 +37,16 @@ pub fn Home(page: Option<i32>, q: Option<String>) -> Element {
 				oninput: move |q| {
 					query.set(q);
 					page.set(1);
+				},
+				onchange: move |_|{
+					router().push(format!("/?page={}&q={}", page(), query()));
 				}
 			},
 			Pagination {
 				page, max_page, item_count,
 				on_page_change: move |p|{
 					page.set(p);
+					router().push(format!("/?page={}&q={}", page(), query()));
 				}
 			},
 		}