From acda0768d20fbe78d508147ec7511e0c2197404a Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Mon, 15 Apr 2024 01:56:33 +0200
Subject: [PATCH] feat: added leptos-router, picker inside timeline

---
 web/Cargo.toml  |  5 +++--
 web/src/lib.rs  | 53 ++++++++++++++++++++++++++-----------------------
 web/src/main.rs | 20 +++++++++++--------
 3 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/web/Cargo.toml b/web/Cargo.toml
index fa5eb0fd..d8b5b02d 100644
--- a/web/Cargo.toml
+++ b/web/Cargo.toml
@@ -15,12 +15,13 @@ repository = "https://git.alemi.dev/upub.git"
 log = "0.4"
 console_log = "1.0"
 console_error_panic_hook = "0.1"
+thiserror = "1"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 dashmap = "5.5"
-web-sys = { version = "0.3", features = ["Window", "Storage", "HtmlDocument"] }
 leptos = { version = "0.6", features = ["csr"] }
-leptos-use = { version = "0.10", features = [] }
+leptos_router = { version = "0.6", features = ["csr"] }
+leptos-use = "0.10"
 reqwest = { version = "0.12", features = ["json"] }
 apb = { path = "../apb", features = ["unstructured"] }
 futures = "0.3.30"
diff --git a/web/src/lib.rs b/web/src/lib.rs
index 1d301b5f..12a2c93a 100644
--- a/web/src/lib.rs
+++ b/web/src/lib.rs
@@ -182,12 +182,12 @@ pub fn Activity(activity: serde_json::Value) -> impl IntoView {
 
 #[component]
 pub fn Timeline(
-	feed: ReadSignal<String>,
 	token: Signal<Option<String>>,
 ) -> impl IntoView {
+	let (timeline, set_timeline) = create_signal(format!("{BASE_URL}/inbox/page"));
 	let users : Arc<DashMap<String, serde_json::Value>> = Arc::new(DashMap::new());
 	let _users = users.clone(); // TODO i think there is syntactic sugar i forgot?
-	let items = create_resource(move || feed.get(), move |feed_url| {
+	let items = create_resource(move || timeline.get(), move |feed_url| {
 		let __users = _users.clone(); // TODO lmao this is meme tier
 		async move {
 			let mut req = reqwest::Client::new().get(feed_url);
@@ -234,29 +234,32 @@ pub fn Timeline(
 			out
 		}
 	});
-	move || match items.get() {
-		None => view! { <p>loading...</p> }.into_view(),
-		Some(data) => {
-			view! {
-				<div class="ml-1">
-					<For
-						each=move || data.clone() // TODO wtf this clone??
-						key=|x| x.id().unwrap_or("").to_string()
-						children=move |x: serde_json::Value| {
-							let actor = x.actor().extract().unwrap_or_else(||
-								 serde_json::Value::String(x.actor().id().unwrap_or_default())
-							);
-							view! {
-								<div class="post-card ml-1 mr-1">
-									<Actor object=actor />
-									<Activity activity=x />
-								</div>
-								<hr/ >
+	view! {
+		<div class="ml-1">
+			<TimelinePicker tx=set_timeline rx=timeline />
+			{move || match items.get() {
+				None => view! { <p>loading...</p> }.into_view(),
+				Some(data) => {
+					view! {
+						<For
+							each=move || data.clone() // TODO wtf this clone??
+							key=|x| x.id().unwrap_or("").to_string()
+							children=move |x: serde_json::Value| {
+								let actor = x.actor().extract().unwrap_or_else(||
+									 serde_json::Value::String(x.actor().id().unwrap_or_default())
+								);
+								view! {
+									<div class="post-card ml-1 mr-1">
+										<Actor object=actor />
+										<Activity activity=x />
+									</div>
+									<hr/ >
+								}
 							}
-						}
-					/>
-				</div>
-			}.into_view()
-		},
+						/>
+					}.into_view()
+				},
+			}}
+		</div>
 	}
 }
diff --git a/web/src/main.rs b/web/src/main.rs
index 67e8fb7f..fdb1825b 100644
--- a/web/src/main.rs
+++ b/web/src/main.rs
@@ -1,21 +1,21 @@
 use leptos::*;
+use leptos_router::*;
 
 use leptos_use::{use_cookie, utils::FromToStringCodec};
 use upub_web::{
-	LoginBox, PostBox, TimelinePicker, Timeline
+	LoginBox, PostBox, Timeline
 };
 
 fn main() {
 	_ = console_log::init_with_level(log::Level::Debug);
 	console_error_panic_hook::set_once();
 	let (cookie, set_cookie) = use_cookie::<String, FromToStringCodec>("token");
-	let (timeline, set_timeline) = create_signal("https://feditest.alemi.dev/users/test/inbox/page".to_string());
 	mount_to_body(
 		move || view! {
 			<nav class="w-100">
 				<p>
 					<code>μpub</code>
-					<small class="ml-1 mr-1" ><a class="clean" href="/" >micro social network, federated</a></small>
+					<small class="ml-1 mr-1" ><a class="clean" href="/web" >micro social network, federated</a></small>
 					/* TODO kinda jank with the float but whatever, will do for now */
 					<small style="float: right" ><a href="https://git.alemi.dev/upub.git" >src</a></small>
 				</p>
@@ -33,11 +33,15 @@ fn main() {
 						<hr />
 					</div>
 					<div class="col-main">
-						<TimelinePicker tx=set_timeline rx=timeline />
-						<Timeline
-							feed=timeline
-							token=cookie
-						/>
+						<Router>
+							<main>
+								<Routes>
+									<Route path="/" view=move || view! { <Timeline token=cookie /> } />
+									// <Route path="/user/:id" view=Actor />
+									// <Route path="/object/:id" view=Object />
+								</Routes>
+							</main>
+						</Router>
 					</div>
 				</div>
 			</div>