Rework map state

src/components/MapBox/MapboxProvider.tsx

@@ -37,7 +37,7 @@ export const MapboxProvider = ({
       zoom: mapState.zoom,
       bearing: mapState.bearing,
       pitch: mapState.pitch,
-      style: mapState.style.data,
+      style: MapStyles[mapState.style].data,
     },
   });
 
@@ -81,10 +81,10 @@ export const MapboxProvider = ({
   }, [map, mapState.latLng]);
 
   React.useEffect(() => {
-    if (['Light', 'Dark'].includes(mapState.style.title)) {
-      dispatch(setMapStyle(darkMode ? MapStyles.Dark : MapStyles.Light));
+    if (['Light', 'Dark'].includes(mapState.style)) {
+      dispatch(setMapStyle(darkMode ? 'Dark' : 'Light'));
     }
-  }, [dispatch, darkMode, mapState.style.title]);
+  }, [dispatch, darkMode, mapState.style]);
 
   /**
    * Hill Shading
@@ -125,7 +125,7 @@ export const MapboxProvider = ({
    */
   React.useEffect(() => {
     if (map?.loaded()) {
-      map.setStyle(mapState.style.data);
+      map.setStyle(MapStyles[mapState.style].data);
     }
   }, [map, mapState.style]);
 

src/core/slices/mapSlice.ts

@@ -1,7 +1,6 @@
 import mapboxgl from 'mapbox-gl';
 
-import type { MapStyle } from '@app/pages/Map/styles';
-import { MapStyles } from '@app/pages/Map/styles';
+import type { MapStyleName } from '@app/pages/Map/styles';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 
@@ -12,7 +11,7 @@ interface MapState {
   bearing: number;
   pitch: number;
   accessToken: string;
-  style: MapStyle;
+  style: MapStyleName;
   hillShade: boolean;
   exaggeration: boolean;
 }
@@ -25,10 +24,7 @@ const initialState: MapState = {
   pitch: 0,
   accessToken:
     'pk.eyJ1Ijoic2FjaGF3IiwiYSI6ImNrNW9meXozZjBsdW0zbHBjM2FnNnV6cmsifQ.3E4n8eFGD9ZOFo-XDVeZnQ',
-  style:
-    localStorage.getItem('darkModeDisabled') !== 'true'
-      ? MapStyles.Dark
-      : MapStyles.Light,
+  style: localStorage.getItem('darkModeDisabled') !== 'true' ? 'Dark' : 'Light',
   hillShade: false,
   exaggeration: true,
 };
@@ -49,7 +45,7 @@ export const mapSlice = createSlice({
     setPitch: (state, action: PayloadAction<number>) => {
       state.pitch = action.payload;
     },
-    setMapStyle(state, action: PayloadAction<MapStyle>) {
+    setMapStyle(state, action: PayloadAction<MapStyleName>) {
       state.style = action.payload;
     },
     setHillShade(state, action: PayloadAction<boolean>) {

src/pages/Map/MapContainer.tsx

@@ -28,22 +28,22 @@ export const MapContainer = (): JSX.Element => {
     (styleName: string, style: MapStyle) => {
       dispatch(
         setMapStyle(
-          mapState.style.title === styleName
+          mapState.style === styleName
             ? darkMode
-              ? MapStyles.Dark
-              : MapStyles.Light
-            : style,
+              ? 'Dark'
+              : 'Light'
+            : style.title,
         ),
       );
     },
-    [dispatch, darkMode, mapState.style.title],
+    [dispatch, darkMode, mapState.style],
   );
 
   return (
     <div className="relative flex h-full w-full">
       <div className="absolute right-0 z-20 m-4 space-y-2 rounded-md border border-gray-300 bg-white p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark">
         <IconButton
-          active={mapState.style.title === 'Satellite'}
+          active={mapState.style === 'Satellite'}
           onClick={(): void => {
             ChangeMapStyle('Satellite', MapStyles.Satellite);
           }}
@@ -52,17 +52,17 @@ export const MapContainer = (): JSX.Element => {
 
         <div
           className={`-m-1 space-y-2 rounded-md border-gray-300 p-1 dark:border-gray-600 ${
-            mapState.style.title === 'Outdoors' ? 'border' : ''
+            mapState.style === 'Outdoors' ? 'border' : ''
           }`}
         >
           <IconButton
-            active={mapState.style.title === 'Outdoors'}
+            active={mapState.style === 'Outdoors'}
             onClick={(): void => {
               ChangeMapStyle('Outdoors', MapStyles.Outdoors);
             }}
             icon={<FaDirections />}
           />
-          {mapState.style.title === 'Outdoors' && (
+          {mapState.style === 'Outdoors' && (
             <IconButton
               active={mapState.hillShade}
               onClick={(): void => {

src/pages/Map/styles.ts

@@ -1,11 +1,22 @@
 import type { Style } from 'mapbox-gl';
 
+export type MapStyleName =
+  | 'Streets'
+  | 'Outdoors'
+  | 'Light'
+  | 'Dark'
+  | 'Satellite';
+
 export interface MapStyle {
-  title: string;
+  title: MapStyleName;
   data: Style | string;
 }
 
-export const MapStyles = {
+type MapStyleType = {
+  [mapStyleType in MapStyleName]: MapStyle;
+};
+
+export const MapStyles: MapStyleType = {
   Streets: {
     title: 'Streets',
     data: 'mapbox://styles/mapbox/streets-v11?optimize=true',