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 }) => (
-
- ) : (
-
- )
- }
- 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 (
+
+
+ ) : (
+
+ )
+ }
+ onClick={onClick}
+ type={'default'}
+ title={active ? 'Hide sort sidebar' : 'Show sort sidebar'}
+ {...buttonProps}
+ />
+
+ )
+}
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
}
}