Auth rpc

Search Bar
Search requests

AobaClient/build.rs

@@ -2,7 +2,10 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
 	tonic_build::configure()
 		.build_server(false)
 		.build_client(true)
-		.compile_protos(&["..\\AobaServer\\Proto\\Aoba.proto"], &["..\\AobaServer\\Proto\\"])?;
+		.compile_protos(
+			&["..\\AobaServer\\Proto\\Aoba.proto", "..\\AobaServer\\Proto\\Auth.proto"],
+			&["..\\AobaServer\\Proto\\"],
+		)?;
 
 	Ok(())
 }

AobaClient/src/components/basic/button.rs

@@ -2,8 +2,9 @@ use dioxus::prelude::*;
 
 #[derive(PartialEq, Clone, Props)]
 pub struct ButtonProps {
-	variant: Option<ButtonVariant>,
-	text: String,
+	pub variant: Option<ButtonVariant>,
+	pub text: String,
+	pub onclick: Option<EventHandler<Event<MouseData>>>,
 }
 
 #[derive(PartialEq, Clone)]
@@ -16,6 +17,13 @@ pub enum ButtonVariant {
 #[component]
 pub fn Button(props: ButtonProps) -> Element {
 	rsx! {
-		button { "{props.text}" }
+		button {
+			onclick: move |event| {
+				if let Some(h) = props.onclick {
+					h.call(event);
+				}
+			},
+			"{props.text}"
+		}
 	}
 }

AobaClient/src/components/basic/input.rs

@@ -7,6 +7,7 @@ pub struct InputProps {
 	pub label: Option<String>,
 	pub placeholder: Option<String>,
 	pub name: String,
+	pub oninput: Option<EventHandler<FormEvent>>,
 }
 
 #[component]

AobaClient/src/components/media_grid.rs

@@ -1,17 +1,17 @@
-use std::str::FromStr;
-
 use dioxus::prelude::*;
-use tonic::{metadata::MetadataValue, IntoRequest, Request};
+use tonic::{IntoRequest, Request};
 
-use crate::rpc::{
-	aoba::{MediaModel, PageFilter},
-	get_rpc_client,
+use crate::{
+	components::MediaItem,
+	rpc::{aoba::PageFilter, get_rpc_client},
 };
 
 #[derive(PartialEq, Clone, Props)]
 pub struct MediaGridProps {
 	pub query: Option<String>,
+	#[props(default = Some(1))]
 	pub page: Option<i32>,
+	#[props(default = Some(100))]
 	pub page_size: Option<i32>,
 }
 
@@ -34,14 +34,14 @@ impl Into<PageFilter> for MediaGridProps {
 
 #[component]
 pub fn MediaGrid(props: MediaGridProps) -> Element {
-	let media_result = use_resource(|| async move {
+	let media_result = use_resource(use_reactive!(|(props,)| async move {
 		let mut client = get_rpc_client();
-		let mut req = Request::new(PageFilter::default());
+		let mut req = Request::new(props.into());
 		req.metadata_mut()
 			.insert("authorization", "Bearer <toto: get token>".parse().unwrap());
 		let result = client.list_media(req).await;
 		return result.expect("Failed to load media").into_inner();
-	});
+	}));
 
 	match &*media_result.read_unchecked() {
 		Some(result) => rsx! {
@@ -49,53 +49,16 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 				class: "mediaGrid",
 				{result.items.iter().map(|itm| rsx!{
 					MediaItem { item: itm.clone() }
-				})}
+				})},
 			}
 		},
-		None => rsx!(),
-	}
-	// let items = media_result..unwrap().items;
-	// rsx! {
-	// 	div{
-	// 		class: "mediaGrid",
-	// 		{items.iter().map(|itm| rsx!{
-	// 			MediaItem { item: itm.clone() }
-	// 		})}
-	// 	}
-	// }
-}
-
-#[derive(PartialEq, Clone, Props)]
-pub struct MediaItemProps {
-	pub item: MediaModel,
-}
-
-#[component]
-pub fn MediaItem(props: MediaItemProps) -> Element {
-	let filename = props.item.file_name;
-	let id = props.item.id.unwrap().value;
-	let mtype = props.item.media_type.to_string();
-	// let url = "https://aoba.app/i/{}";
-	rsx! {
-		div{
-			class: "mediaItem",
-			img{ src: "https://aoba.app/i/{id}" }
-			div {
-				class: "info",
-				span{
-					class: "name",
-					"{filename}"
-				},
-				div{
-					class: "details",
-					span{
-						"{mtype}"
-					},
-					span{
-						"{props.item.view_count}"
-					},
+		None => rsx! {
+			div{
+				class: "mediaGrid",
+				div {
+					"No results could be loaded"
 				}
 			}
-		}
+		},
 	}
 }

AobaClient/src/components/media_item.rs

@@ -0,0 +1,43 @@
+use dioxus::prelude::*;
+
+use crate::rpc::aoba::MediaModel;
+
+#[derive(PartialEq, Clone, Props)]
+pub struct MediaItemProps {
+	pub item: MediaModel,
+}
+
+#[component]
+pub fn MediaItem(props: MediaItemProps) -> Element {
+	let mtype = props.item.media_type().as_str_name();
+	let filename = props.item.file_name;
+	let id = props.item.media_id.unwrap().value;
+
+	#[cfg(debug_assertions)]
+	let src = format!("http://localhost:5164/m/{id}");
+	#[cfg(not(debug_assertions))]
+	let src = format!("https://aoba.app/m/{id}");
+	// let url = "https://aoba.app/i/{}";
+	rsx! {
+		div{
+			class: "mediaItem",
+			img{ src: src }
+			div {
+				class: "info",
+				span{
+					class: "name",
+					"{filename}"
+				},
+				div{
+					class: "details",
+					span{
+						"{mtype}"
+					},
+					span{
+						"{props.item.view_count}"
+					},
+				}
+			}
+		}
+	}
+}

AobaClient/src/components/mod.rs

@@ -1,7 +1,9 @@
 pub mod basic;
 mod media_grid;
+mod media_item;
 mod navbar;
 mod search;
 pub use media_grid::*;
+pub use media_item::*;
 pub use navbar::*;
 pub use search::*;

AobaClient/src/components/search.rs

@@ -1,13 +1,15 @@
 use dioxus::prelude::*;
 
 #[component]
-pub fn Search() -> Element {
+pub fn Search(query: Option<String>, oninput: EventHandler<FormEvent>) -> Element {
 	rsx! {
 		div{
 			class: "searchBar",
 			input {
 				type: "search",
-				placeholder: "Search Files"
+				placeholder: "Search Files",
+				value: query.unwrap_or("".into()),
+				oninput: move |event| oninput.call(event)
 			}
 		}
 	}

AobaClient/src/views/home.rs

@@ -3,10 +3,18 @@ use dioxus::prelude::*;
 
 #[component]
 pub fn Home() -> Element {
+	let mut query = use_signal(|| "".to_string());
+
 	rsx! {
-		div { id: "content",
-			Search {  },
-			MediaGrid { }
+		div {
+			id: "content",
+			Search {
+				query: query.cloned(),
+				oninput: move |event:FormEvent| {
+					query.set(event.value())
+				}
+			},
+			MediaGrid { query: query.cloned() }
 		}
 	}
 }