end of using REFS

src/app.rs

@@ -1,8 +1,9 @@
 use wasm_bindgen::prelude::*;
+use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
 use yew_router::prelude::*;
 
-use crate::views::*;
+use crate::{config_settings::init_config, views::*};
 
 #[wasm_bindgen]
 extern "C" {
@@ -25,7 +26,7 @@ pub enum Route {
 
 
 #[function_component(App)]
-pub fn app() -> Html {    
+pub fn app() -> Html { 
     html! {
         <BrowserRouter>
             <nav::Nav/>

src/config_settings.rs

@@ -1,37 +1,32 @@
-use std::fs;
 use serde::{Deserialize, Serialize};
+use serde_wasm_bindgen::to_value;
+use wasm_bindgen::prelude::*;
 
-#[derive(Debug, Deserialize, Serialize)]
+#[derive(Default, Clone, Serialize, Deserialize)]
 pub struct Config {
     pub cslol_dir: String,
     pub wad_dir: String,
     pub extract_dir: String,
 }
 
-pub fn init_config() {
-    if fs::metadata("config.toml").is_err() {
-        let config = Config {
-            cslol_dir: "".to_string(),
-            wad_dir: "C:\\Riot Games\\League of Legends\\Game\\DATA\\FINAL\\Champions".to_string(),
-            extract_dir: "".to_string(),
-        };
-        write_config(&config);
-    }
+#[wasm_bindgen(module = "/public/glue.js")]
+extern "C" {
+    #[wasm_bindgen(js_name = init_config_js, catch)]
+    pub async fn init_config() -> Result<JsValue, JsValue>;
+
+    #[wasm_bindgen(js_name = write_config_js, catch)]
+    pub async fn write_config_js(config: JsValue) -> Result<JsValue, JsValue>;
+
+    #[wasm_bindgen(js_name = load_config_js, catch)]
+    pub async fn load_config_js() -> Result<JsValue, JsValue>;
 }
 
-pub fn load_config() -> Config {
-    let config = fs::read_to_string("config.toml")
-        .expect("Failed to read config.toml file");
-
-    toml::from_str(&config)
-        .expect("Failed to parse config.toml file")
+pub async fn write_config(config: Config) -> Result<JsValue, JsValue> {
+    write_config_js(to_value(&config).unwrap()).await
 }
 
-pub fn write_config(config: &Config) {
-    let config_content = toml::to_string(config)
-        .expect("Failed to serialize config");
-
-    fs::write("config.toml", config_content)
-        .expect("Failed to write to config.toml file");
+pub async fn load_config() -> Result<Config, JsValue> {
+    Ok(serde_wasm_bindgen::from_value(load_config_js().await.unwrap()).unwrap())
 }
 
+

src/main.rs

@@ -1,6 +1,6 @@
 mod app;
 mod views;
-mod extractor;
+// mod extractor;
 mod config_settings;
 
 use app::App;

src/views/settings.rs

@@ -1,116 +1,90 @@
-use web_sys::HtmlInputElement;
-use yew::prelude::*;
+use std::{cell::RefCell, rc::Rc};
+
 use crate::config_settings::*;
-pub enum Msg {
-    UpdateCSLoLDir(String),
-    UpdateWadDir(String),
-    UpdateExtractDir(String),
-    Submit,
-}
+use wasm_bindgen_futures::spawn_local;
+use web_sys::{console, HtmlInputElement};
+use yew::prelude::*;
 
-pub type Settings = Config;
+#[function_component(Settings)]
+pub fn settings() -> Html {
 
+    let config = Rc::new(RefCell::new(Config::default()));
+    {
+        let config = config.clone();
 
-impl Component for Settings {
-    type Message = Msg;
-    type Properties = ();
+        use_effect(move || {
+            spawn_local(async move {
+                init_config().await.unwrap();
+                *config.borrow_mut() = load_config().await.unwrap();
+                console::log_1(&config.borrow().cslol_dir.clone().into());
+            })
+        })
 
-    fn create(_ctx: &Context<Self>) -> Self {
-        init_config();
-        load_config()
+        // spawn_local(async move {
+        //     init_config().await.unwrap();
+        //     *config.borrow_mut() = load_config().await.unwrap();
+        //     console::log_1(&config.borrow().cslol_dir.clone().into());
+        // })
     }
 
-    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            Msg::UpdateCSLoLDir(value) => {
-                self.cslol_dir = value;
-                true
-            },
-            Msg::UpdateWadDir(value) => {
-                self.wad_dir = value;
-                true
-            },
-            Msg::UpdateExtractDir(value) => {
-                self.extract_dir = value;
-                true
-            },
-            Msg::Submit => {
-                write_config(&self);
-                false
-            }
-        }
-    }
+    let cslol_dir_ref = use_node_ref();
+    let wad_dir_ref = use_node_ref();
+    let extract_dir_ref = use_node_ref();
 
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        html! {
-            <div class="content">
-                <h2>{"Settings"}</h2>
-                <form onsubmit={ctx.link().callback(|e: SubmitEvent| {
-                    e.prevent_default();
-                    Msg::Submit
-                })}>
-                    <div class="option">
+    let on_submit = {
+        let cslol_dir_ref = cslol_dir_ref.clone();
+        let wad_dir_ref = wad_dir_ref.clone();
+        let extract_dir_ref = extract_dir_ref.clone();
+
+        Callback::from(move |event: SubmitEvent| {
+            event.prevent_default();
+
+            let cslol_dir = cslol_dir_ref.cast::<HtmlInputElement>().unwrap().value();
+            let wad_dir = wad_dir_ref.cast::<HtmlInputElement>().unwrap().value();
+            let extract_dir = extract_dir_ref.cast::<HtmlInputElement>().unwrap().value();
+
+            let config = Config {
+                cslol_dir,
+                wad_dir,
+                extract_dir,
+            };
+            spawn_local(async move {
+                write_config(config).await.unwrap();
+            });
+        })
+    };
+    
+    let mut tconfig = config.try_borrow().unwrap().clone();
+    console::log_1(&tconfig.cslol_dir.clone().into());
+    console::log_1(&"IM MAD".into());
+
+    html! {
+        <div class="content">
+            <h2>{"Settings"}</h2>
+            <div class="option">
+                <form onsubmit={on_submit}>
+                    <div>
                         <label for="cslol_dir">{"Location of CSLoL"}</label>
                         <br/>
-                        <input type="text"
-                            id="cslol_dir"
-                            oninput={ctx.link().callback(|e: InputEvent| Msg::UpdateCSLoLDir(e.target_unchecked_into::<HtmlInputElement>().value()))}
-                            value={self.cslol_dir.clone()} />
+                        <input id="cslol_dir" ref={cslol_dir_ref} value={tconfig.cslol_dir.clone()}/>
                     </div>
-                    <div class="option">
+
+                    <div>
                         <label for="wad_dir">{"Custom location of Champion Wads"}</label>
                         <br/>
-                        <input type="text"
-                            id="wad_dir"
-                            oninput={ctx.link().callback(|e: InputEvent| Msg::UpdateWadDir(e.target_unchecked_into::<HtmlInputElement>().value()))}
-                            value={self.wad_dir.clone()} />
+                        <input id="wad_dir" ref={wad_dir_ref} />
                     </div>
-                    <div class="option">
+
+                    <div>
                         <label for="extract_dir">{"Custom location to Extract to"}</label>
                         <br/>
-                        <input type="text"
-                            id="extract_dir"
-                            oninput={ctx.link().callback(|e: InputEvent| Msg::UpdateExtractDir(e.target_unchecked_into::<HtmlInputElement>().value()))}
-                            value={self.extract_dir.clone()} />
-                    </div>
-                    <div class="option">
-                        <button type="submit">{"Save Settings"}</button>
+                        <input id="extract_dir" ref={extract_dir_ref} />
                     </div>
+
+
+                    <button type="submit">{"Save Settings"}</button>
                 </form>
             </div>
-        }
+        </div>
     }
 }
-
-
-// #[function_component(Settings)]
-// pub fn settings() -> Html {
-//     html! {
-//         <div class="content">
-//         <h2>{"Settings"}</h2>
-//         <form action="/write-settings" method="post">
-//             <div class="option">
-//                 <label for="cslol_dir">{"Location of CSLoL"}</label>
-//                 <br/>
-//                 <input type="text" name="cslol_dir" id="cslol_dir" value="{{ config.cslol_dir }}"/>
-//             </div>
-
-//             <div class="option">
-//                 <label for="wad_dir">{"Custom location of Champion Wads"}</label>
-//                 <br/>
-//                 <input type="text" name="wad_dir" id="wad_dir" value="{{ config.wad_dir }}"/>
-//             </div>
-            
-//             <div class="option">
-//                 <label for="extract_dir">{"Custom location to Extract to"}</label>
-//                 <br/>
-//                 <input type="text" name="extract_dir" id="extract_dir" value="{{ config.extract_dir }}"/>
-//             </div>
-
-//             <div class="option">
-//                 <button type="submit">{"Save Settings"}</button>
-//             </div>
-//         </form>
-//     </div>
-//     }
-// }