frontend: rework how fetching tasks works, stop fetching each complet…

…ed task on page load
NickSavage · Nov 23, 2024 · cca882e · cca882e
1 parent 008e8f2
commit cca882e
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 62 deletions.
diff --git a/go-backend/handlers/tasks.go b/go-backend/handlers/tasks.go
@@ -48,7 +48,7 @@ func (s *Handler) QueryTask(userID int, id int) (models.Task, error) {
 	return task, nil
 }
 
-func (s *Handler) QueryTasks(userID int) ([]models.Task, error) {
+func (s *Handler) QueryTasks(userID int, includeCompleted bool) ([]models.Task, error) {
 	var tasks []models.Task
 	query := `
 	SELECT id, card_pk, user_id, scheduled_date, due_date,
@@ -57,6 +57,9 @@ func (s *Handler) QueryTasks(userID int) ([]models.Task, error) {
 	tasks
 	WHERE user_id = $1 AND is_deleted = FALSE
 	`
+	if !includeCompleted {
+		query += " AND is_complete = FALSE"
+	}
 
 	rows, err := s.DB.Query(query, userID)
 	if err != nil {
@@ -118,7 +121,13 @@ func (s *Handler) GetTaskRoute(w http.ResponseWriter, r *http.Request) {
 func (s *Handler) GetTasksRoute(w http.ResponseWriter, r *http.Request) {
 	userID := r.Context().Value("current_user").(int)
 
-	tasks, err := s.QueryTasks(userID)
+	completed := r.URL.Query().Get("completed")
+	includeCompleted := false
+	if completed == "true" {
+		includeCompleted = true
+	}
+
+	tasks, err := s.QueryTasks(userID, includeCompleted)
 
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)

diff --git a/go-backend/handlers/tasks_test.go b/go-backend/handlers/tasks_test.go
@@ -109,8 +109,8 @@ func TestGetTasksSuccess(t *testing.T) {
 	}
 	var tasks []models.Task
 	tests.ParseJsonResponse(t, rr.Body.Bytes(), &tasks)
-	if len(tasks) != 20 {
-		t.Errorf("wrong number of tasks returned, got %v want %v", len(tasks), 20)
+	if len(tasks) != 19 {
+		t.Errorf("wrong number of tasks returned, got %v want %v", len(tasks), 19)
 	}
 }
 

diff --git a/zettelkasten-front/src/api/tasks.ts b/zettelkasten-front/src/api/tasks.ts
@@ -3,9 +3,12 @@ import { checkStatus } from "./common";
 
 const base_url = import.meta.env.VITE_URL;
 
-export function fetchTasks(): Promise<Task[]> {
+export function fetchTasks(showCompleted: boolean): Promise<Task[]> {
   let token = localStorage.getItem("token");
   let url = base_url + "/tasks";
+  if (showCompleted) {
+    url += "?completed=true"
+  }
 
   return fetch(url, {
     headers: { Authorization: `Bearer ${token}` },

diff --git a/zettelkasten-front/src/components/tasks/TaskPageOptionsMenu.tsx b/zettelkasten-front/src/components/tasks/TaskPageOptionsMenu.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { useTaskContext } from "../../contexts/TaskContext";
+
+interface TaskPageOptionsMenu {}
+
+export function TaskPageOptionsMenu({}: TaskPageOptionsMenu) {
+  const [showMenu, setShowMenu] = useState<boolean>(false);
+  const { setRefreshTasks, showCompleted, setShowCompleted } = useTaskContext();
+
+  function toggleMenu() {
+    setShowMenu(!showMenu);
+  }
+
+  function toggleViewCompleted() {
+    setShowCompleted(!showCompleted);
+    setRefreshTasks(true);
+  }
+
+  return (
+    <div>
+      <div className="dropdown">
+        <button
+          onClick={toggleMenu}
+          className="font-semibold rounded focus:outline-none focus:ring-2 focus:ring-offset-2 bg-palette-dark text-white hover:bg-palette-darkest focus:ring-blue-500"
+        >
+          Actions
+        </button>
+        {showMenu && (
+          <div className="popup-menu w-64">
+            {showCompleted ? (
+              <button onClick={toggleViewCompleted}>Hide Completed</button>
+            ) : (
+              <button onClick={toggleViewCompleted}>View Completed</button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/zettelkasten-front/src/contexts/TaskContext.tsx b/zettelkasten-front/src/contexts/TaskContext.tsx
@@ -11,17 +11,24 @@ interface TaskContextType {
   setRefreshTasks: (refresh: boolean) => void;
   getTasks: () => Promise<void>;
   existingTags: string[];
+  showCompleted: boolean;
+  setShowCompleted: (refresh: boolean) => void;
 }
 interface TaskProviderProps {
   children: React.ReactNode;
   testing?: boolean; // Add this line
   testTasks?: Task[];
 }
 
-export const TaskProvider: React.FC<TaskProviderProps> = ({ children, testing = false, testTasks=[] }) => {
+export const TaskProvider: React.FC<TaskProviderProps> = ({
+  children,
+  testing = false,
+  testTasks = [],
+}) => {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [refreshTasks, setRefreshTasks] = useState(false);
   const [existingTags, setExistingTags] = useState<string[]>([]);
+  const [showCompleted, setShowCompleted] = useState<boolean>(false);
 
   const extractTags = async (data: Task[]) => {
     let tagSet = new Set<string>();
@@ -39,7 +46,7 @@ export const TaskProvider: React.FC<TaskProviderProps> = ({ children, testing =
   };
   const getTasks = async () => {
     console.log("run getTasks");
-    await fetchTasks().then((data) => {
+    await fetchTasks(showCompleted).then((data) => {
       console.log("asdas");
       setTasks(data);
       extractTags(data);
@@ -48,9 +55,9 @@ export const TaskProvider: React.FC<TaskProviderProps> = ({ children, testing =
   };
   useEffect(() => {
     if (testing) {
-      setTasks(testTasks)
+      setTasks(testTasks);
       extractTags(testTasks);
-      return
+      return;
     }
     if (refreshTasks) {
       getTasks();
@@ -60,11 +67,19 @@ export const TaskProvider: React.FC<TaskProviderProps> = ({ children, testing =
     }, 60000);
 
     return () => clearInterval(intervalId); // Cleanup on component unmount
-  }, [refreshTasks]);
+  }, [refreshTasks, showCompleted]);
 
   return (
     <TaskContext.Provider
-      value={{ tasks, refreshTasks, setRefreshTasks, getTasks, existingTags }}
+      value={{
+        tasks,
+        refreshTasks,
+        setRefreshTasks,
+        getTasks,
+        existingTags,
+        showCompleted,
+        setShowCompleted,
+      }}
     >
       {children}
     </TaskContext.Provider>

diff --git a/zettelkasten-front/src/pages/tasks/TaskPage.tsx b/zettelkasten-front/src/pages/tasks/TaskPage.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, ChangeEvent, useMemo } from "react";
 import { Task } from "../../models/Task";
 import { TaskList } from "../../components/tasks/TaskList";
+import { TaskPageOptionsMenu } from "../../components/tasks/TaskPageOptionsMenu";
 import { CreateTaskWindow } from "../../components/tasks/CreateTaskWindow";
 import { useTaskContext } from "../../contexts/TaskContext";
 import { useTagContext } from "../../contexts/TagContext";
@@ -20,26 +21,14 @@ import { filterTasks } from "../../utils/tasks";
 interface TaskListProps {}
 
 export function TaskPage({}: TaskListProps) {
-  const { tasks, setRefreshTasks } = useTaskContext();
+  const { tasks, setRefreshTasks, showCompleted } = useTaskContext();
   const [dateView, setDateView] = useState<string>("today");
-  const [refresh, setRefresh] = useState<boolean>(true);
   const { showCreateTaskWindow, setShowCreateTaskWindow } =
     useShortcutContext();
   const [filterString, setFilterString] = useState<string>("");
-  const [showCompleted, setShowCompleted] = useState<boolean>(false);
 
   const { tags } = useTagContext();
 
-  const [activeTab, setActiveTab] = useState("Open");
-  const openTasksCount = tasks.filter((task) => !task.is_complete).length;
-  const closedTasksCount = tasks.filter((task) => task.is_complete).length;
-  const allTasksCount = tasks.length;
-  const tabs = [
-    { label: "Open", count: openTasksCount },
-    { label: "Closed", count: closedTasksCount },
-    { label: "All", count: allTasksCount },
-  ];
-
   function handleFilterChange(
     e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
   ) {
@@ -50,15 +39,6 @@ export function TaskPage({}: TaskListProps) {
     setDateView(e.target.value);
   }
   function changeDateView(task: Task): boolean {
-    // Handle filtering based on the active tab
-    if (activeTab === "Open" && task.is_complete) {
-      return false;
-    }
-
-    if (activeTab === "Closed" && !task.is_complete) {
-      return false;
-    }
-
     // Handle further filtering based on the date view
     if (dateView === "all") {
       // Only show completed tasks if the "Closed" tab is active
@@ -107,14 +87,6 @@ export function TaskPage({}: TaskListProps) {
     setFilterString("#" + tag);
   }
 
-  function handleTabClick(label: string) {
-    setActiveTab(label);
-    if (label === "Closed") {
-      setShowCompleted(true);
-    } else {
-      setShowCompleted(false);
-    }
-  }
   const handleKeyPress = (event: KeyboardEvent) => {
     // if this is true, the user is using a system shortcut, don't do anything with it
     if (event.metaKey) {
@@ -144,27 +116,6 @@ export function TaskPage({}: TaskListProps) {
   }, []);
   return (
     <div>
-      <div className="flex items-center space-x-4">
-        {tabs.map((tab) => (
-          <span
-            key={tab.label}
-            onClick={() => handleTabClick(tab.label)}
-            className={`
-            cursor-pointer font-medium py-1.5 px-3 rounded-md flex items-center
-            ${
-              activeTab === tab.label
-                ? "text-blue-600 border-b-4 border-blue-600"
-                : "text-gray-600 hover:text-gray-800 hover:bg-gray-100"
-            }
-          `}
-          >
-            {tab.label}
-            <span className="ml-1 text-xs font-semibold bg-gray-200 rounded-full px-2 py-0.5 text-gray-700">
-              {tab.count}
-            </span>
-          </span>
-        ))}
-      </div>
       <div className="bg-slate-200 p-2 border-slate-400 border">
         <div className="flex">
           <select className="mb-5" value={dateView} onChange={handleDateChange}>
@@ -188,6 +139,7 @@ export function TaskPage({}: TaskListProps) {
             tags={tags.filter((tag) => tag.task_count > 0)}
             handleTagClick={handleTagClick}
           />
+          <TaskPageOptionsMenu />
         </div>
       </div>
       <div>