feat: support refresh list after uploading

client/src/component/bucket.rs

@@ -2,7 +2,7 @@ use js_sys::Promise;
 use serde_json::{Value};
 use wasm_bindgen::JsValue;
 use wasm_bindgen_futures::{spawn_local, JsFuture};
-use yew::{prelude::function_component, Html, html, use_context, use_state, use_effect_with};
+use yew::{prelude::function_component, Html, html, use_context, use_state, use_effect_with, Properties};
 use web_sys::{console};
 use serde_wasm_bindgen::from_value;
 use serde::{Deserialize};
@@ -20,37 +20,54 @@ pub struct  BucketInfo {
     Contents: Vec<File>,
 }
 
+#[derive(Properties, PartialEq)]
+pub struct BucketProps {
+    pub refresh_index: usize
+}
 
 #[function_component(Bucket)]
-pub fn bucket() -> Html {
+pub fn bucket(props: &BucketProps) -> Html {
     let list_fetch_in_content = use_context::<AppContext>()
         .expect("no ctx list_fetch_in_content found").list_bucket;
     let list = use_state(|| None);
-    let fetched = use_state(|| false);
+    let fetched = use_state(|| 0);
+    let is_loading = use_state(|| false);
 
     {
         let list_fetch_in_content = list_fetch_in_content.clone();
         let list_clone = list.clone();
         let fetched_clone = fetched.clone();
+        let is_loading_clone = is_loading.clone();
+        let update_list = move |&flag: &usize| {
+            let fetched_clone = fetched.clone();
+
+            let cleanup = || {};
+            if flag == 1 {
+                return cleanup;
+            }
+            is_loading_clone.set(true);
+            spawn_local(async move {
+                let result = list_fetch_in_content.call0(&JsValue::NULL).unwrap();
+                let promise = Promise::from(result);
+                let data = JsFuture::from(promise).await.unwrap();
+                console::log_2(&JsValue::from_str("data"), &data);
+                let info: BucketInfo = from_value(data).unwrap();
+                list_clone.set(Some(info.Contents));
+                fetched_clone.set(1);
+                is_loading_clone.set(false);
+            });
+            cleanup
+        };
+
         use_effect_with(
-            *fetched,
-            move |&fetched| {
-                let cleanup = || {};
-                if fetched {
-                    return cleanup;
-                }
-                spawn_local(async move {
-                    let result = list_fetch_in_content.call0(&JsValue::NULL).unwrap();
-                    let promise = Promise::from(result);
-                    let data = JsFuture::from(promise).await.unwrap();
-                    console::log_2(&JsValue::from_str("data"), &data);
-                    let info: BucketInfo = from_value(data).unwrap();
-                    list_clone.set(Some(info.Contents));
-                    fetched_clone.set(true);
-                });
-                cleanup
-            },
-        )
+            *fetched_clone.clone(),
+            update_list.clone(),
+        );
+
+        use_effect_with(
+            props.refresh_index,
+            update_list.clone(),
+        );
     }
 
     let list = list.as_ref();
@@ -59,7 +76,9 @@ pub fn bucket() -> Html {
             <h2>{"Bucket"}</h2>
             <ul>
             {
-                if list.is_some() {
+                if *is_loading {
+                    html! { "loading" }
+                } else if list.is_some() {
                     html! {
                         <table>
                             <thead>
@@ -74,8 +93,8 @@ pub fn bucket() -> Html {
                         </table>
 
                     }
-                } else {
-                    html! { "loading" }
+                }  else {
+                    html! { "no data" }
                 }
             }
 

client/src/container/home.rs

@@ -9,7 +9,7 @@ use crate::component::bucket::Bucket;
 use crate::constants::app::AppContext;
 
 pub struct HomeInner {
-    value: i64,
+    refresh_index: i64,
     upload_result: Option<JsValue>,
 }
 
@@ -29,17 +29,18 @@ impl Component for HomeInner {
     type Properties = AppProps;
 
     fn create(ctx: &Context<Self>) -> Self {
-        HomeInner { value: 0, upload_result: None }
+        HomeInner { refresh_index: 1, upload_result: None }
     }
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::AddOne => {
-                self.value += 1;
+                self.refresh_index += 1;
                 true
             },
             Msg::Upload(value) => {
                 self.upload_result = Some(value);
+                self.refresh_index += 1;
                 true
             },
             Msg::FileChange(e) => {
@@ -72,7 +73,7 @@ impl Component for HomeInner {
         html! {
             <div>
               <div class="hidden">
-                <p>{ "count " } { self.value } </p>
+                <p>{ "refresh index " } { self.refresh_index } </p>
                 <button onclick={link.callback(|_| Msg::AddOne)}>{ "+1" }</button>
                 <p>{ "Hello world!" }</p>
                 <form class="hidden" method="post" enctype="multipart/form-data" action="/upload">
@@ -81,7 +82,7 @@ impl Component for HomeInner {
                 </form>
                 <Graph/>
               </div>
-              <Bucket/>
+              <Bucket refresh_index={self.refresh_index as usize}/>
               <h2>{"Upload"}</h2>
               <input type="file" onchange={link.callback(|e| Msg::FileChange(e))}/>
               <p>