Refactor component structure

src/components/app.rs

@@ -1,6 +1,6 @@
 use yew::prelude::*;
 
-use crate::home::Home;
+use crate::components::Home;
 
 pub struct App {}
 

src/components/home.rs

@@ -1,7 +1,7 @@
-use crate::canvas::Canvas;
-use crate::controls::Controls;
 use yew::prelude::*;
 
+use crate::components::waveform::WaveformContainer;
+
 pub struct Home {}
 
 impl Component for Home {
@@ -21,11 +21,6 @@ impl Component for Home {
     }
 
     fn view(&self) -> Html {
-        html! {
+        html! { <WaveformContainer/> }
-            <div>
-                <Canvas/>
-                <Controls/>
-            </div>
-        }
     }
 }

src/components/mod.rs

@@ -0,0 +1,8 @@
+pub mod app;
+pub mod home;
+pub mod player;
+pub mod waveform;
+
+pub use app::App;
+pub use home::Home;
+pub use player::Player;

src/components/waveform/canvas.rs

@@ -4,7 +4,6 @@ use std::sync::Arc;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen::JsCast;
 use web_sys::HtmlCanvasElement;
-use yew::agent::Bridged;
 use yew::prelude::*;
 use yew::services::ConsoleService;
 use yew::Bridge;

src/components/waveform/container.rs

@@ -1,12 +1,12 @@
-use super::player::Player;
+use super::canvas::Canvas;
 use crate::agents::audio_agent::{self, AudioAgent};
+use crate::components::Player;
 use web_sys::HtmlInputElement;
-use yew::agent::Dispatched;
 use yew::agent::Dispatcher;
 use yew::prelude::*;
 use yew::services::ConsoleService;
 
-pub struct Controls {
+pub struct Container {
     link: ComponentLink<Self>,
     file_input: NodeRef,
     audio_agent: Dispatcher<AudioAgent>,
@@ -16,7 +16,7 @@ pub enum Msg {
     SubmitForm,
 }
 
-impl Component for Controls {
+impl Component for Container {
     type Message = Msg;
     type Properties = ();
 
@@ -31,7 +31,7 @@ impl Component for Controls {
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
         match msg {
             Msg::SubmitForm => {
-                if let Err(e) = self.handle_submit_form() {
+                if let Err(e) = self.handle_upload() {
                     ConsoleService::error(&e);
                 };
             }
@@ -43,24 +43,27 @@ impl Component for Controls {
         false
     }
 
-    fn rendered(&mut self, _: bool) {}
-
     fn view(&self) -> Html {
         html! {
-            <section id="controls" style="width: 800px; height: 100px; border: 1px solid grey">
+            <div id="waveform">
-                <label>
+                <Canvas/>
-                    {"Select an audio file"}
+
-                    <input ref=self.file_input.clone() type="file"/>
+                <section id="controls" style="width: 800px; height: 100px; border: 1px solid grey">
-                </label>
+                    <label>
-                <button onclick=self.link.callback(move |_| Msg::SubmitForm)>{"Open file"}</button>
+                        {"Select an audio file"}
+                        <input ref=self.file_input.clone() type="file"/>
+                    </label>
+                    <button onclick=self.link.callback(move |_| Msg::SubmitForm)>{"Open file"}</button>
+                </section>
+
                 <Player/>
-            </section>
+            </div>
         }
     }
 }
 
-impl Controls {
+impl Container {
-    fn handle_submit_form(&mut self) -> Result<(), String> {
+    fn handle_upload(&mut self) -> Result<(), String> {
         let file_input = self
             .file_input
             .cast::<HtmlInputElement>()

src/components/waveform/mod.rs

@@ -0,0 +1,4 @@
+mod canvas;
+mod container;
+
+pub use container::Container as WaveformContainer;

src/lib.rs

@@ -1,3 +1,5 @@
+#![recursion_limit = "256"]
+
 extern crate console_error_panic_hook;
 extern crate js_sys;
 
@@ -6,11 +8,7 @@ use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 mod agents;
-mod app;
+mod components;
-mod canvas;
-mod controls;
-mod home;
-mod player;
 mod utils;
 
 #[wasm_bindgen(start)]
@@ -18,5 +16,5 @@ pub fn run_app() {
     #[cfg(debug_assertions)]
     panic::set_hook(Box::new(console_error_panic_hook::hook));
 
-    App::<app::App>::new().mount_to_body();
+    App::<components::App>::new().mount_to_body();
 }