svg2gcode-web: fix yewdux root problem & bump version

sameer · Feb 9, 2024 · 47e0301 · 47e0301
1 parent 8ecce82
commit 47e0301
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 78 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/web/Cargo.toml b/web/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "svg2gcode-web"
-version = "0.0.6"
+version = "0.0.7"
 authors = ["Sameer Puri <crates@purisa.me>"]
 edition = "2021"
 description = "Convert vector graphics to g-code for pen plotters, laser engravers, and other CNC machines"

diff --git a/web/src/main.rs b/web/src/main.rs
@@ -26,8 +26,8 @@ use util::*;
 use yewdux::{prelude::use_store, use_dispatch, YewduxRoot};
 use zip::{write::FileOptions, CompressionMethod, ZipWriter};
 
-#[function_component]
-fn App(_props: &()) -> Html {
+#[function_component(App)]
+fn app() -> Html {
     let generating = use_state_eq(|| false);
     let generating_setter = generating.setter();
 
@@ -163,87 +163,94 @@ fn App(_props: &()) -> Html {
     };
 
     html! {
-        <YewduxRoot>
-            <div class="container">
-                <div class={classes!("column")}>
-                    <h1>
-                        { "svg2gcode" }
-                    </h1>
-                    <p>
-                        { env!("CARGO_PKG_DESCRIPTION") }
-                    </p>
-                    <SvgForm/>
-                    <ButtonGroup>
-                        <Button
-                            title="Generate G-Code"
-                            style={ButtonStyle::Primary}
-                            loading={*generating}
-                            icon={
-                                html_nested! (
-                                    <Icon name={IconName::Download} />
-                                )
-                            }
-                            disabled={generate_disabled}
-                            onclick={generate_onclick}
-                        />
-                        <HyperlinkButton
-                            title="Settings"
-                            style={ButtonStyle::Default}
-                            icon={IconName::Edit}
-                            href="#settings"
-                        />
-                    </ButtonGroup>
-                    <div class={classes!("card-container", "columns")}>
-                        {
-                            for app_store.svgs.iter().enumerate().map(|(i, svg)| {
-                                let svg_base64 = base64::engine::general_purpose::STANDARD_NO_PAD.encode(svg.content.as_bytes());
-                                let remove_svg_onclick = app_dispatch.reduce_mut_callback(move |app| {
-                                    app.svgs.remove(i);
-                                });
-                                let footer = html!{
-                                    <Button
-                                        title="Remove"
-                                        style={ButtonStyle::Primary}
-                                        icon={
-                                            html_nested!(
-                                                <Icon name={IconName::Delete} />
-                                            )
-                                        }
-                                        onclick={remove_svg_onclick}
-                                    />
-                                };
-                                html!{
-                                    <div class={classes!("column", "col-6", "col-xs-12")}>
-                                        <Card
-                                            title={svg.filename.clone()}
-                                            img={html_nested!(
-                                                <img class="img-responsive" src={format!("data:image/svg+xml;base64,{}", svg_base64)} alt={svg.filename.clone()} />
-                                            )}
-                                            footer={footer}
-                                        />
-                                    </div>
-                                }
-                            })
+        <div class="container">
+            <div class={classes!("column")}>
+                <h1>
+                    { "svg2gcode" }
+                </h1>
+                <p>
+                    { env!("CARGO_PKG_DESCRIPTION") }
+                </p>
+                <SvgForm/>
+                <ButtonGroup>
+                    <Button
+                        title="Generate G-Code"
+                        style={ButtonStyle::Primary}
+                        loading={*generating}
+                        icon={
+                            html_nested! (
+                                <Icon name={IconName::Download} />
+                            )
                         }
-                    </div>
-                    <SettingsForm/>
-                    <ImportExportModal/>
-                </div>
-                <div class={classes!("text-right", "column")}>
-                    <p>
-                        { "See the project " }
-                        <a href={env!("CARGO_PKG_REPOSITORY")}>
-                            { "on GitHub" }
-                        </a>
-                        {" for support" }
-                    </p>
+                        disabled={generate_disabled}
+                        onclick={generate_onclick}
+                    />
+                    <HyperlinkButton
+                        title="Settings"
+                        style={ButtonStyle::Default}
+                        icon={IconName::Edit}
+                        href="#settings"
+                    />
+                </ButtonGroup>
+                <div class={classes!("card-container", "columns")}>
+                    {
+                        for app_store.svgs.iter().enumerate().map(|(i, svg)| {
+                            let svg_base64 = base64::engine::general_purpose::STANDARD_NO_PAD.encode(svg.content.as_bytes());
+                            let remove_svg_onclick = app_dispatch.reduce_mut_callback(move |app| {
+                                app.svgs.remove(i);
+                            });
+                            let footer = html!{
+                                <Button
+                                    title="Remove"
+                                    style={ButtonStyle::Primary}
+                                    icon={
+                                        html_nested!(
+                                            <Icon name={IconName::Delete} />
+                                        )
+                                    }
+                                    onclick={remove_svg_onclick}
+                                />
+                            };
+                            html!{
+                                <div class={classes!("column", "col-6", "col-xs-12")}>
+                                    <Card
+                                        title={svg.filename.clone()}
+                                        img={html_nested!(
+                                            <img class="img-responsive" src={format!("data:image/svg+xml;base64,{}", svg_base64)} alt={svg.filename.clone()} />
+                                        )}
+                                        footer={footer}
+                                    />
+                                </div>
+                            }
+                        })
+                    }
                 </div>
+                <SettingsForm/>
+                <ImportExportModal/>
+            </div>
+            <div class={classes!("text-right", "column")}>
+                <p>
+                    { "See the project " }
+                    <a href={env!("CARGO_PKG_REPOSITORY")}>
+                        { "on GitHub" }
+                    </a>
+                    {" for support" }
+                </p>
             </div>
+        </div>
+    }
+}
+
+#[function_component(AppContainer)]
+fn app_container() -> Html {
+    html! {
+        <YewduxRoot>
+            <App/>
         </YewduxRoot>
     }
 }
 
 fn main() {
     wasm_logger::init(wasm_logger::Config::new(Level::Info));
-    yew::Renderer::<App>::new().render();
+    yew::Renderer::<AppContainer>::new().render();
 }