From 761e21553169156f4b541e41a4b99a53a68eb61d Mon Sep 17 00:00:00 2001 From: Baitinq Date: Sun, 30 Oct 2022 11:51:14 +0100 Subject: Frontend: Change OSSE component into a struct component I think this improves readability for components with state. --- frontend/src/main.rs | 164 +++++++++++++++++++++++++++------------------------ 1 file changed, 88 insertions(+), 76 deletions(-) diff --git a/frontend/src/main.rs b/frontend/src/main.rs index 3d8bf51..3567f6f 100644 --- a/frontend/src/main.rs +++ b/frontend/src/main.rs @@ -54,99 +54,110 @@ pub struct ResultComponentProps { #[function_component(ResultComponent)] fn result_component(props: &ResultComponentProps) -> Html { html! { - {props.result.url.clone()}{"--"}{props.result.title.clone()}{"----"}{props.result.description.clone()}{format!("PRIO: {}", props.result.priority)} + + {props.result.url.clone()}{"--"}{props.result.title.clone()}{"----"}{props.result.description.clone()}{format!("PRIO: {}", props.result.priority)} + } } -#[derive(Debug, Clone)] -struct State { +pub struct OSSE { pub search_query: String, pub results: Option>, //TODO: some loading? } -#[function_component(OSSE)] -fn osse() -> Html { - let state = use_state(|| State { - search_query: "".to_string(), - results: None, - }); - - let display_results = |maybe_results: &Option>| -> Html { - let maybe_results = maybe_results.as_ref(); - if maybe_results.is_none() { - return html! {}; - } - - let results = maybe_results.unwrap(); - if !results.is_empty() { - results - .iter() - .sorted() - .map(|r| { - html! { -
- -
- } - }) - .collect::() - } else { - html! { -

{"No results!"}

- } - } - }; - - let search_query_changed = { - let cloned_state = state.clone(); - Callback::from(move |event: InputEvent| { - let target: EventTarget = event - .target() - .expect("Event should have a target when dispatched"); - let input = target.unchecked_into::().value(); - log!("Input changed: {}", &input); - let mut state = cloned_state.deref().clone(); - state.search_query = input; - cloned_state.set(state); - }) - }; +pub enum OSSEMessage { + SearchSubmitted, + SearchChanged(String), + SearchFinished(Vec), +} - let on_submit = { - let cloned_state = state.clone(); +impl Component for OSSE { + type Message = OSSEMessage; + type Properties = (); - Callback::from(move |event: FocusEvent| { - event.prevent_default(); - let state = cloned_state.deref().clone(); + fn create(_ctx: &Context) -> Self { + OSSE { + search_query: "".to_string(), + results: None, + } + } - //fetch - { - let cloned_state = cloned_state.clone(); - wasm_bindgen_futures::spawn_local(async move { - let mut state = cloned_state.deref().clone(); - //TODO: what if its on another host - let endpoint = format!("http://127.0.0.1:4444/search/{}", &state.search_query); + fn update(&mut self, ctx: &Context, msg: Self::Message) -> bool { + match msg { + OSSEMessage::SearchSubmitted => { + let search_query = self.search_query.clone(); + ctx.link().send_future(async move { + let endpoint = format!("http://127.0.0.1:4444/search/{}", search_query); - let fetched_results = Request::get(endpoint.as_str()).send().await.unwrap(); + let fetched_response = Request::get(endpoint.as_str()).send().await.unwrap(); - let fetched_json: Vec = match fetched_results.json().await { + let fetched_results: Vec = match fetched_response.json().await { Err(e) => panic!("Im panic: {}", e), Ok(json) => json, }; - state.results = Some(fetched_json); - - cloned_state.set(state); + OSSEMessage::SearchFinished(fetched_results) }); - } + + false + }, + OSSEMessage::SearchChanged(search_query) => { + self.search_query = search_query; + + true + }, + OSSEMessage::SearchFinished(search_results) => { + self.results = Some(search_results); + + true + }, + } + } - log!("Submit: {}", state.search_query); - }) - }; + fn view(&self, ctx: &Context) -> Html { + let onsubmit = ctx.link().callback(|event: FocusEvent| { + event.prevent_default(); - let curr_state = state.deref().to_owned(); + OSSEMessage::SearchSubmitted + }); - html! { - <> + let oninput = ctx.link().callback(|event: InputEvent| { + let target: EventTarget = event + .target() + .expect("Event should have a target when dispatched"); + let input = target.unchecked_into::().value(); + + OSSEMessage::SearchChanged(input) + }); + + let display_results = |maybe_results: &Option>| -> Html { + let maybe_results = maybe_results.as_ref(); + if maybe_results.is_none() { + return html! {}; + } + + let results = maybe_results.unwrap(); + if !results.is_empty() { + results + .iter() + .sorted() + .map(|r| { + html! { +
+ +
+ } + }) + .collect::() + } else { + html! { +

{"No results!"}

+ } + } + }; + + html! { + <>
+ } } } -- cgit 1.4.1