Slightly better reactivity using use_effect

master
Wynd 2025-06-18 02:13:07 +03:00
parent 46acb8c196
commit fe7f626c01
1 changed files with 51 additions and 45 deletions

View File

@ -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,10 +232,6 @@ 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;
@ -228,11 +239,6 @@ pub fn QuestionForm(
*wrong_questions_lock += 1;
}
if questions_lock.is_empty() {
*has_finished_lock = true;
}
}
// Reset animation flags
correct_animation.set(false);
wrong_animation.set(false);
@ -397,9 +403,9 @@ pub fn Report(
},
div {
button {
// onclick: move |_| {
// *has_restart.write() = true;
// },
onclick: move |_| {
has_restart.set(true);
},
"Restart"
},
button {