rewrite components such that data always flows downwards

AobaClient/src/views/home.rs

@@ -1,4 +1,4 @@
-use crate::components::{MediaGrid, Pagination, Search};
+use crate::components::{MediaGrid, Pagination, PaginationInfo, Search};
 use dioxus::prelude::*;
 
 // #[component]
@@ -19,19 +19,34 @@ use dioxus::prelude::*;
 // }
 
 #[component]
-pub fn Home(page: Option<i32>, q: Option<String>) -> Element
-{
-	let query = use_signal(|| q.unwrap_or("".to_string()));
-	let page = use_signal(|| page.unwrap_or(1));
+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);
-	let max_page = use_signal(|| 1 as i32);
-	let item_count = use_signal(|| 0 as i32);
+	let mut max_page = use_signal(|| 1 as i32);
+	let mut item_count = use_signal(|| 0 as i32);
 	rsx! {
 		div	{
 			class: "stickyTop",
-			Search { query, page },
-			Pagination { page, max_page, item_count },
+			Search {
+				query: query(),
+				oninput: move |q| {
+					query.set(q);
+					page.set(1);
+				}
+			},
+			Pagination {
+				page, max_page, item_count,
+				on_page_change: move |p|{
+					page.set(p);
+				}
+			},
+		}
+		MediaGrid { query: query, page: page, max_page, total_items: item_count, page_size,
+			on_page_loaded: move |p: PaginationInfo| {
+				max_page.set(p.total_pages);
+				item_count.set(p.total_items);
+			}
 		}
-		MediaGrid { query: query, page: page, max_page, total_items: item_count, page_size }
 	}
 }

AobaClient/src/views/media.rs

@@ -1,6 +1,4 @@
 use crate::HOST;
-use crate::components::radio_group::{RadioGroup, RadioItem};
-use crate::rpc::aoba::SetMediaClassRequest;
 use crate::rpc::{
 	aoba::{Id, MediaModel},
 	get_rpc_client,
@@ -8,26 +6,20 @@ use crate::rpc::{
 use dioxus::prelude::*;
 
 #[component]
-pub fn Media(id: String) -> Element
-{
+pub fn Media(id: String) -> Element {
 	let media_result = use_resource(use_reactive!(|(id)| async move {
 		let mut client = get_rpc_client();
 		let result = client.get_media(Id { value: id.clone() }).await;
-		if let Ok(item) = result
-		{
+		if let Ok(item) = result {
 			let res = item.into_inner();
 			return res.value;
-		}
-		else
-		{
+		} else {
 			return None;
 		}
 	}));
 
-	return match media_result.cloned().unwrap_or(None)
-	{
-		Some(media) =>
-		{
+	return match media_result.cloned().unwrap_or(None) {
+		Some(media) => {
 			return rsx! {MediaPage{media: media}};
 		}
 		None => rsx! {"Not Found"},
@@ -35,12 +27,10 @@ pub fn Media(id: String) -> Element
 }
 
 #[component]
-fn MediaPage(media: MediaModel) -> Element
-{
+fn MediaPage(media: MediaModel) -> Element {
 	let url = media.thumb_url;
 	let id = media.id.expect("Media has no id").value.clone();
-	let cur_class = use_signal(|| match media.class
-	{
+	let cur_class = use_signal(|| match media.class {
 		0 => "Standard",
 		1 => "NSFW",
 		2 => "Secret",