From c80d5c6bbf2b21fb88af0a5d17f955c4a49055a0 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Sun, 24 Apr 2022 19:18:19 -0400
Subject: [PATCH] fix sort when click on icon and 3-way sort cycle

---
 interface/src/project/DashboardData.tsx         |  3 ++-
 interface/src/project/SettingsCustomization.tsx | 10 +++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/interface/src/project/DashboardData.tsx b/interface/src/project/DashboardData.tsx
index 7f59fb344..ca8781858 100644
--- a/interface/src/project/DashboardData.tsx
+++ b/interface/src/project/DashboardData.tsx
@@ -24,7 +24,7 @@ import { useSnackbar } from 'notistack';
 
 import { Table } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
-import { useSort } from '@table-library/react-table-library/sort';
+import { useSort, SortToggleType } from '@table-library/react-table-library/sort';
 import { Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
 import { useRowSelect } from '@table-library/react-table-library/select';
 
@@ -270,6 +270,7 @@ const DashboardData: FC = () => {
         iconUp: <KeyboardArrowUpOutlinedIcon />,
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },
+      sortToggleType: SortToggleType.AlternateWithReset,
       sortFns: {
         NAME: (array) => array.sort((a, b) => a.id.slice(2).localeCompare(b.id.slice(2)))
       }
diff --git a/interface/src/project/SettingsCustomization.tsx b/interface/src/project/SettingsCustomization.tsx
index bb1a031bd..c8c020ddf 100644
--- a/interface/src/project/SettingsCustomization.tsx
+++ b/interface/src/project/SettingsCustomization.tsx
@@ -18,7 +18,7 @@ import {
 
 import { Table } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
-import { useSort } from '@table-library/react-table-library/sort';
+import { useSort, SortToggleType } from '@table-library/react-table-library/sort';
 import { Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
 
 import { useSnackbar } from 'notistack';
@@ -145,17 +145,13 @@ const SettingsCustomization: FC = () => {
         iconUp: <KeyboardArrowUpOutlinedIcon />,
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },
+      sortToggleType: SortToggleType.AlternateWithReset,
       sortFns: {
         NAME: (array) => array.sort((a, b) => a.id.localeCompare(b.id))
       }
     }
   );
 
-  const sort_name = () => {
-    console.log(entity_sort);
-    entity_sort.fns.onToggleSort({ sortKey: 'NAME' });
-  };
-
   const fetchDevices = useCallback(async () => {
     try {
       setDevices((await EMSESP.readDevices()).data);
@@ -434,7 +430,7 @@ const SettingsCustomization: FC = () => {
                       fullWidth
                       style={{ fontSize: '14px', justifyContent: 'flex-start' }}
                       endIcon={getSortIcon(entity_sort.state, 'NAME')}
-                      onClick={() => sort_name()}
+                      onClick={() => entity_sort.fns.onToggleSort({ sortKey: 'NAME' })}
                     >
                       NAME
                     </Button>