Connect to aoba grpc server and retreive data

AobaClient/src/components/media_grid.rs

@@ -1,36 +1,98 @@
-use dioxus::prelude::*;
+use std::str::FromStr;
 
-#[component]
-pub fn MediaGrid() -> Element {
-	rsx! {
-		div{
-			class: "mediaGrid",
-			{(0..50).map(|_| rsx!{
-				MediaItem {}
-			})}
+use dioxus::prelude::*;
+use tonic::{metadata::MetadataValue, IntoRequest, Request};
+
+use crate::rpc::{
+	aoba::{MediaModel, PageFilter},
+	get_rpc_client,
+};
+
+#[derive(PartialEq, Clone, Props)]
+pub struct MediaGridProps {
+	pub query: Option<String>,
+	pub page: Option<i32>,
+	pub page_size: Option<i32>,
+}
+
+impl IntoRequest<PageFilter> for MediaGridProps {
+	fn into_request(self) -> tonic::Request<PageFilter> {
+		let f: PageFilter = self.into();
+		f.into_request()
+	}
+}
+
+impl Into<PageFilter> for MediaGridProps {
+	fn into(self) -> PageFilter {
+		PageFilter {
+			page: self.page,
+			page_size: self.page_size,
+			query: self.query,
 		}
 	}
 }
 
 #[component]
-pub fn MediaItem() -> Element {
+pub fn MediaGrid(props: MediaGridProps) -> Element {
+	let media_result = use_resource(|| async move {
+		let mut client = get_rpc_client();
+		let mut req = Request::new(PageFilter::default());
+		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! {
+			div{
+				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{}
+			img{ src: "https://aoba.app/i/{id}" }
 			div {
 				class: "info",
 				span{
 					class: "name",
-					"Filename"
+					"{filename}"
 				},
 				div{
 					class: "details",
 					span{
-						"Type"
+						"{mtype}"
 					},
 					span{
-						"View Count"
+						"{props.item.view_count}"
 					},
 				}
 			}

AobaClient/src/rpc.rs

@@ -1,7 +1,7 @@
 use std::sync::RwLock;
 
 use aoba::aoba_rpc_client::AobaRpcClient;
-use tonic::transport::Channel;
+use tonic_web_wasm_client::Client;
 
 pub mod aoba {
 	tonic::include_proto!("aoba");
@@ -13,25 +13,24 @@ static RPC_CLIENT: RpcConnection = RpcConnection {
 
 #[derive(Default)]
 pub struct RpcConnection {
-	client: RwLock<Option<AobaRpcClient<Channel>>>,
+	client: RwLock<Option<AobaRpcClient<Client>>>,
 }
 
 impl RpcConnection {
-	pub async fn get_client(&self) -> AobaRpcClient<Channel> {
-		self.ensure_client().await;
+	pub fn get_client(&self) -> AobaRpcClient<Client> {
+		self.ensure_client();
 		return self.client.read().unwrap().clone().unwrap();
 	}
 
-	async fn ensure_client(&self) {
+	fn ensure_client(&self) {
 		if self.client.read().unwrap().is_none() {
-			let c = AobaRpcClient::connect("http://localhost:5000")
-				.await
-				.expect("Failed to connect RPC");
+			let wasm_client = Client::new("http://localhost:5164".into());
+			let c = AobaRpcClient::new(wasm_client);
 			*self.client.write().unwrap() = Some(c);
 		}
 	}
 }
 
-pub async fn get_rpc_client() -> AobaRpcClient<Channel> {
-	return RPC_CLIENT.get_client().await;
+pub fn get_rpc_client() -> AobaRpcClient<Client> {
+	return RPC_CLIENT.get_client();
 }

AobaClient/src/views/home.rs

@@ -5,7 +5,6 @@ use dioxus::prelude::*;
 pub fn Home() -> Element {
 	rsx! {
 		div { id: "content",
-			"This is home"
 			Search {  },
 			MediaGrid { }
 		}

AobaClient/src/views/login.rs

@@ -9,7 +9,7 @@ pub fn Login() -> Element {
 			id: "centralModal",
 			form{
 				Input { type : "text", name: "username", label: "Username" },
-				Input{ type : "password", name: "password", label: "Password" },
+				Input { type : "password", name: "password", label: "Password" },
 				Button{text: "Login!"}
 			}
 		}