add sort by name to assigned

Co-authored-by: Vincent Shuali <vincent.shuali@gmail.com>
sfbrigade · Nov 1, 2024 · 55e8c39 · 55e8c39
1 parent 3c95751
commit 55e8c39
Showing 1 changed file with 54 additions and 4 deletions.
diff --git a/src/pages/benchmarks/index.tsx b/src/pages/benchmarks/index.tsx
@@ -12,21 +12,50 @@ 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 [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={{
@@ -90,7 +119,12 @@ function Benchmarks() {
                 <FilterAlt /> Filter <KeyboardArrowDown />
               </span>
 
-              {/* Sort Pill Placeholder*/}
+              {
+                // TODO: replace simple sort pill w/this sort pill placeholder
+                /*
+              TODO: replace simple sort pill w/this sort pill placeholder
+
+              Sort Pill Placeholder
               <span
                 className={`${$button.pilled}`}
                 style={{
@@ -102,11 +136,27 @@ function Benchmarks() {
               >
                 <Sort /> Sort <KeyboardArrowDown />
               </span>
+              */
+              }
+
+              {/* simple sort pill POC (see TODO above) */}
+              <button
+                onClick={() => handleSort("first_name")}
+                className={`${$button.pilled}`}
+                style={{
+                  display: "flex",
+                  maxWidth: "fit-content",
+                  alignItems: "center",
+                  gap: "4px",
+                }}
+              >
+                <Sort /> Sort by name
+              </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)
               );