3 files changed, 7 insertions, 6 deletions
diff --git a/modern/src/main/DeviceRow.js b/modern/src/main/DeviceRow.js
index 11dbfdcb..5699c274 100644
--- a/modern/src/main/DeviceRow.js
+++ b/modern/src/main/DeviceRow.js
@@ -19,8 +19,8 @@ import {
 import { useTranslation } from '../common/components/LocalizationProvider';
 import { mapIconKey, mapIcons } from '../map/core/preloadImages';
 import { useAdministrator } from '../common/util/permissions';
-import usePersistedState from '../common/util/usePersistedState';
 import { ReactComponent as EngineIcon } from '../resources/images/data/engine.svg';
+import { useAttributePreference } from '../common/util/preferences';
 
 const useStyles = makeStyles((theme) => ({
   icon: {
@@ -59,8 +59,8 @@ const DeviceRow = ({ data, index, style }) => {
 
   const geofences = useSelector((state) => state.geofences.items);
 
-  const [devicePrimary] = usePersistedState('devicePrimary', 'name');
-  const [deviceSecondary] = usePersistedState('deviceSecondary', '');
+  const devicePrimary = useAttributePreference('devicePrimary', 'name');
+  const deviceSecondary = useAttributePreference('deviceSecondary', '');
 
   const formatProperty = (key) => {
     if (key === 'geofenceIds') {
diff --git a/modern/src/main/MainMap.js b/modern/src/main/MainMap.js
index 81d214f9..279f3a85 100644
--- a/modern/src/main/MainMap.js
+++ b/modern/src/main/MainMap.js
@@ -11,7 +11,6 @@ import PoiMap from '../map/main/PoiMap';
 import MapPadding from '../map/MapPadding';
 import { devicesActions } from '../store';
 import MapDefaultCamera from '../map/main/MapDefaultCamera';
-import usePersistedState from '../common/util/usePersistedState';
 import MapLiveRoutes from '../map/main/MapLiveRoutes';
 import MapPositions from '../map/MapPositions';
 import MapOverlay from '../map/overlay/MapOverlay';
@@ -19,6 +18,7 @@ import MapGeocoder from '../map/geocoder/MapGeocoder';
 import MapScale from '../map/MapScale';
 import MapNotification from '../map/notification/MapNotification';
 import useFeatures from '../common/util/useFeatures';
+import { useAttributePreference } from '../common/util/preferences';
 
 const MainMap = ({ filteredPositions, selectedPosition, onEventsClick }) => {
   const theme = useTheme();
@@ -30,7 +30,7 @@ const MainMap = ({ filteredPositions, selectedPosition, onEventsClick }) => {
 
   const features = useFeatures();
 
-  const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
+  const mapLiveRoutes = useAttributePreference('mapLiveRoutes', false);
 
   const onMarkerClick = useCallback((_, deviceId) => {
     dispatch(devicesActions.select(deviceId));
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 9a21d570..0655fa92 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -15,6 +15,7 @@ import EventsDrawer from './EventsDrawer';
 import useFilter from './useFilter';
 import MainToolbar from './MainToolbar';
 import MainMap from './MainMap';
+import { useAttributePreference } from '../common/util/preferences';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -63,7 +64,7 @@ const MainPage = () => {
 
   const desktop = useMediaQuery(theme.breakpoints.up('md'));
 
-  const [mapOnSelect] = usePersistedState('mapOnSelect', true);
+  const mapOnSelect = useAttributePreference('mapOnSelect', true);
 
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
   const positions = useSelector((state) => state.positions.items);