achievement numbers and fix for non-unique errors

This commit is contained in:
Asger Juul Brunshøj 2023-06-15 16:36:29 +02:00
parent 7e49d9f700
commit 17faadf7cd
7 changed files with 27 additions and 6 deletions

View File

@ -14,6 +14,7 @@ use yew::Properties;
#[derive(Properties, PartialEq)]
pub struct Props {
pub achievement: Achievement,
pub number: usize,
}
#[function_component]
@ -58,6 +59,9 @@ pub fn AchievementComponent(props: &Props) -> Html {
html! {
<div class="row flex">
<div class="flex-intrinsic-size">
<p>{format!("{}.", props.number)}</p>
</div>
<div class="flex-intrinsic-size">
<button onclick={onclick_toggle} class={classes!(toggle_button_class)}><i class={classes!("fas", "fa-fw", completed.then_some("fa-star"), (!completed).then_some("fa-star-half-stroke"))} /></button>
</div>
@ -65,7 +69,7 @@ pub fn AchievementComponent(props: &Props) -> Html {
<p>{goal}</p>
</div>
<div class="flex-intrinsic-size">
<button onclick={onclick_delete} class="button color-danger"><i class="fas fa-trash"/></button>
<button onclick={onclick_delete} class="button narrow color-danger"><i class="fas fa-trash"/></button>
</div>
</div>
}

View File

@ -49,7 +49,7 @@ impl Component for CreateMilestoneComponent {
fn update(&mut self, ctx: &yew::Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::Submit => {
log::info!("Creating achievement");
log::info!("Creating milestone");
let Ok(goal) = self.input_value.parse::<f64>() else { return false; };
let goal = goal as usize;

View File

@ -29,6 +29,7 @@ impl Component for ErrorComponent {
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::ErrorContextUpdated(error_context) => {
log::info!("error context updated");
self.error = error_context.value.clone();
true
}

View File

@ -3,6 +3,11 @@ use yew::prelude::*;
#[derive(Default, Debug, PartialEq, Eq, Clone)]
pub struct Error {
// The counter field is a trick so each emission by the reducer is unique.
// Yew will by default try to minimize the number of re-renders by diffing the new virtual DOM against the previous version.
// So this makes sure that downstream subscribers to this context are notified.
_counter: usize,
pub value: Option<String>,
}
@ -10,7 +15,11 @@ impl Reducible for Error {
type Action = String;
fn reduce(self: Rc<Self>, action: Self::Action) -> Rc<Self> {
Error { value: Some(action) }.into()
Error {
_counter: self._counter + 1,
value: Some(action),
}
.into()
}
}

View File

@ -74,7 +74,7 @@ pub fn milestone_component(props: &Props) -> Html {
{unfilled_stars}
</p>
<div class="flex-intrinsic-size">
<button onclick={onclick_delete} class="button color-danger"><i class="fas fa-trash"/></button>
<button onclick={onclick_delete} class="button narrow color-danger"><i class="fas fa-trash"/></button>
</div>
</div>
}

View File

@ -25,9 +25,11 @@ pub fn Root() -> Html {
.achievements
.iter()
.cloned()
.map(|a| {
.enumerate()
.map(|(idx, a)| (idx + 1, a))
.map(|(n, a)| {
html! {
<AchievementComponent achievement={a} />
<AchievementComponent number={n} achievement={a} />
}
})
.collect::<Html>();

View File

@ -6,6 +6,11 @@
--danger-color: #e74c3c;
}
.button.narrow {
padding-left: 15px;
padding-right: 15px;
}
.button.color-primary {
color: var(--primary-color) !important;
border-color: var(--primary-color) !important;