Refactor component structure

This commit is contained in:
Rob Watson 2020-09-11 12:38:31 +02:00
parent a25014ef0d
commit 2fc084909e
8 changed files with 39 additions and 32 deletions

View File

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

View File

@ -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! {
<div>
<Canvas/>
<Controls/>
</div>
}
html! { <WaveformContainer/> }
}
}

8
src/components/mod.rs Normal file
View File

@ -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;

View File

@ -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;

View File

@ -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! {
<div id="waveform">
<Canvas/>
<section id="controls" style="width: 800px; height: 100px; border: 1px solid grey">
<label>
{"Select an audio file"}
<input ref=self.file_input.clone() type="file"/>
</label>
<button onclick=self.link.callback(move |_| Msg::SubmitForm)>{"Open file"}</button>
<Player/>
</section>
<Player/>
</div>
}
}
}
impl Controls {
fn handle_submit_form(&mut self) -> Result<(), String> {
impl Container {
fn handle_upload(&mut self) -> Result<(), String> {
let file_input = self
.file_input
.cast::<HtmlInputElement>()

View File

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

View File

@ -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 canvas;
mod controls;
mod home;
mod player;
mod components;
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();
}