Continue building basic page structure

src/app.rs

@@ -0,0 +1,27 @@
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+use crate::home::Home;
+
+pub struct App {}
+
+impl Component for App {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        Self {}
+    }
+
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        html! { <Home/> }
+    }
+}

src/canvas.rs

@@ -0,0 +1,25 @@
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+pub struct Canvas {}
+
+impl Component for Canvas {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        Self {}
+    }
+
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        html! { <canvas width="800" height="300" style="border: 1px solid grey"></canvas> }
+    }
+}

src/controls.rs

@@ -0,0 +1,43 @@
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+use yew::web_sys::console;
+
+pub struct Controls {
+    link: ComponentLink<Self>,
+}
+
+pub enum Msg {
+    SubmitForm,
+}
+
+impl Component for Controls {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self { link }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::SubmitForm => console::log_1(&"Handle submit form".into()),
+        }
+        true
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <section id="controls" style="width: 800px; height: 100px; border: 1px solid grey">
+                <label>
+                    {"Select an audio file"}
+                    <input type="file"/>
+                </label>
+                <button onclick=self.link.callback(move |_| Msg::SubmitForm)>{"Open file"}</button>
+            </section>
+        }
+    }
+}

src/home.rs

@@ -0,0 +1,32 @@
+use crate::canvas::Canvas;
+use crate::controls::Controls;
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+pub struct Home {}
+
+impl Component for Home {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        Self {}
+    }
+
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <div>
+                <Canvas/>
+                <Controls/>
+            </div>
+        }
+    }
+}

src/lib.rs

@@ -1,30 +1,12 @@
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
-struct Home {}
+mod app;
-
+mod canvas;
-impl Component for Home {
+mod controls;
-    type Message = ();
+mod home;
-    type Properties = ();
-
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
-        Self {}
-    }
-
-    fn update(&mut self, _: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, _: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
-        html! { <span>{"Hello World!"}</span> }
-    }
-}
 
 #[wasm_bindgen(start)]
 pub fn run_app() {
-    App::<Home>::new().mount_to_body();
+    App::<app::App>::new().mount_to_body();
 }