Build page sorting by name (#53)

* added sort by build name * added sortOrderBy for future sorting needs
PlayFab · Sep 21, 2022 · 6ddebe3 · 6ddebe3
1 parent 63294dc
commit 6ddebe3
Showing 1 changed file with 64 additions and 10 deletions.
diff --git a/src/GameServerBuildDetail/GameServerTable.tsx b/src/GameServerBuildDetail/GameServerTable.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import GameServerTableItem from "./GameServerTableItem";
-import { Box, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, Paper } from "@mui/material";
+import { Box, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, Paper, TableSortLabel } from "@mui/material";
 import { GameServer } from "../types";
 import TablePaginationActions from "../Common/TablePaginationActions";
 import { visuallyHidden } from '@mui/utils';
@@ -13,6 +13,8 @@ interface GameServerTableProps {
 
 function GameServerTable({ clusterApi, gsList, gsdByName }: GameServerTableProps) {
   const [page, setPage] = useState(0);
+  const [sortOrder, setSortOrder] = useState("asc");
+  const [sortOrderBy, setSortOrderBy] = useState("name");
   const rowsPerPage = 10;
 
   const emptyRows =
@@ -25,31 +27,83 @@ function GameServerTable({ clusterApi, gsList, gsdByName }: GameServerTableProps
     setPage(newPage);
   };
 
+  function descendingComparator(
+    a: GameServer,
+    b: GameServer,
+    orderBy: string
+  ): number {
+    switch (orderBy) {
+      case "name":
+        if (b.metadata.name < a.metadata.name) {
+          return -1;
+        }
+        if (b.metadata.name > a.metadata.name) {
+          return 1;
+        }
+        break;
+      default:
+        break;
+    }
+    return 0;
+  }
+
+  const sortHandler =
+    (property: string) => (event: React.MouseEvent<unknown>) => {
+      const isAsc = sortOrderBy === property && sortOrder === "asc";
+      setSortOrder(isAsc ? "desc" : "asc");
+      setSortOrderBy(property);
+    };
+
   const items = useMemo(() => {
-    const sortedGs = gsList.sort((a: GameServer, b: GameServer) => a.metadata.name > b.metadata.name ? 1 : (a.metadata.name < b.metadata.name ? -1 : 0));
+    function getComparator(
+      order: string,
+      orderBy: string
+    ): (
+      a: GameServer,
+      b: GameServer
+    ) => number {
+      return order === 'desc'
+        ? (a, b) => descendingComparator(a, b, orderBy)
+        : (a, b) => -descendingComparator(a, b, orderBy);
+    }
+    const sortedGs = gsList.sort(getComparator(sortOrder, sortOrderBy));
     return sortedGs.map((gs, index) => <GameServerTableItem key={index} clusterApi={clusterApi} gs={gs} gsd={gsdByName[gs.metadata.name]} />);
-  }, [clusterApi, gsList, gsdByName]);
+  }, [clusterApi, gsList, gsdByName, sortOrder, sortOrderBy]);
 
   return (
     <TableContainer component={Paper}>
       <Table sx={{ minWidth: 500 }}>
         <TableHead>
           <TableRow>
-            <TableCell>Name</TableCell>
+            <TableCell sortDirection={sortOrderBy === "name"? (sortOrder === "asc" ? "asc" : "desc") : false}>
+              <TableSortLabel
+                active={true}
+                direction={sortOrderBy === "name"? (sortOrder === "asc" ? "asc" : "desc") : "asc"}
+                onClick={sortHandler("name")}
+              >
+                Name
+                {sortOrderBy === "name" ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {sortOrder === "desc" ? "sorted descending" : "sorted ascending"}
+                </Box>
+              ) : null}
+              </TableSortLabel>
+            </TableCell>
             <TableCell>Namespace</TableCell>
             <TableCell>Health</TableCell>
             <TableCell>State</TableCell>
             <TableCell>Public IP</TableCell>
             <TableCell>Ports</TableCell>
             <TableCell>Player Count</TableCell>
-            <TableCell aria-label="Actions"><Box sx={visuallyHidden}>Actions</Box></TableCell>
+            <TableCell aria-label="Actions">
+              <Box sx={visuallyHidden}>Actions</Box>
+            </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {(rowsPerPage > 0
+          {rowsPerPage > 0
             ? items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-            : items
-          )}
+            : items}
           {emptyRows > 0 && (
             <TableRow style={{ height: 53 * emptyRows }}>
               <TableCell colSpan={7} />
@@ -66,7 +120,7 @@ function GameServerTable({ clusterApi, gsList, gsdByName }: GameServerTableProps
               page={page}
               SelectProps={{
                 inputProps: {
-                  'aria-label': 'rows per page',
+                  "aria-label": "rows per page",
                 },
                 native: true,
               }}
@@ -80,4 +134,4 @@ function GameServerTable({ clusterApi, gsList, gsdByName }: GameServerTableProps
   );
 }
 
-export default GameServerTable;
+export default GameServerTable;