feat: add listBucket function to wasm

client/Cargo.toml

@@ -19,6 +19,7 @@ serde_json = "1.0.78"
 wasm-bindgen-futures = "0.4.29"
 yew-router = "0.16.0"
 serde = "1.0.136"
+serde-wasm-bindgen = "0.6.5"
 
 [dependencies.web-sys]
 version = "0.3.57"

client/src/app.rs

@@ -22,11 +22,12 @@ pub fn App(props: &AppProps) -> Html {
         <ContextProvider<AppContext> context={AppContext {
             user: props.user.clone(),
             upload_file: props.upload_file.clone(),
+            list_bucket: props.list_bucket.clone(),
         }}>
             <BrowserRouter>
                 <Header/>
                 <Switch<Route> render={Switch::render(switch)} />
             </BrowserRouter>
         </ContextProvider<AppContext>>
     }
-}
+}

client/src/component/bucket.rs

@@ -0,0 +1,63 @@
+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}, use_context, use_effect, use_state, use_effect_with_deps};
+use web_sys::{console};
+use serde_wasm_bindgen::from_value;
+use serde::{Deserialize};
+
+use crate::constants::app::AppContext;
+
+#[derive(Deserialize)]
+pub struct File {
+    Key: Value,
+    Size: Value,
+}
+
+#[derive(Deserialize)]
+pub struct  BucketInfo {
+    Contents: Vec<File>,
+}
+
+
+#[function_component(Bucket)]
+pub fn bucket() -> 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 list_fetch_in_content = list_fetch_in_content.clone();
+        let list_clone = list.clone();
+        let fetched_clone = fetched.clone();
+        use_effect_with_deps(
+            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
+        )
+    }
+
+    html! {
+        <div>
+            <h2>{"Bucket"}</h2>
+            <ul>
+            </ul>
+        </div>
+    }
+}

client/src/component/me.rs

@@ -3,7 +3,7 @@ use yew::{prelude::{function_component, html}, use_context};
 use js_sys::{JSON::stringify_with_replacer_and_space};
 use yew_router::prelude::{Redirect};
 use wasm_bindgen::{JsValue};
-use yew::{use_state, use_effect_with_deps};
+use yew::{use_state, use_effect};
 
 use crate::{constants::app::Route, helpers::{request::auth::fetch_user, user::parse_user}};
 
@@ -17,8 +17,8 @@ pub fn me() -> Html {
     {
         let user_state = user_state.clone();
         let fetched_clone = fetched.clone();
-        use_effect_with_deps(
-            move |_| {
+        use_effect(
+            move || {
                 spawn_local(async move {
                     let user = fetch_user().await.unwrap();
                     let user = parse_user(user);
@@ -27,7 +27,6 @@ pub fn me() -> Html {
                 });
                 || {}
             },
-            *fetched,
         )
     }
     match &*fetched {
@@ -47,4 +46,4 @@ pub fn me() -> Html {
             <pre>{stringify_with_replacer_and_space(&user_obj, &JsValue::NULL, &JsValue::from_f64(4.0)).unwrap()}</pre>
         </div>
     }
-}
+}

client/src/component/mod.rs

@@ -2,6 +2,7 @@ pub mod graph;
 mod header;
 mod login;
 mod me;
+pub mod bucket;
 
 pub use header::*;
 pub use login::*;

client/src/constants/app.rs

@@ -7,12 +7,14 @@ use crate::constants::auth::User;
 #[derive(Clone, Debug, PartialEq)]
 pub struct AppContext {
     pub upload_file: Function,
+    pub list_bucket: Function,
     pub user: Option<User>,
 }
 
 #[derive(Properties, PartialEq)]
 pub struct AppProps {
     pub upload_file: Function,
+    pub list_bucket: Function,
     pub user: Option<User>,
 }
 
@@ -27,4 +29,4 @@ pub enum Route {
     #[not_found]
     #[at("/404")]
     NotFound,
-}
+}

client/src/container/home.rs

@@ -6,6 +6,7 @@ use yew::{prelude::*, virtual_dom::VNode,function_component};
 use yew_router::prelude::*;
 
 use crate::component::graph::Graph;
+use crate::component::bucket::Bucket;
 use crate::constants::app::AppContext;
 
 pub struct HomeInner {
@@ -81,6 +82,7 @@ impl Component for HomeInner {
                 </form>
                 <Graph/>
               </div>
+              <Bucket/>
               <h2>{"Upload"}</h2>
               <input type="file" onchange={link.callback(|e| Msg::FileChange(e))}/>
               <p>

client/src/index.js

@@ -55,7 +55,7 @@ function handleFileChange(e) {
   })
 }
 
-function listFolder() {
+function listBucket() {
   return new Promise((resolve, reject) => {
     cos.getBucket({
       Bucket: 'kimi-1251502833', /* 填入您自己的存储桶，必须字段 */
@@ -75,11 +75,12 @@ function listFolder() {
   })
 }
 
-window.listFolder = listFolder
+window.listBucket = listBucket
 
 wasm().then(({ run_app }) => {
   run_app({
     handleFileChange,
+    listBucket,
     user: window.app.user,
   });
 });

client/src/lib.rs

@@ -31,9 +31,14 @@ pub fn run_app(props: Object) -> Result<(), JsValue> {
     let document = window.document().expect("document not existed");
     let element = document.get_element_by_id("app").unwrap_throw();
     let upload_file: Function = Reflect::get(&props, &JsValue::from_str("handleFileChange")).unwrap().into();
+    let list_bucket: Function = Reflect::get(&props, &JsValue::from_str("listBucket")).unwrap().into();
     let user_obj: JsValue = Reflect::get(&props, &JsValue::from_str("user")).unwrap();
     let user: Option<User> = helpers::user::parse_user(user_obj);
-    yew::start_app_with_props_in_element::<app::Main>(element, AppProps { upload_file, user });
+    yew::start_app_with_props_in_element::<app::Main>(element, AppProps {
+        upload_file,
+        list_bucket,
+        user,
+    });
 
     Ok(())
 }