Rework map state

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',