From 91059f4f9cb7d3f06ba876e6c9348836a400bbc7 Mon Sep 17 00:00:00 2001
From: Vadzim Mahilny <magilnyy.vadimo@gmail.com>
Date: Fri, 1 Sep 2023 17:55:44 +0100
Subject: [PATCH] Active tasks

---
 src/renderer/components/Tasks.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/Tasks.tsx b/src/renderer/components/Tasks.tsx
index b6b925f..c264cb7 100644
--- a/src/renderer/components/Tasks.tsx
+++ b/src/renderer/components/Tasks.tsx
@@ -58,7 +58,9 @@ function Tasks() {
   const [tasks, setTasks] = useState<TaskType[]>([] as TaskType[]);
   const [showCreateTask, setShowCreateTask] = useState(false);
   const [isLoadingTasks, setIsLoadingTasks] = useState(false);
-  const [filterMode, setFilterMode] = useState<'all' | 'completed'>('all');
+  const [filterMode, setFilterMode] = useState<'all' | 'completed' | 'active'>(
+    'all'
+  );
 
   const [taskToShow, setTaskToShow] = useState<TaskType>({} as TaskType);
 
@@ -172,6 +174,12 @@ function Tasks() {
                 onClick={() => setFilterMode('completed')}
                 label="Completed"
               />
+              <Button
+                primary={filterMode === 'active'}
+                plain={filterMode !== 'active'}
+                onClick={() => setFilterMode('active')}
+                label="Active"
+              />
             </Box>
             <Box direction="row-responsive" align="center" gap="large">
               <Button
@@ -194,7 +202,10 @@ function Tasks() {
           >
             {tasks
               ?.filter(
-                (task) => filterMode === 'all' || task.isTrainingCompleted
+                (task) =>
+                  filterMode === 'all' ||
+                  (filterMode === 'completed' && task.isTrainingCompleted) ||
+                  (filterMode === 'active' && !task.isTrainingCompleted)
               )
               .map((task: TaskType) => {
                 return (