Merge pull request #66 from toyota-corolla0/2024-02-menu-component

refactor: new menu component
elsirion · Feb 21, 2024 · 35dede0 · 35dede0
2 parents 8fc3c87 + 410d792
commit 35dede0
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 103 deletions.
diff --git a/src/components/joined.rs b/src/components/joined.rs
@@ -2,15 +2,6 @@ use leptos::*;
 
 use crate::components::{Balance, Receive, ReceiveLn, Send, TxList};
 use crate::context::ClientContext;
-use crate::utils::empty_view;
-
-#[derive(Clone, PartialEq)]
-enum Tab {
-    TxList,
-    Send,
-    ReceiveLn,
-    Receive,
-}
 
 //
 // Joined component
@@ -37,101 +28,88 @@ pub fn Joined() -> impl IntoView {
             .unwrap_or_else(|| "Loading...".into())
     };
 
-    let (tab, set_tab) = create_signal(Tab::Receive);
+    let tab_change_signal = create_rw_signal(());
+
+    let menu_items = vec![
+        MenuItem {
+            title: "Transactions".into(),
+            view: view! { <TxList update_signal=move || tab_change_signal.get() /> },
+        },
+        MenuItem {
+            title: "Redeem".into(),
+            view: view! { <Receive /> },
+        },
+        MenuItem {
+            title: "LN Send".into(),
+            view: view! { <Send /> },
+        },
+        MenuItem {
+            title: "LN Receive".into(),
+            view: view! { <ReceiveLn /> },
+        },
+    ];
 
     view! {
-      <h1 class="font-heading text-gray-900 text-4xl font-semibold">{federation_label}</h1>
-      <Balance class="my-12" />
-      <ul
-        class="my-12 w-full flex flex-row"
-        >
-        <li class="w-1/4">
-        <button
-          on:click=move |_| {
-            set_tab.set(Tab::TxList);
-          }
-          class={move || format!("my-2 block w-full text-center
-          border-b-2 
-          py-4
-          ease
-          font-body font-semibold  
-          text-xl leading-tight hover:text-blue-500 {active}", 
-          active = if tab.get() == Tab::TxList  {"text-blue-400 border-blue-400"} else {"text-gray-400 border-gray-200 hover:border-gray-700"} )}
-          >
-            Transactions
-        </button>
-      </li>
-        <li class="w-1/4">
-        <button
-          on:click=move |_| {
-            set_tab.set(Tab::Receive);
-          }
-          class={move || format!("my-2 block w-full text-center
-          border-b-2 
-          py-4
-          ease
-          font-body font-semibold  
-          text-xl leading-tight hover:text-blue-500 {active}", 
-          active = if tab.get() == Tab::Receive  {"text-blue-400 border-blue-400"} else {"text-gray-400 border-gray-200 hover:border-gray-700"} )}
+        <h1 class="font-heading text-gray-900 text-4xl font-semibold">{federation_label}</h1>
+        <Balance class="my-12" />
+        <Menu
+            items=menu_items
+            on_tab_change=move || tab_change_signal.set(())
+            initial_item=1
+        />
+    }
+}
 
-          >Redeem
-        </button>
-      </li>
-        <li class="w-1/4">
-          <button
-            on:click=move |_| {
-              set_tab.set(Tab::Send);
-            }
-            class={move || format!("my-2 block w-full text-center
-            border-b-2 
-            py-4
-            ease
-            font-body font-semibold  
-            text-xl leading-tight hover:text-blue-500 {active}", 
-            active = if tab.get() == Tab::Send {"text-blue-400 border-blue-400"} else {"text-gray-400 border-gray-200 hover:border-gray-700"} )}
-            >LN Send
-          </button>
-        </li>
-        <li class="w-1/4">
-          <button
-            on:click=move |_| {
-              set_tab.set(Tab::ReceiveLn);
-            }
-            class={move || format!("my-2 block w-full text-center
-            border-b-2 
-            py-4
-            ease
-            font-body font-semibold  
-            text-xl leading-tight hover:text-blue-500 {active}", 
-            active = if tab.get() == Tab::ReceiveLn  {"text-blue-400 border-blue-400"} else {"text-gray-400 border-gray-200 hover:border-gray-700"} )}
-          >LN Receive</button>
-        </li>
-      </ul>
+struct MenuItem {
+    title: String,
+    view: View,
+}
+
+#[component]
+fn Menu<F>(
+    items: Vec<MenuItem>,
+    on_tab_change: F,
+    #[prop(default = 0)] initial_item: usize,
+) -> impl IntoView
+where
+    F: Fn() + Copy + 'static,
+{
+    let (tab, set_tab) = create_signal(initial_item);
 
-      <Show
-          when=move || tab.get() == Tab::Send
-          fallback=|| empty_view()
-          >
-          <Send />
-      </Show>
-      <Show
-          when=move || tab.get() == Tab::Receive
-          fallback=|| empty_view()
-          >
-          <Receive />
-      </Show>
-      <Show
-          when=move || tab.get() == Tab::ReceiveLn
-          fallback=|| empty_view()
-          >
-          <ReceiveLn />
-      </Show>
-      <Show
-          when=move || tab.get() == Tab::TxList
-          fallback=|| empty_view()
-          >
-          <TxList update_signal=move || {tab.get();} />
-      </Show>
+    view! {
+        <ul class="my-12 w-full flex flex-row">
+            {
+                items.iter().enumerate().map(|(i, item)| {
+                    view! {
+                        <li class="flex-1">
+                            <button
+                                on:click=move |_| {
+                                    set_tab.set(i);
+                                    on_tab_change();
+                                }
+                                class={move || format!("my-2 block w-full text-center
+                                    border-b-2 py-4 ease font-body font-semibold
+                                    text-xl leading-tight hover:text-blue-500 {active}",
+                                    active = if tab.get() == i {"text-blue-400 border-blue-400"}
+                                        else {"text-gray-400 border-gray-200 hover:border-gray-700"})}
+                            >
+                                { item.title.to_owned() }
+                            </button>
+                        </li>
+                    }
+                }).collect_view()
+            }
+        </ul>
+        {
+            items.iter().enumerate().map(|(i, item)| {
+                let view = item.view.to_owned();
 
+                view! {
+                    <Show when=move || tab.get() == i>
+                        { view.to_owned() }
+                    </Show>
+                }
+            }).collect_view()
+        }
     }
 }
diff --git a/src/components/tx_list.rs b/src/components/tx_list.rs
@@ -14,9 +14,20 @@ where
 {
     let ClientContext { client, .. } = expect_context::<ClientContext>();
 
-    let tx_list_resource = create_resource(update_signal, move |()| async move {
-        let client = client.get_value();
-        client.list_transactions().await.expect("list tx failed")
+    let tx_list_resource = create_resource(
+        || (),
+        move |()| async move {
+            let client = client.get_value();
+            client.list_transactions().await.expect("list tx failed")
+        },
+    );
+
+    create_effect(move |p| {
+        update_signal();
+
+        if matches!(p, Some(_)) {
+            tx_list_resource.refetch()
+        }
     });
 
     view! {