Skip to content

Commit

Permalink
🎨 refactor states clones
Browse files Browse the repository at this point in the history
  • Loading branch information
@ad2ien
ad2ien committed Oct 23, 2023
1 parent 628f117 commit 8db5ec6
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 121 deletions.
24 changes: 14 additions & 10 deletions src/job_sliders_component.rs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
use yew::prelude::*;

use crate::{wages_param::WagesParam, criterias::Criteria, slider_component::{Slider, SliderMessage, SliderCoefMessage}};
use crate::{
criterias::Criteria,
slider_component::{Slider, SliderCoefMessage, SliderMessage},
wages_param::WagesParam,
};

#[derive(Properties, PartialEq)]
pub struct Props {
Expand All @@ -12,13 +16,11 @@ pub struct Props {

#[function_component]
pub fn JobSliders(props: &Props) -> Html {

let wages_param = props.wages_param.clone();
let wages_param_2 = props.wages_param.clone();
let on_parameter_slide = props.on_parameter_slide.clone();
let criterias = props.criterias.clone();
let on_coef_slide: Callback<Vec<Criteria>> = props.on_coef_slide.clone();

let on_param_value_slide: Callback<SliderMessage> = {
Callback::from(move |msg: SliderMessage| {
let mut new_params = wages_param.clone();
Expand All @@ -31,7 +33,6 @@ pub fn JobSliders(props: &Props) -> Html {
})
};


let on_coef_slide: Callback<SliderCoefMessage> = {
Callback::from(move |msg: SliderCoefMessage| {
let mut crit_state = criterias.clone();
Expand All @@ -43,9 +44,11 @@ pub fn JobSliders(props: &Props) -> Html {
on_coef_slide.emit(crit_state);
})
};

html! {
<div class="contentBlock">

{
let wages_param = props.wages_param.clone();
html! {
<div class="contentBlock">
<div class="w3-row parameterHeader">
<div class="w3-half">{ "Criteria" }</div>
<div class="w3-quarter">{ "Mark" }</div>
Expand All @@ -55,7 +58,7 @@ pub fn JobSliders(props: &Props) -> Html {
<div>
{
for props.criterias.clone().into_iter().map(|criteria: Criteria| {
let param = wages_param_2.clone().into_iter().find(|param| param.id == criteria.id).unwrap();
let param = wages_param.clone().into_iter().find(|param| param.id == criteria.id).unwrap();
html! {
<div>
<Slider on_parameter_slide={on_param_value_slide.clone()} on_coef_slide={on_coef_slide.clone()} wages_param={param} criteria={criteria} />
Expand All @@ -67,6 +70,7 @@ pub fn JobSliders(props: &Props) -> Html {
} else {
<div>{"loading or data mismatch somewhere..."}</div>
}
</div>
</div>
}
}
}
217 changes: 108 additions & 109 deletions src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,119 +36,110 @@ fn App() -> Html {
let selected_job_state = use_state(|| "".to_string());
let error_msg_state = use_state(|| "".to_string());

let result_state_2 = result_state.clone();
let result_state_3 = result_state.clone();
let result_state_4 = result_state.clone();
let result_state_5 = result_state.clone();
let result_state_6 = result_state.clone();
let result_state_7 = result_state.clone();

let criterias_state_2 = criterias_state.clone();
let criterias_state_3 = criterias_state.clone();
let criterias_state_4 = criterias_state.clone();
let criterias_state_6 = criterias_state.clone();
let criterias_state_7 = criterias_state.clone();
let criterias_state_8 = criterias_state.clone();

let parameter_state_2 = parameter_state.clone();
let parameter_state_3 = parameter_state.clone();
let parameter_state_4 = parameter_state.clone();
let parameter_state_5 = parameter_state.clone();
let parameter_state_6 = parameter_state.clone();
let parameter_state_7 = parameter_state.clone();
let parameter_state_8 = parameter_state.clone();

let jobs_box_state_2 = jobs_box_state.clone();

let selected_job_state_2 = selected_job_state.clone();
let selected_job_state_3 = selected_job_state.clone();

let jobs_state_2 = jobs_state.clone();

let error_msg_state_2 = error_msg_state.clone();
let error_msg_state_3: UseStateHandle<String> = error_msg_state.clone();
{
let parameter_state = parameter_state.clone();
let result_state = result_state.clone();
let error_msg_state = error_msg_state.clone();
let criterias_state = criterias_state.clone();
use_effect(move || {
if (*criterias_state).len() == 0 && (*error_msg_state).is_empty() {
wasm_bindgen_futures::spawn_local(async move {
let fetched_criteria: Vec<Criteria> =
match Request::get(CRITERIAS_URL).send().await {
Ok(response) => match response.json().await {
Ok(jobs) => jobs,
Err(_e) => {
error_msg_state.set(format!("Error fetching criterias"));
return;
}
},
Err(_e) => {
error_msg_state.set(format!("Error reading criterias"));
return;
}
};
criterias_state.set(fetched_criteria.clone());
result_state.set(compute_result(
(*parameter_state).clone(),
fetched_criteria.clone(),
input_base_wages_state.clone(),
));
});
|| ()
} else {
|| ()
}
});
}

use_effect(move || {
if (*criterias_state).len() == 0 && (*error_msg_state).is_empty() {
wasm_bindgen_futures::spawn_local(async move {
let fetched_criteria: Vec<Criteria> = match Request::get(CRITERIAS_URL).send().await {
Ok(response) => match response.json().await {
Ok(jobs) => jobs,
{
let criterias_state = criterias_state.clone();
let error_msg_state = error_msg_state.clone();
let result_state = result_state.clone();
let parameter_state = parameter_state.clone();
let jobs_state = jobs_state.clone();
let selected_job_state = selected_job_state.clone();
let jobs_box_state = jobs_box_state.clone();
use_effect(move || {
if (*parameter_state).len() == 0 && (*error_msg_state).is_empty() {
wasm_bindgen_futures::spawn_local(async move {
let jobs: Vec<Job> = match Request::get(DATA_URL).send().await {
Ok(response) => match response.json().await {
Ok(jobs) => jobs,
Err(_e) => {
error_msg_state.set(format!("Error fetching data"));
return;
}
},
Err(_e) => {
error_msg_state.set(format!("Error fetching criterias"));
error_msg_state.set(format!("Error reading data"));
return;
}
},
Err(_e) => {
error_msg_state.set(format!("Error reading criterias"));
return;
}
};
criterias_state.set(fetched_criteria.clone());
result_state_3.set(compute_result(
(*parameter_state_5).clone(),
fetched_criteria.clone(),
input_base_wages_state.clone(),
));
});
|| ()
} else {
|| ()
}
});
};

use_effect(move || {
if (*parameter_state_6).len() == 0 && (*error_msg_state_2).is_empty() {
wasm_bindgen_futures::spawn_local(async move {
let jobs: Vec<Job> = match Request::get(DATA_URL).send().await {
Ok(response) => match response.json().await {
Ok(jobs) => jobs,
Err(_e) => {
error_msg_state_2.set(format!("Error fetching data"));
return;
}
},
Err(_e) => {
error_msg_state_2.set(format!("Error reading data"));
if jobs.len() < 1 {
error_msg_state.set(format!("Error no data fetched"));
return;
}
};
jobs_state.set(jobs.clone());
jobs_box_state.set(jobs.clone().into_iter().map(|job| job.job).collect());
selected_job_state.set(jobs.first().unwrap().job.clone());
parameter_state.set(jobs.first().unwrap().params.clone());
result_state.set(compute_result(
jobs.first().unwrap().params.clone(),
(*criterias_state).clone(),
input_base_wages_state.clone(),
));
});
|| ()
} else {
|| ()
}
});
}

if jobs.len() < 1 {
error_msg_state_2.set(format!("Error no data fetched"));
return;
}
jobs_state.set(jobs.clone());
jobs_box_state.set(jobs.clone().into_iter().map(|job| job.job).collect());
selected_job_state.set(jobs.first().unwrap().job.clone());
parameter_state_6.set(jobs.first().unwrap().params.clone());
result_state_4.set(compute_result(
jobs.first().unwrap().params.clone(),
(*criterias_state_6).clone(),
input_base_wages_state.clone(),
));
});
|| ()
} else {
|| ()
}
});
let on_param_value_slide: Callback<Vec<WagesParam>> = {
let criterias_state = criterias_state.clone();
let parameter_state = parameter_state.clone();
let result_state = result_state.clone();
Callback::from(move |new_params: Vec<WagesParam>| {
parameter_state_2.set(new_params.clone());
result_state_2.set(compute_result(
parameter_state.set(new_params.clone());
result_state.set(compute_result(
new_params.clone(),
(*criterias_state_8).clone(),
(*criterias_state).clone(),
input_base_wages_state.clone(),
));
})
};

let on_coef_slide: Callback<Vec<Criteria>> = {
let criterias_state = criterias_state.clone();
let parameter_state = parameter_state.clone();
let result_state = result_state.clone();
Callback::from(move |new_coef: Vec<Criteria>| {
criterias_state_3.set(new_coef.clone());
result_state_5.set(compute_result(
(*parameter_state_8).clone(),
criterias_state.set(new_coef.clone());
result_state.set(compute_result(
(*parameter_state).clone(),
new_coef.clone(),
input_base_wages_state.clone(),
));
Expand All @@ -157,37 +148,45 @@ fn App() -> Html {

let on_base_change = {
let base_wages_handle = base_wages_state.clone();
let result_state = result_state.clone();
let parameter_state = parameter_state.clone();
let criterias_state = criterias_state.clone();
Callback::from(move |e: InputEvent| {
let target: Option<EventTarget> = e.target();
let input = target.and_then(|t| t.dyn_into::<HtmlInputElement>().ok());

if let Some(input) = input {
let base_wages = input.value().parse::<i32>().expect("expected number");
base_wages_handle.set(base_wages);
result_state_7.set(compute_result(
(*parameter_state_4).clone(),
(*criterias_state_4).clone(),
result_state.set(compute_result(
(*parameter_state).clone(),
(*criterias_state).clone(),
base_wages.clone(),
));
}
})
};

let on_job_select = {
let result_state = result_state.clone();
let parameter_state = parameter_state.clone();
let criterias_state = criterias_state.clone();
let selected_job_state = selected_job_state.clone();
let jobs_state = jobs_state.clone();
Callback::from(move |e: Event| {
let target: Option<EventTarget> = e.target();
let input = target.and_then(|t| t.dyn_into::<HtmlSelectElement>().ok());
if let Some(input) = input {
let new_job: Job = (*jobs_state_2)
let new_job: Job = (*jobs_state)
.clone()
.into_iter()
.find(|job| job.job == input.value())
.expect(format!("param not found : {} ", input.value()).as_str());
selected_job_state_2.set(new_job.job.clone());
parameter_state_7.set(new_job.params.clone());
result_state_6.set(compute_result(
selected_job_state.set(new_job.job.clone());
parameter_state.set(new_job.params.clone());
result_state.set(compute_result(
new_job.params.clone(),
(*criterias_state_7).clone(),
(*criterias_state).clone(),
input_base_wages_state.clone(),
));
}
Expand All @@ -197,8 +196,8 @@ fn App() -> Html {
html! {
<div class="container">
<Header />
<div class={ format!("contentBlock w3-amber {}", if (*error_msg_state_3).clone().is_empty() { "hidden" } else { "" }) }>
{ (*error_msg_state_3).clone() }
<div class={ format!("contentBlock w3-amber {}", if (*error_msg_state).clone().is_empty() { "hidden" } else { "" }) }>
{ (*error_msg_state).clone() }
</div>
<div class="w3-row firstRow">
<div class="w3-third contentBlock">
Expand All @@ -220,9 +219,9 @@ fn App() -> Html {
<label>{ "Profile : "}</label>
<select class="w3-select" name="job" onchange={on_job_select}>
{
for (*jobs_box_state_2).clone().into_iter().map(|job: String| {
for (*jobs_box_state).clone().into_iter().map(|job: String| {
html! {
<option selected={job.clone() == (*selected_job_state_3)} value={job.clone()}>{ job.clone() }</option>
<option selected={job.clone() == (*selected_job_state)} value={job.clone()}>{ job.clone() }</option>
}
})
}
Expand All @@ -235,8 +234,8 @@ fn App() -> Html {
</div>
</div>
<JobSliders
wages_param={(*parameter_state_3).clone()}
criterias={(*criterias_state_2).clone()}
wages_param={(*parameter_state).clone()}
criterias={(*criterias_state).clone()}
on_parameter_slide={on_param_value_slide.clone()}
on_coef_slide={on_coef_slide.clone()} />
<Footer />
Expand Down
4 changes: 2 additions & 2 deletions src/slider_component.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ pub fn Slider(props: &Props) -> Html {
let coef_value = (*coef_value_handle).clone();

let wages_param = props.wages_param.clone();
let wages_param_2 = props.wages_param.clone();
let criteria = props.criteria.clone();

let cb_value_handle = props.on_parameter_slide.clone();
Expand All @@ -50,13 +49,14 @@ pub fn Slider(props: &Props) -> Html {

let cb_coef_handle: Callback<SliderCoefMessage> = props.on_coef_slide.clone();
let on_coef_change = {
let wages_param = props.wages_param.clone();
Callback::from(move |e: InputEvent| {
let input = e.target_dyn_into::<HtmlInputElement>();

if let Some(input) = input {
coef_value_handle.set(input.value());
cb_coef_handle.emit(SliderCoefMessage {
id: wages_param_2.id.to_string(),
id: wages_param.id.to_string(),
coef: input.value().parse::<f64>().expect("expected number"),
});
}
Expand Down

0 comments on commit 8db5ec6

Please sign in to comment.