src/components/task_list.rs

@@ -3,15 +3,21 @@ use crate::models::task::Task;
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
+use dioxus_query::prelude::use_query_client;
+use crate::query::{QueryErrors, QueryKey, QueryValue};
+use crate::server::tasks::complete_task;
 
 #[component]
 pub(crate) fn TaskList(tasks: Vec<Task>, class: Option<&'static str>) -> Element {
+    let query_client = use_query_client::<QueryValue, QueryErrors, QueryKey>();
     let mut task_being_edited = use_context::<Signal<Option<Task>>>();
 
     rsx! {
         div {
             class: format!("flex flex-col {}", class.unwrap_or("")),
-            for task in tasks {
+            {tasks.iter().cloned().map(|task| {
+                let task_clone = task.clone();
+                rsx! {
                     div {
                         key: "{task.id()}",
                         class: format!(
@@ -33,7 +39,28 @@ pub(crate) fn TaskList(tasks: Vec<Task>, class: Option<&'static str>) -> Element
                         ),
                         onclick: move |_| task_being_edited.set(Some(task.clone())),
                         i {
-                        class: "fa-regular fa-square text-3xl text-zinc-600",
+                            class: format!(
+                                "{} text-3xl text-zinc-500",
+                                if *(task_clone.category()) == Category::Done {
+                                    "fa solid fa-square-check"
+                                } else {
+                                    "fa-regular fa-square"
+                                }
+                            ),
+                            onclick: move |event| {
+                                // To prevent editing the task.
+                                event.stop_propagation();
+                                let task = task_clone.clone();
+                                async move {
+                                    let completed_task = complete_task(task.id()).await;
+                                    query_client.invalidate_queries(&[
+                                        QueryKey::Tasks, 
+                                        QueryKey::TasksInCategory(
+                                            completed_task.unwrap().category().clone()
+                                        ),
+                                    ]);
+                                }
+                            }
                         },
                         div {
                             class: "flex flex-col",
@@ -67,6 +94,7 @@ pub(crate) fn TaskList(tasks: Vec<Task>, class: Option<&'static str>) -> Element
                         }
                     }
                 }
+            })}
         }
     }
 }