Merge branch 'table_sorting' into staging_environment

src/common/ResponsiveTable.tsx

@@ -391,8 +391,20 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   const columnClick = (column: Column<T>) => {
     const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
     // console.log(column.sortKey)
-    if (setOrderBy) setOrderBy(sortKey)
-    if (setOrder && order) setOrder(order === "asc" ? "desc" : "asc")
+    if (setOrderBy) {
+      if (orderBy === sortKey && setOrder && order) {
+        if (order === "desc") {
+          setOrder("asc")
+        } else {
+          setOrderBy("")
+        }
+        // setOrder(order === "asc" ? "desc" : "asc")
+      } else {
+        if (setOrder) setOrder("desc")
+        setOrderBy(sortKey)
+      }
+    }
+    // if (setOrder && order) setOrder(order === "asc" ? "desc" : "asc")
   }
 
   const showOrderIcon = (column: Column<T>) => {

src/pages/Devices.tsx

@@ -94,8 +94,30 @@ export default function Devices() {
   const [devicesLoading, setDevicesLoading] = useState(false)
   const [limit, setLimit] = useState(10);
   const [page, setPage] = useState(0);
-  const [order, setOrder] = useState<"asc" | "desc">("asc");
-  const [orderBy, setOrderBy] = useState("name");
+
+  const [order, setOrder] = useState<"asc" | "desc">(() => {
+    // Load from sessionStorage on initial render
+    const savedOrder = sessionStorage.getItem('order');
+    return (savedOrder === "asc" || savedOrder === "desc") ? savedOrder : "asc";
+  });
+
+  // Save to sessionStorage whenever order changes
+  useEffect(() => {
+    sessionStorage.setItem('order', order);
+  }, [order]);
+
+  const [orderBy, setOrderBy] = useState(() => {
+    // Load from sessionStorage on initial render
+    const savedOrder = sessionStorage.getItem('orderBy');
+    return (savedOrder && savedOrder?.length > 0) ? savedOrder : "name";
+  });
+
+  // Save to sessionStorage whenever order changes
+  useEffect(() => {
+    sessionStorage.setItem('orderBy', orderBy);
+  }, [orderBy]);
+
+  // const [orderBy, setOrderBy] = useState("name");
   const [search, setSearch] = useState("");
   const [total, setTotal] = useState(0);
   const [devices, setDevices] = useState<Device[]>([])
@@ -344,10 +366,6 @@ export default function Devices() {
     if (newValue === "never") openGroupSettings(undefined, "add");
   };
 
-  useEffect(() => {
-    console.log(devices)
-  }, [devices])
-
   const columns = (): Column<Device>[] => {
     let columns: Column<Device>[] = [
       {