From eba20abf5aafb8b95d03d5cbdb4a47bf02de8e3e Mon Sep 17 00:00:00 2001
From: ryan <ryannganga13325@gmail.com>
Date: Mon, 17 Feb 2025 17:04:43 +0300
Subject: [PATCH] feat(app): add router and dynamic item loading to app
 component

---
 src/app.rs | 39 ++++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/app.rs b/src/app.rs
index 972acba..16d9502 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -1,5 +1,7 @@
 use leptos::*;
 use leptos_meta::*;
+use leptos_router::*; 
+use leptos::logging::log;
 use crate::components::items_list::ItemsList;
 use crate::models::item::Item;
 use crate::nostr::NostrClient;
@@ -26,13 +28,36 @@ pub fn App() -> impl IntoView {
             }
         }
     });
-
     view! {
-        <Stylesheet href="/assets/style.css" />
-        <Stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
-        <div>
-            <h1>{ "CompareWare" }</h1>
-            <ItemsList items=items_signal set_items=set_items />
-        </div>
+        <Router>
+            <Routes>
+                <Route path="/:url?" view=move || {
+                    let params = use_params_map();
+                    let url = move || params.with(|params| params.get("url").cloned().unwrap_or_default());
+                    
+                    // This effect will re-run when URL changes
+                    create_effect(move |_| {
+                        let current_url = url();
+                        spawn_local(async move {
+                            // Load items for new URL
+                            match load_items_from_db(&current_url).await {
+                                Ok(loaded_items) => {
+                                    set_items.set(loaded_items);
+                                }
+                                Err(err) => log!("Error loading items: {}", err),
+                            }
+                        });
+                    });
+                        view! {
+                            <Stylesheet href="/assets/style.css" />
+                            <Stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
+                            <div>
+                                <h1>{ "CompareWare" }</h1>
+                                <ItemsList items=items_signal set_items=set_items />
+                            </div>
+                        }
+                }/>
+            </Routes>
+        </Router>
     }
 }