WIP sort assigned tasks

src/backend/routers/para.ts

@@ -40,7 +40,7 @@ export const para = router({
         first_name: z.string(),
         last_name: z.string(),
         email: z.string().email(),
-      })
+      }),
     )
     .mutation(async (req) => {
       const { email } = req.input;
@@ -51,7 +51,7 @@ export const para = router({
         req.ctx.auth.session.user?.name ?? "",
         req.ctx.env.EMAIL,
         email,
-        req.ctx.env
+        req.ctx.env,
       );
 
       return para;
@@ -70,7 +70,7 @@ export const para = router({
       .innerJoin("goal", "subgoal.goal_id", "goal.goal_id")
       .innerJoin("iep", "goal.iep_id", "iep.iep_id")
       .innerJoin("student", "iep.student_id", "student.student_id")
-      .where("task.assignee_id", "=", userId)
+      //.where("task.assignee_id", "=", userId)
       .select((eb) => [
         "task.task_id",
         "student.first_name",
@@ -90,7 +90,7 @@ export const para = router({
           .where("trial_data.created_by_user_id", "=", userId)
           .where("trial_data.submitted", "=", true)
           .select(({ fn }) =>
-            fn.count("trial_data.trial_data_id").as("completed_trials")
+            fn.count("trial_data.trial_data_id").as("completed_trials"),
           )
           .as("completed_trials"),
       ])

src/pages/benchmarks/index.tsx

@@ -1,4 +1,5 @@
 import { trpc } from "@/client/lib/trpc";
+//import { type Task } from "@/types/global";
 import TaskCard from "@/components/taskCard/taskCard";
 import $typo from "@/styles/Typography.module.css";
 import FilterAlt from "@mui/icons-material/FilterAlt";
@@ -7,26 +8,83 @@ 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";
 
+type SortProperty = "first_name";
+type SortDirection = "asc" | "desc";
+
 function Benchmarks() {
+  // const [sortProperty, setSortProperty] = useState<SortField>("name");
+  // const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
+  // const [sortedStudents, setSortedStudents] = useState<Student[]>([]);
+
+  // // Fetch students using tRPC
+  // const { data: tasksData, isLoading, error } = trpc.students.getAll.useQuery();
+
+  // const [sortedTasks, setSortedTasks] = useState<Task[]>([]);
+  // const [sortedTasks, setSortedTasks] = useState([]);
+
+  // useEffect(() => {
+  //   if (Array.isArray(tasksData)) {
+  //     setSortedTasks(tasksData as Task[]);
+  //   }
+  // }, [tasksData]);
+
+  // useEffect(() => {
+  //   const sortTasks = (sortByType: string) => {
+  //     console.log(sortByType);
+  //     const sortedData =
+  //       tasksData?.sort((a, b) => (a.first_name < b.first_name ? -1 : 1)) ?? [];
+  //     setSortedTasks(sortedData);
+  //     console.log("UHHHHHHHHHHHHHHHHHHHHH");
+  //   };
+
+  //   sortTasks(sortProperty);
+  // }, [sortProperty, tasksData]);
+
   const [isPara, setIsPara] = useState(false);
-  const { data: tasks, isLoading } = trpc.para.getMyTasks.useQuery();
+
+  const [sortProperty, setSortProperty] = useState<SortProperty>("first_name");
+  const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
+
+  const { data: tasksData, isLoading, error } = 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;
+    });
+  };
+
+  const handleSort = (property: SortProperty) => {
+    if (property === sortProperty) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortProperty(property);
+      setSortDirection("asc");
+    }
+  };
+
+  const displayedTasks = getSortedTasks();
+
   if (isLoading) {
     return <div>Loading...</div>;
   }
 
   return (
     <>
-      {tasks?.length === 0 ? (
+      {displayedTasks?.length === 0 ? (
         <Container sx={{ marginTop: "4rem" }}>
           <Box
             sx={{
@@ -102,13 +160,26 @@ function Benchmarks() {
               >
                 <Sort /> Sort <KeyboardArrowDown />
               </span>
+
+              <button
+                onClick={() => handleSort("first_name")}
+                className={`${$button.pilled}`}
+                style={{
+                  display: "flex",
+                  maxWidth: "fit-content",
+                  alignItems: "center",
+                  gap: "4px",
+                }}
+              >
+                <Sort /> Sort
+              </button>
             </div>
           </Box>
 
           <Box sx={{ height: "75vh", overflowY: "scroll" }}>
-            {tasks?.map((task) => {
+            {displayedTasks?.map((task) => {
               const completed = Math.floor(
-                Number(task.completed_trials) / Number(task.number_of_trials)
+                Number(task.completed_trials) / Number(task.number_of_trials),
               );
               return (
                 <div key={task.task_id} className={$typo.noDecoration}>

src/types/global.ts

@@ -2,5 +2,6 @@ import { SelectableForTable } from "zapatos/schema";
 
 export type Goal = SelectableForTable<"goal">;
 export type Subgoal = SelectableForTable<"subgoal">;
+export type Task = SelectableForTable<"task">;
 export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
 export type FormEvent = React.FormEvent<HTMLFormElement>;