From a03e1bc487dcad435379e0cbd37e894ea1f6546e Mon Sep 17 00:00:00 2001
From: JackChujun <1yanjac@gmail.com>
Date: Sat, 26 Oct 2024 11:40:01 -0400
Subject: [PATCH] Get tasks by type

---
 .../src/APIClients/Queries/TaskQueries.ts     |  2 +-
 .../src/components/pages/tasks/TasksPage.tsx  | 44 +++++++++++++------
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/frontend/src/APIClients/Queries/TaskQueries.ts b/frontend/src/APIClients/Queries/TaskQueries.ts
index 7607d5c..122042d 100644
--- a/frontend/src/APIClients/Queries/TaskQueries.ts
+++ b/frontend/src/APIClients/Queries/TaskQueries.ts
@@ -17,7 +17,7 @@ export const GET_TASK_BY_ID = gql`
 `;
 
 export const GET_TASKS_BY_TYPE = gql`
-  query getTaskById($type: TaskType!) {
+  query getTaskByType($type: TaskType!) {
     getTasksByType(type: $type) {
       id
       type
diff --git a/frontend/src/components/pages/tasks/TasksPage.tsx b/frontend/src/components/pages/tasks/TasksPage.tsx
index f889d47..a7fd688 100644
--- a/frontend/src/components/pages/tasks/TasksPage.tsx
+++ b/frontend/src/components/pages/tasks/TasksPage.tsx
@@ -71,6 +71,11 @@ const TasksPage = (): React.ReactElement => {
   const [choreTasks, setChoreTasks] = useState<ChoreTask[]>([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const [requiredTasksData, setRequiredTasksData] = useState<TableData[]>([]);
+  const [optionalTasksData, setOptionalTasksData] = useState<TableData[]>([]);
+  const [customTasksData, setCustomTasksData] = useState<TableData[]>([]);
+  const [choreTasksData, setChoreTasksData] = useState<TableData[]>([]);
+
   const [taskType, setTaskType] = useState<TaskType>("REQUIRED");
   const [taskData, setTaskData] = useState<TableData[]>([]);
   const [storedTaskData, setStoredTaskData] = useState<TableData[]>([]);
@@ -78,6 +83,10 @@ const TasksPage = (): React.ReactElement => {
 
   const [taskFilter, setTaskFilter] = useState<string>("");
 
+  const { loading, error, data } = useQuery(GET_TASKS_BY_TYPE, {
+    variables: { type: taskType },
+  });
+
   // const [createTask] = useMutation<{ createTask: TaskResponse }>(CREATE_TASK);
 
   // const [updateTask] = useMutation<{
@@ -270,20 +279,29 @@ const TasksPage = (): React.ReactElement => {
   }, [taskFilter, storedTaskData, taskData]);
 
   useEffect(() => {
-    if (taskType === "REQUIRED") {
-      setStoredTaskData(requiredTasksMockData);
-      setTaskDataColumns(tasksColumnTypes);
-    } else if (taskType === "OPTIONAL") {
-      setStoredTaskData(optionalTasksMockData);
-      setTaskDataColumns(tasksColumnTypes);
-    } else if (taskType === "CUSTOM") {
-      setStoredTaskData(customTasksMockData);
-      setTaskDataColumns(customTasksColumnTypes);
-    } else if (taskType === "CHORE") {
-      setStoredTaskData(choreTasksMockData);
-      setTaskDataColumns(choreTasksColumnTypes);
+    if (data) {
+      if (taskType === "REQUIRED") {
+        setRequiredTasks(data.getTasksByType);
+        setStoredTaskData(data.getTasksByType);
+        setTaskDataColumns(tasksColumnTypes);
+      } else if (taskType === "OPTIONAL") {
+        setOptionalTasks(data.getTasksByType);
+        setStoredTaskData(data.getTasksByType);
+        setTaskDataColumns(tasksColumnTypes);
+      } else if (taskType === "CUSTOM") {
+        setCustomTasks(data.getTasksByType);
+        setStoredTaskData(data.getTasksByType);
+        setTaskDataColumns(customTasksColumnTypes);
+      } else if (taskType === "CHORE") {
+        setChoreTasks(data.getTasksByType);
+        setStoredTaskData(data.getTasksByType);
+        setTaskDataColumns(choreTasksColumnTypes);
+      }
     }
-  }, [taskType]);
+  }, [data, taskType]);
+  
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
 
   return (
     <Flex flexDir="column" flexGrow={1}>