From 60f5ab8725b1c48a8147704d69c5cdfe027a1ab2 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Mon, 7 Feb 2022 21:44:33 +1100
Subject: [PATCH] Rework map state

---
 src/components/MapBox/MapboxProvider.tsx | 10 +++++-----
 src/core/slices/mapSlice.ts              | 12 ++++--------
 src/pages/Map/MapContainer.tsx           | 18 +++++++++---------
 src/pages/Map/styles.ts                  | 15 +++++++++++++--
 4 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/components/MapBox/MapboxProvider.tsx b/src/components/MapBox/MapboxProvider.tsx
index 5ead930f..9454ca5e 100644
--- a/src/components/MapBox/MapboxProvider.tsx
+++ b/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]);
 
diff --git a/src/core/slices/mapSlice.ts b/src/core/slices/mapSlice.ts
index c921b98a..96ca2bc8 100644
--- a/src/core/slices/mapSlice.ts
+++ b/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>) {
diff --git a/src/pages/Map/MapContainer.tsx b/src/pages/Map/MapContainer.tsx
index 66267896..1b5ea235 100644
--- a/src/pages/Map/MapContainer.tsx
+++ b/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 => {
diff --git a/src/pages/Map/styles.ts b/src/pages/Map/styles.ts
index 48b607d7..682b5681 100644
--- a/src/pages/Map/styles.ts
+++ b/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',