Slightly better reactivity using use_effect
parent
46acb8c196
commit
fe7f626c01
96
src/main.rs
96
src/main.rs
|
@ -117,22 +117,43 @@ fn main() {
|
|||
#[component]
|
||||
fn App() -> Element {
|
||||
let questions = get_rand_questions();
|
||||
let mut questions = use_signal(|| questions);
|
||||
|
||||
let correct_questions = use_signal(|| 0);
|
||||
let wrong_questions = use_signal(|| 0);
|
||||
let mut correct_questions = use_signal(|| 0);
|
||||
let mut wrong_questions = use_signal(|| 0);
|
||||
|
||||
let has_finished = use_signal(|| false);
|
||||
let has_restart = use_signal(|| false);
|
||||
let mut has_finished = use_signal(|| false);
|
||||
let mut has_restart = use_signal(|| false);
|
||||
|
||||
use_effect(move || {
|
||||
let has_restart = has_restart();
|
||||
if has_restart {
|
||||
let mut questions_lock = questions.write();
|
||||
|
||||
*questions_lock = get_rand_questions();
|
||||
|
||||
correct_questions.set(0);
|
||||
wrong_questions.set(0);
|
||||
|
||||
has_finished.set(false);
|
||||
}
|
||||
});
|
||||
|
||||
use_effect(move || {
|
||||
let has_finished = has_finished();
|
||||
if !has_finished {
|
||||
has_restart.set(false);
|
||||
}
|
||||
});
|
||||
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: MAIN_CSS }
|
||||
p { "{has_restart}" }
|
||||
if !questions.is_empty() && !has_finished() {
|
||||
if !has_finished() {
|
||||
QuestionForm { questions, correct_questions, wrong_questions, has_finished, has_restart }
|
||||
}
|
||||
else if has_finished() {
|
||||
Report {
|
||||
questions,
|
||||
questions: questions(),
|
||||
correct_questions: correct_questions(),
|
||||
wrong_questions: wrong_questions(),
|
||||
has_restart,
|
||||
|
@ -144,31 +165,27 @@ fn App() -> Element {
|
|||
#[allow(clippy::redundant_closure)]
|
||||
#[component]
|
||||
pub fn QuestionForm(
|
||||
questions: Vec<Question>,
|
||||
questions: Signal<Vec<Question>>,
|
||||
correct_questions: Signal<i32>,
|
||||
wrong_questions: Signal<i32>,
|
||||
has_finished: Signal<bool>,
|
||||
has_restart: Signal<bool>,
|
||||
) -> Element {
|
||||
let mut questions = use_signal(|| questions);
|
||||
let mut current = use_signal(move || questions().remove(0));
|
||||
let mut current = use_signal(move || questions()[0].clone());
|
||||
|
||||
// use_effect(move || {
|
||||
// let mut has_restart_lock = has_restart.write();
|
||||
// tracing::info!("called new questions effect {}", *has_restart_lock);
|
||||
// if *has_restart_lock {
|
||||
// tracing::info!("actually passing effect");
|
||||
// let mut questions_lock = questions.write();
|
||||
//
|
||||
// *questions_lock = get_rand_questions();
|
||||
// current.set(questions_lock.remove(0));
|
||||
//
|
||||
// correct_questions.set(0);
|
||||
// wrong_questions.set(0);
|
||||
// *has_restart_lock = false;
|
||||
// has_finished.set(false);
|
||||
// }
|
||||
// });
|
||||
use_effect(move || {
|
||||
let _correct_count = correct_questions();
|
||||
let _wrong_count = wrong_questions();
|
||||
|
||||
let mut questions_lock = questions.write();
|
||||
|
||||
if questions_lock.is_empty() {
|
||||
has_finished.set(true);
|
||||
} else {
|
||||
let new_question = questions_lock.remove(0);
|
||||
current.set(new_question);
|
||||
}
|
||||
});
|
||||
|
||||
let total_correct = use_memo(move || {
|
||||
current()
|
||||
|
@ -208,8 +225,6 @@ pub fn QuestionForm(
|
|||
let mut current_lock = current.write();
|
||||
let mut correct_questions_lock = correct_questions.write();
|
||||
let mut wrong_questions_lock = wrong_questions.write();
|
||||
let mut questions_lock = questions.write();
|
||||
let mut has_finished_lock = has_finished.write();
|
||||
|
||||
// Uncheck all the answers
|
||||
current_lock
|
||||
|
@ -217,20 +232,11 @@ pub fn QuestionForm(
|
|||
.iter_mut()
|
||||
.for_each(|a| a.checked = false);
|
||||
|
||||
// Get a new question or reroll the list
|
||||
if !questions_lock.is_empty() {
|
||||
*current_lock = questions_lock.remove(0);
|
||||
|
||||
// Update the correct/wrong counters
|
||||
if is_correct {
|
||||
*correct_questions_lock += 1;
|
||||
} else if is_wrong {
|
||||
*wrong_questions_lock += 1;
|
||||
}
|
||||
|
||||
if questions_lock.is_empty() {
|
||||
*has_finished_lock = true;
|
||||
}
|
||||
// Update the correct/wrong counters
|
||||
if is_correct {
|
||||
*correct_questions_lock += 1;
|
||||
} else if is_wrong {
|
||||
*wrong_questions_lock += 1;
|
||||
}
|
||||
|
||||
// Reset animation flags
|
||||
|
@ -397,9 +403,9 @@ pub fn Report(
|
|||
},
|
||||
div {
|
||||
button {
|
||||
// onclick: move |_| {
|
||||
// *has_restart.write() = true;
|
||||
// },
|
||||
onclick: move |_| {
|
||||
has_restart.set(true);
|
||||
},
|
||||
"Restart"
|
||||
},
|
||||
button {
|
||||
|
|
Loading…
Reference in New Issue