Slightly better reactivity using use_effect

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 mut correct_questions = use_signal(|| 0);
-	let wrong_questions = use_signal(|| 0);
+	let mut wrong_questions = use_signal(|| 0);
 
-	let has_finished = use_signal(|| false);
+	let mut has_finished = use_signal(|| false);
-	let has_restart = 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 !has_finished() {
-		if !questions.is_empty() && !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()[0].clone());
-	let mut current = use_signal(move || questions().remove(0));
 
-	// use_effect(move || {
+	use_effect(move || {
-	// 	let mut has_restart_lock = has_restart.write();
+		let _correct_count = correct_questions();
-	// 	tracing::info!("called new questions effect {}", *has_restart_lock);
+		let _wrong_count = wrong_questions();
-	// 	if *has_restart_lock {
+
-	// 		tracing::info!("actually passing effect");
+		let mut questions_lock = questions.write();
-	// 		let mut questions_lock = questions.write();
+
-	//
+		if questions_lock.is_empty() {
-	// 		*questions_lock = get_rand_questions();
+			has_finished.set(true);
-	// 		current.set(questions_lock.remove(0));
+		} else {
-	//
+			let new_question = questions_lock.remove(0);
-	// 		correct_questions.set(0);
+			current.set(new_question);
-	// 		wrong_questions.set(0);
+		}
-	// 		*has_restart_lock = false;
+	});
-	// 		has_finished.set(false);
-	// 	}
-	// });
 
 	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 |_| {
+					onclick: move |_| {
-					// 	*has_restart.write() = true;
+						has_restart.set(true);
-					// },
+					},
 					"Restart"
 				},
 				button {