From 2068b7470bc75c4976308246e8b707b4171422b5 Mon Sep 17 00:00:00 2001
From: Tom Butcher <tom@tombutcher.work>
Date: Sun, 9 Aug 2026 13:28:23 +0100
Subject: [PATCH] Refactor ObjectTable and ObjectTableNavigationButtons for
 improved state management

- Updated imports in ObjectTable and ObjectTableNavigationButtons to include getActiveFilterValues from TableStateContext.
- Simplified the useTableStatePersistence hook calls by removing unnecessary destructured values.
- Enhanced navigation button handlers with useCallback for better performance and readability.
- Added keyboard shortcuts for previous and next navigation, improving user experience.
---
 .../Dashboard/common/ObjectTable.jsx          |  8 ++--
 .../common/ObjectTableNavigationButtons.jsx   | 41 ++++++++++++-------
 .../Dashboard/context/AppUpdateContext.jsx    |  1 +
 .../Dashboard/context/TableStateContext.jsx   |  4 ++
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/components/Dashboard/common/ObjectTable.jsx b/src/components/Dashboard/common/ObjectTable.jsx
index 7b582ac..6d3f666 100644
--- a/src/components/Dashboard/common/ObjectTable.jsx
+++ b/src/components/Dashboard/common/ObjectTable.jsx
@@ -47,7 +47,10 @@ import { useActions } from '../context/ActionsContext'
 import ActionsIcon from '../../Icons/ActionsIcon'
 import FilterIcon from '../../Icons/FilterIcon'
 import ScrollBox from './ScrollBox'
-import { useTableStatePersistence } from '../context/TableStateContext'
+import {
+  getActiveFilterValues,
+  useTableStatePersistence
+} from '../context/TableStateContext'
 
 const logger = loglevel.getLogger('DasboardTable')
 logger.setLevel(config.logLevel)
@@ -154,8 +157,7 @@ const ObjectTable = forwardRef(
       getPersistedSorter,
       persistFilter,
       persistTableState,
-      registerPageFilter,
-      getActiveFilterValues
+      registerPageFilter
     } = useTableStatePersistence({
       scope: type,
       pagePath: location.pathname,
diff --git a/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx b/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx
index d0171fa..e79eea3 100644
--- a/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx
+++ b/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx
@@ -6,7 +6,10 @@ import ArrowRightIcon from '../../Icons/ArrowRightIcon.jsx'
 import PropTypes from 'prop-types'
 import { ApiServerContext } from '../context/ApiServerContext'
 import { AuthContext } from '../context/AuthContext'
-import { useTableStatePersistence } from '../context/TableStateContext'
+import {
+  getActiveFilterValues,
+  useTableStatePersistence
+} from '../context/TableStateContext'
 import KeyboardShortcut from './KeyboardShortcut.jsx'
 
 const ObjectTableNavigationButtons = ({
@@ -21,8 +24,7 @@ const ObjectTableNavigationButtons = ({
   const [neighbors, setNeighbors] = useState({ next: null, previous: null })
   const [loading, setLoading] = useState(false)
 
-  const { getPersistedFilter, getPersistedSorter, getActiveFilterValues } =
-    useTableStatePersistence({
+  const { getPersistedFilter, getPersistedSorter } = useTableStatePersistence({
       scope: objectType,
       useFilterInSession: true,
       useSortInSession: true
@@ -87,8 +89,25 @@ const ObjectTableNavigationButtons = ({
     [searchParams, setSearchParams, objectType]
   )
 
-  const handlePrevious = () => navigateToNeighbor(neighbors.previous)
-  const handleNext = () => navigateToNeighbor(neighbors.next)
+  const handlePrevious = useCallback(() => {
+    navigateToNeighbor(neighbors.previous)
+  }, [navigateToNeighbor, neighbors.previous])
+
+  const handleNext = useCallback(() => {
+    navigateToNeighbor(neighbors.next)
+  }, [navigateToNeighbor, neighbors.next])
+
+  const handlePreviousShortcut = useCallback(() => {
+    if (!disabled && !loading && neighbors.previous?._id) {
+      handlePrevious()
+    }
+  }, [disabled, loading, neighbors.previous?._id, handlePrevious])
+
+  const handleNextShortcut = useCallback(() => {
+    if (!disabled && !loading && neighbors.next?._id) {
+      handleNext()
+    }
+  }, [disabled, loading, neighbors.next?._id, handleNext])
 
   return (
     <Flex gap='small' align='center'>
@@ -99,11 +118,7 @@ const ObjectTableNavigationButtons = ({
         <KeyboardShortcut
           shortcut='alt+arrowleft'
           hint='ALT ←'
-          onTrigger={useCallback(() => {
-            if (!disabled && !loading && neighbors.previous?._id) {
-              handlePrevious()
-            }
-          }, [disabled, loading, neighbors.previous?._id])}
+          onTrigger={handlePreviousShortcut}
         >
           <Button
             icon={<ArrowLeftIcon />}
@@ -114,11 +129,7 @@ const ObjectTableNavigationButtons = ({
         <KeyboardShortcut
           shortcut='alt+arrowright'
           hint='ALT →'
-          onTrigger={useCallback(() => {
-            if (!disabled && !loading && neighbors.next?._id) {
-              handleNext()
-            }
-          }, [disabled, loading, neighbors.next?._id])}
+          onTrigger={handleNextShortcut}
         >
           <Button
             icon={<ArrowRightIcon />}
diff --git a/src/components/Dashboard/context/AppUpdateContext.jsx b/src/components/Dashboard/context/AppUpdateContext.jsx
index e223f6b..8cb3be4 100644
--- a/src/components/Dashboard/context/AppUpdateContext.jsx
+++ b/src/components/Dashboard/context/AppUpdateContext.jsx
@@ -27,6 +27,7 @@ const DEFAULT_UPDATE_ENGINE = 'native'
 const CURRENT_BUILD_NUMBER = import.meta.env.VITE_BUILD_NUMBER
 const APP_UPDATE_DISMISSED_KEY = 'appUpdateDismissed'
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const normalizeAppUpdateEngine = (engine) => {
   const value = String(engine || '')
     .trim()
diff --git a/src/components/Dashboard/context/TableStateContext.jsx b/src/components/Dashboard/context/TableStateContext.jsx
index 59981db..a9b98d6 100644
--- a/src/components/Dashboard/context/TableStateContext.jsx
+++ b/src/components/Dashboard/context/TableStateContext.jsx
@@ -16,6 +16,7 @@ export const SORT_URL_PARAM = 'sort'
 const getSessionFilterKey = (scope) => `tableState:${scope}:filter`
 const getSessionSortKey = (scope) => `tableState:${scope}:sort`
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const getActiveFilterValues = (filterState) => {
   const active = {}
   Object.entries(filterState || {}).forEach(([k, v]) => {
@@ -51,6 +52,7 @@ const readFilterFromSession = (scope) => {
   }
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const hasStoredSessionFilter = (scope) => {
   if (!scope) return false
   return Object.keys(getActiveFilterValues(readFilterFromSession(scope) || {})).length > 0
@@ -268,6 +270,7 @@ export const TableStateProvider = ({ children }) => {
   )
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const useTableState = () => {
   const context = useContext(TableStateContext)
   if (!context) {
@@ -276,6 +279,7 @@ export const useTableState = () => {
   return context
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const useTableStatePersistence = ({
   scope,
   pagePath,