feat(ui): send add subscription request

VOD-Venus · Jan 13, 2025 · cc32db4 · cc32db4
1 parent 8ab0f0e
commit cc32db4
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 38 deletions.
diff --git a/venus-ui/src/api.rs b/venus-ui/src/api.rs
@@ -1,10 +1,15 @@
-use gloo::net::http::Request;
+use core::fmt;
+
+use gloo::{
+    net::http::Request,
+    storage::{LocalStorage, Storage},
+};
 use leptos::prelude::on_cleanup;
 use send_wrapper::SendWrapper;
 use serde::{de::DeserializeOwned, Deserialize, Serialize};
 use web_sys::wasm_bindgen::JsValue;
 
-use crate::utils::error_to_string;
+use crate::{consts::USER_KEY, utils::error_to_string, User};
 
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct BaseResponse<T> {
@@ -35,9 +40,17 @@ where
         }
     });
 
+    let user = LocalStorage::get::<User>(USER_KEY).unwrap_or_default();
+    let token = user.token;
+    let token_type = user.token_type;
+
     let request = Request::post(address)
         .abort_signal(abort_signal.as_ref())
         .header("Content-Type", "application/json")
+        .header(
+            "Authorization",
+            format!("{} {}", token_type, token).as_str(),
+        )
         .body(body)
         .map_err(error_to_string)?
         .send()
@@ -47,3 +60,16 @@ where
         Err(err) => Err(err.to_string()),
     }
 }
+
+pub enum RequestApi {
+    Login,
+    AddSubscription,
+}
+impl fmt::Display for RequestApi {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Self::Login => write!(f, "/api/user/login"),
+            Self::AddSubscription => write!(f, "/api/subscription/add"),
+        }
+    }
+}
diff --git a/venus-ui/src/components/home_page/subscripiton.rs b/venus-ui/src/components/home_page/subscripiton.rs
@@ -1,14 +1,19 @@
 use crate::{
-    api::BaseResponse,
+    api::{BaseResponse, RequestApi},
     components::subscription_card::{SubCardForm, SubscriptionCard},
+    consts::USER_KEY,
     utils::error_to_string,
+    User,
 };
-use leptos::prelude::*;
+use gloo::storage::{LocalStorage, Storage};
+use leptos::{logging, prelude::*};
+use web_sys::MouseEvent;
 
 async fn add_subscription(subs_form: SubCardForm) -> Result<BaseResponse<()>, String> {
     use crate::api::post;
 
-    let address = format!("{}/api/subscription/add", "localhost:4001");
+    let user = LocalStorage::get::<User>(USER_KEY).unwrap_or_default();
+    let address = format!("{}{}", user.server, RequestApi::AddSubscription);
     post(
         &address,
         serde_json::to_string(&subs_form).map_err(error_to_string)?,
@@ -24,6 +29,28 @@ pub fn Subscription() -> impl IntoView {
         url: "".into(),
     });
 
+    let form_ref: NodeRef<leptos::html::Form> = NodeRef::new();
+    let add_action: Action<SubCardForm, Result<BaseResponse<()>, String>, SyncStorage> =
+        Action::new_unsync(|form: &SubCardForm| add_subscription(form.clone()));
+    let add_loading = add_action.pending();
+    let add_result = add_action.value();
+    let handle_submit = move |e: MouseEvent| {
+        if add_loading() {
+            return;
+        }
+        e.prevent_default();
+        let form_ref = form_ref.get().expect("form element is not rendered");
+        let valided = form_ref.check_validity();
+        if !valided {
+            form_ref.report_validity();
+            return;
+        }
+        add_action.dispatch(form());
+    };
+    Effect::new(move |_| {
+        logging::log!("test {:?}", add_result.get());
+    });
+
     view! {
         <div class="py-4">
             <div class="pb-4">
@@ -35,7 +62,14 @@ pub fn Subscription() -> impl IntoView {
                     <button class="mr-2 btn btn-sm" onclick="add_modal.showModal()">
                         Add
                     </button>
-                    <SubscriptionCard form=form set_form=set_form on_ok=|_| {} on_close=|_| {} />
+                    <SubscriptionCard
+                        form=form
+                        set_form=set_form
+                        on_ok=handle_submit
+                        on_close=|_| {}
+                        node_ref=form_ref
+                        loading=add_loading
+                    />
 
                     <button class="btn btn-sm">Update All</button>
                 </div>

diff --git a/venus-ui/src/components/subscription_card.rs b/venus-ui/src/components/subscription_card.rs
@@ -14,11 +14,14 @@ pub struct SubCardForm {
 #[component]
 pub fn SubscriptionCard(
     form: ReadSignal<SubCardForm>,
+    /// on form change
     set_form: WriteSignal<SubCardForm>,
     /// Click the confirm button
     on_ok: impl FnMut(MouseEvent) + 'static,
     /// Click the close button
     on_close: impl FnMut(MouseEvent) + 'static,
+    loading: Memo<bool>,
+    node_ref: NodeRef<leptos::html::Form>,
 ) -> impl IntoView {
     enum FormTarget {
         Name,
@@ -40,39 +43,48 @@ pub fn SubscriptionCard(
             <div class="modal-box">
                 <h3 class="text-lg font-bold">Subscription</h3>
 
-                <div class="py-4 flex flex-col gap-4">
-                    <label class="input input-bordered flex items-center gap-2">
-                        Name
-                        <input
-                            type="text"
-                            class="grow"
-                            placeholder="rua"
-                            prop:value=move || form().name
-                            on:change=handle_change(FormTarget::Name)
-                        />
-                    </label>
-                    <label class="input input-bordered flex items-center gap-2">
-                        URL
-                        <input
-                            type="text"
-                            class="grow"
-                            placeholder="https://rua.rua"
-                            prop:value=move || form().url
-                            on:change=handle_change(FormTarget::Url)
-                        />
-                    </label>
-                </div>
+                <form method="dialog" node_ref=node_ref>
+                    <div class="py-4 flex flex-col gap-4">
+                        <label class="input input-bordered flex items-center gap-2">
+                            Name
+                            <input
+                                type="text"
+                                class="grow"
+                                placeholder="rua"
+                                prop:value=move || form().name
+                                on:change=handle_change(FormTarget::Name)
+                                required
+                            />
+                        </label>
+                        <label class="input input-bordered flex items-center gap-2">
+                            URL
+                            <input
+                                type="text"
+                                class="grow"
+                                placeholder="https://rua.rua"
+                                prop:value=move || form().url
+                                on:change=handle_change(FormTarget::Url)
+                                required
+                            />
+                        </label>
+                    </div>
 
-                <div class="modal-action">
-                    <button class="btn btn-primary" on:click=on_ok>
-                        Confirm
-                    </button>
-                    <form method="dialog">
+                    <div class="modal-action">
+                        <button
+                            class="btn btn-primary"
+                            on:click=on_ok
+                            disabled=move || loading.get()
+                        >
+                            <Show when=move || loading()>
+                                <span class="loading loading-spinner"></span>
+                            </Show>
+                            Confirm
+                        </button>
                         <button class="btn" on:click=on_close>
                             Close
                         </button>
-                    </form>
-                </div>
+                    </div>
+                </form>
             </div>
         </dialog>
     }

diff --git a/venus-ui/src/pages/login.rs b/venus-ui/src/pages/login.rs
@@ -1,10 +1,9 @@
-use gloo::storage::{LocalStorage, Storage};
 use leptos::web_sys::MouseEvent;
 use leptos::{ev::Event, logging, prelude::*};
 use leptos_router::hooks::use_navigate;
 use serde::{Deserialize, Serialize};
 
-use crate::api::BaseResponse;
+use crate::api::{BaseResponse, RequestApi};
 use crate::hooks::use_global_ui;
 use crate::User;
 use crate::{utils::error_to_string, Notification, NotificationKind};
@@ -33,7 +32,7 @@ struct LoginBody {
 async fn login(login_form: LoginForm) -> Result<LoginResponse, String> {
     use crate::api::post;
 
-    let address = format!("{}/api/user/login", login_form.server);
+    let address = format!("{}{}", login_form.server, RequestApi::Login);
     let login_body = LoginBody {
         username: login_form.username,
         password: login_form.password,
@@ -96,6 +95,7 @@ pub fn Login() -> impl IntoView {
     let login_loading = login_action.pending();
     let login_result = login_action.value();
     let navigate = use_navigate();
+    // after submit
     Effect::new(move |_| {
         let login_handler = || -> anyhow::Result<()> {
             let login_result = login_result.read();