Persist user preferences

4 files changed, 5 insertions, 9 deletions

diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index e4365fab..e334800c 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -2,7 +2,6 @@ import { useId, useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { map } from './core/MapView';
 import { formatTime, getStatusColor } from '../common/util/formatter';
-import usePersistedState from '../common/util/usePersistedState';
 import { mapIconKey } from './core/preloadImages';
 import { findFonts } from './core/mapUtil';
 import { useAttributePreference } from '../common/util/preferences';
@@ -15,8 +14,7 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleF
   const devices = useSelector((state) => state.devices.items);
 
   const iconScale = useAttributePreference('iconScale', 1);
-
-  const [mapCluster] = usePersistedState('mapCluster', true);
+  const mapCluster = useAttributePreference('mapCluster', true);
 
   const createFeature = (devices, position, selectedPositionId) => {
     const device = devices[position.deviceId];
diff --git a/modern/src/map/core/MapView.js b/modern/src/map/core/MapView.js
index e91d0cc5..7ed5eae6 100644
--- a/modern/src/map/core/MapView.js
+++ b/modern/src/map/core/MapView.js
@@ -75,7 +75,7 @@ const MapView = ({ children }) => {
   const [mapReady, setMapReady] = useState(false);
 
   const mapStyles = useMapStyles();
-  const [activeMapStyles] = usePersistedState('activeMapStyles', ['locationIqStreets', 'osm', 'carto']);
+  const activeMapStyles = useAttributePreference('activeMapStyles', 'locationIqStreets,osm,carto');
   const [defaultMapStyle] = usePersistedState('selectedMapStyle', 'locationIqStreets');
   const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
   const maxZoom = useAttributePreference('web.maxZoom');
diff --git a/modern/src/map/main/MapSelectedDevice.js b/modern/src/map/main/MapSelectedDevice.js
index c52b8df0..3f444409 100644
--- a/modern/src/map/main/MapSelectedDevice.js
+++ b/modern/src/map/main/MapSelectedDevice.js
@@ -4,7 +4,6 @@ import { useSelector } from 'react-redux';
 import dimensions from '../../common/theme/dimensions';
 import { map } from '../core/MapView';
 import { usePrevious } from '../../reactHelper';
-import usePersistedState from '../../common/util/usePersistedState';
 import { useAttributePreference } from '../../common/util/preferences';
 
 const MapSelectedDevice = () => {
@@ -12,11 +11,10 @@ const MapSelectedDevice = () => {
   const previousDeviceId = usePrevious(selectedDeviceId);
 
   const selectZoom = useAttributePreference('web.selectZoom', 10);
+  const mapFollow = useAttributePreference('mapFollow', false);
 
   const position = useSelector((state) => state.positions.items[selectedDeviceId]);
 
-  const [mapFollow] = usePersistedState('mapFollow', false);
-
   useEffect(() => {
     if ((selectedDeviceId !== previousDeviceId || mapFollow) && position) {
       map.easeTo({
diff --git a/modern/src/map/overlay/MapOverlay.js b/modern/src/map/overlay/MapOverlay.js
index 85797d4b..4db2153d 100644
--- a/modern/src/map/overlay/MapOverlay.js
+++ b/modern/src/map/overlay/MapOverlay.js
@@ -1,5 +1,5 @@
 import { useId, useEffect } from 'react';
-import usePersistedState from '../../common/util/usePersistedState';
+import { useAttributePreference } from '../../common/util/preferences';
 import { map } from '../core/MapView';
 import useMapOverlays from './useMapOverlays';
 
@@ -7,7 +7,7 @@ const MapOverlay = () => {
   const id = useId();
 
   const mapOverlays = useMapOverlays();
-  const [selectedMapOverlay] = usePersistedState('selectedMapOverlay');
+  const selectedMapOverlay = useAttributePreference('selectedMapOverlay');
 
   const activeOverlay = mapOverlays.filter((overlay) => overlay.available).find((overlay) => overlay.id === selectedMapOverlay);