Explicitly type getMyTasks and use useEffect instead of getSortedTasks

Author: canjalal

src/backend/routers/para.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { hasCaseManager, hasPara, router } from "../trpc";
 import { createPara } from "../lib/db_helpers/case_manager";
+import { TaskData } from "@/types/global";
 
 export const para = router({
   getParaById: hasCaseManager
@@ -60,7 +61,7 @@ export const para = router({
       // TODO elsewhere: add "email_verified_at" timestamp when para first signs in with their email address (entered into db by cm)
     }),
 
-  getMyTasks: hasPara.query(async (req) => {
+  getMyTasks: hasPara.query(async (req): Promise<TaskData[]> => {
     const { userId } = req.ctx.auth;
 
     const result = await req.ctx.db

src/pages/benchmarks/index.tsx

@@ -7,35 +7,41 @@ import Sort from "@mui/icons-material/Sort";
 import { Box, Container } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import $button from "../../components/design_system/button/Button.module.css";
 import noBenchmarks from "../../public/img/no-benchmarks.png";
 import SearchIcon from "@mui/icons-material/Search";
-import { SortDirection, SortProperty } from "@/types/global";
+import { SortDirection, SortProperty, TaskData } from "@/types/global";
 
 function Benchmarks() {
   const [isPara, setIsPara] = useState(false);
 
   const [sortProperty, setSortProperty] = useState<SortProperty>("first_name");
   const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
 
+  const [displayedTasks, setDisplayedTasks] = useState<TaskData[]>([]);
+
   const { data: tasksData, isLoading } = trpc.para.getMyTasks.useQuery();
 
   const handleTogglePara = () => {
     setIsPara(!isPara);
   };
 
-  const getSortedTasks = () => {
-    if (!tasksData) return [];
-
-    return [...tasksData].sort((a, b) => {
-      if (a[sortProperty] < b[sortProperty])
-        return sortDirection === "asc" ? -1 : 1;
-      if (a[sortProperty] > b[sortProperty])
-        return sortDirection === "asc" ? 1 : -1;
-      return 0;
-    });
-  };
+  useEffect(() => {
+    if (!tasksData) {
+      setDisplayedTasks([]);
+    } else {
+      setDisplayedTasks(
+        [...tasksData].sort((a, b) => {
+          if (a[sortProperty] < b[sortProperty])
+            return sortDirection === "asc" ? -1 : 1;
+          if (a[sortProperty] > b[sortProperty])
+            return sortDirection === "asc" ? 1 : -1;
+          return 0;
+        })
+      );
+    }
+  }, [sortDirection, sortProperty, tasksData]);
 
   const handleSort = (property: SortProperty) => {
     if (property === sortProperty) {
@@ -46,8 +52,6 @@ function Benchmarks() {
     }
   };
 
-  const displayedTasks = getSortedTasks();
-
   if (isLoading) {
     return <div>Loading...</div>;
   }

src/types/global.ts

@@ -7,3 +7,18 @@ export type FormEvent = React.FormEvent<HTMLFormElement>;
 
 export type SortProperty = "first_name";
 export type SortDirection = "asc" | "desc";
+
+export interface TaskData {
+  task_id: string;
+  first_name: string;
+  last_name: string;
+  category: string;
+  description: string;
+  instructions: string | null;
+  attempts_per_trial: number | null;
+  number_of_trials: number | null;
+  due_date: Date | null;
+  trial_count: number | null;
+  seen: boolean;
+  completed_trials: string | number | bigint | null;
+}