From aef6ec8749e327c8c59176395efdd271c4e284ae Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Tue, 1 Sep 2026 20:14:03 +0100
Subject: [PATCH] Enhance SortSidebarButton with Badge and Sorting State
 Management

- Integrated Badge component to display the count of active sorters in the SortSidebarButton.
- Utilized useLocation and useTableState hooks to manage sorting state based on the current route.
- Updated TableStateContext to include pageSorters state and setPageSorter function for improved sorting functionality across the dashboard.
---
 .../Dashboard/common/SortSidebarButton.jsx    | 48 ++++++++++++-------
 .../Dashboard/context/TableStateContext.jsx   | 35 ++++++++++++--
 2 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/src/components/Dashboard/common/SortSidebarButton.jsx b/src/components/Dashboard/common/SortSidebarButton.jsx
index 4d561b58..3de33001 100644
--- a/src/components/Dashboard/common/SortSidebarButton.jsx
+++ b/src/components/Dashboard/common/SortSidebarButton.jsx
@@ -1,23 +1,39 @@
 import PropTypes from 'prop-types'
-import { Button } from 'antd'
+import { Badge, Button } from 'antd'
+import { useLocation } from 'react-router-dom'
 import SortCircleFilledIcon from '../../Icons/SortCircleFilledIcon'
 import SortCircleIcon from '../../Icons/SortCircleIcon'
+import { useTableState } from '../context/TableStateContext'
 
-const SortSidebarButton = ({ active, onClick, ...buttonProps }) => (
-  <Button
-    icon={
-      active ? (
-        <SortCircleFilledIcon style={{ color: 'var(--color-primary)' }} />
-      ) : (
-        <SortCircleIcon />
-      )
-    }
-    onClick={onClick}
-    type={'default'}
-    title={active ? 'Hide sort sidebar' : 'Show sort sidebar'}
-    {...buttonProps}
-  />
-)
+const SortSidebarButton = ({ active, onClick, ...buttonProps }) => {
+  const location = useLocation()
+  const { pageSorters } = useTableState()
+  const sorter = pageSorters[location.pathname]
+  const count = sorter?.field && sorter?.order ? 1 : 0
+
+  return (
+    <Badge
+      count={count}
+      size='small'
+      offset={[-4, 4]}
+      style={{ padding: 0, fontWeight: 600 }}
+    >
+      <Button
+        icon={
+          active ? (
+            <SortCircleFilledIcon style={{ color: 'var(--color-primary)' }} />
+          ) : (
+            <SortCircleIcon />
+          )
+        }
+        onClick={onClick}
+        type={'default'}
+        title={active ? 'Hide sort sidebar' : 'Show sort sidebar'}
+        {...buttonProps}
+      />
+    </Badge>
+  )
+}
 
 SortSidebarButton.propTypes = {
   active: PropTypes.bool.isRequired,
diff --git a/src/components/Dashboard/context/TableStateContext.jsx b/src/components/Dashboard/context/TableStateContext.jsx
index a9b98d6f..c5c7b3df 100644
--- a/src/components/Dashboard/context/TableStateContext.jsx
+++ b/src/components/Dashboard/context/TableStateContext.jsx
@@ -96,6 +96,7 @@ const normalizeSorter = (sorter) => {
 export const TableStateProvider = ({ children }) => {
   const [searchParams, setSearchParams] = useSearchParams()
   const [pageFilters, setPageFilters] = useState({})
+  const [pageSorters, setPageSorters] = useState({})
 
   const getPersistedFilter = useCallback(
     (scope, { useFilterInUrl = false, useFilterInSession = false } = {}) => {
@@ -231,6 +232,19 @@ export const TableStateProvider = ({ children }) => {
     })
   }, [])
 
+  const setPageSorter = useCallback((path, sorter) => {
+    const hasSort = sorter?.field && sorter?.order
+    setPageSorters((prev) => {
+      if (!hasSort) {
+        if (!(path in prev)) return prev
+        const next = { ...prev }
+        delete next[path]
+        return next
+      }
+      return { ...prev, [path]: { field: sorter.field, order: sorter.order } }
+    })
+  }, [])
+
   const hasPageFilter = useCallback(
     (path) => Object.keys(pageFilters[path] || {}).length > 0,
     [pageFilters]
@@ -246,9 +260,11 @@ export const TableStateProvider = ({ children }) => {
       persistSort,
       persistTableState,
       setPageFilter,
+      setPageSorter,
       hasPageFilter,
       hasStoredFilter,
-      pageFilters
+      pageFilters,
+      pageSorters
     }),
     [
       getPersistedFilter,
@@ -257,9 +273,11 @@ export const TableStateProvider = ({ children }) => {
       persistSort,
       persistTableState,
       setPageFilter,
+      setPageSorter,
       hasPageFilter,
       hasStoredFilter,
-      pageFilters
+      pageFilters,
+      pageSorters
     ]
   )
 
@@ -298,7 +316,8 @@ export const useTableStatePersistence = ({
     persistFilter: persistFilterCtx,
     persistSort: persistSortCtx,
     persistTableState: persistTableStateCtx,
-    setPageFilter
+    setPageFilter,
+    setPageSorter
   } = useTableState()
 
   const readOptions = useMemo(
@@ -351,6 +370,15 @@ export const useTableStatePersistence = ({
     [pagePath, setPageFilter]
   )
 
+  const registerPageSorter = useCallback(
+    (sorter) => {
+      if (pagePath) {
+        setPageSorter(pagePath, sorter)
+      }
+    },
+    [pagePath, setPageSorter]
+  )
+
   return {
     getPersistedFilter,
     getPersistedSorter,
@@ -358,6 +386,7 @@ export const useTableStatePersistence = ({
     persistSort,
     persistTableState,
     registerPageFilter,
+    registerPageSorter,
     getActiveFilterValues
   }
 }