Issue#49 Satellite toggle refactor (#52)

* Issue#49 Refactor satellite toggle

* Issue#49 TOGGLE_SATELLITE → TOGGLE_TILE_OVERLAY

Co-authored-by: Matvey <realsmych@gmail.com>

src/actions/index.js

@@ -383,6 +383,13 @@ export function toggleCover() {
   };
 }
 
+export const TOGGLE_TILE_OVERLAY = "TOGGLE_TILE_OVERLAY";
+export function toggleTileOverlay() {
+  return {
+    type: TOGGLE_TILE_OVERLAY,
+  };
+}
+
 export const UPDATE_SEARCH_QUERY = "UPDATE_SEARCH_QUERY";
 export function updateSearchQuery(searchQuery) {
   return {
@@ -400,17 +407,3 @@ export function fetchSourceError(msg) {
     msg,
   };
 }
-
-export const USE_SATELLITE_TILES_OVERLAY = "USE_SATELLITE_TILES_OVERLAY";
-export function useSatelliteTilesOverlay() {
-  return {
-    type: USE_SATELLITE_TILES_OVERLAY,
-  };
-}
-
-export const RESET_TILES_OVERLAY = "RESET_TILES_OVERLAY";
-export function resetTilesOverlay() {
-  return {
-    type: RESET_TILES_OVERLAY,
-  };
-}

src/components/space/carto/Map.js

@@ -64,7 +64,7 @@ class Map extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.ui.tiles !== this.props.ui.tiles && this.map) {
+    if (prevProps.ui.tile !== this.props.ui.tile && this.map) {
       this.initializeTileLayer();
     }
   }
@@ -105,18 +105,18 @@ class Map extends React.Component {
     }
   }
 
-  getTileUrl(tiles) {
+  getTileUrl(tile) {
     if (
       supportedMapboxMap.indexOf(this.props.ui.tiles) !== -1 &&
       process.env.MAPBOX_TOKEN &&
       process.env.MAPBOX_TOKEN !== defaultToken
     ) {
-      return `http://a.tiles.mapbox.com/v4/mapbox.${tiles}/{z}/{x}/{y}@2x.png?access_token=${process.env.MAPBOX_TOKEN}`;
+      return `http://a.tiles.mapbox.com/v4/mapbox.${tile}/{z}/{x}/{y}@2x.png?access_token=${process.env.MAPBOX_TOKEN}`;
     } else if (
       process.env.MAPBOX_TOKEN &&
       process.env.MAPBOX_TOKEN !== defaultToken
     ) {
-      return `https://api.mapbox.com/styles/v1/${tiles}/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.MAPBOX_TOKEN}`;
+      return `https://api.mapbox.com/styles/v1/${tile}/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.MAPBOX_TOKEN}`;
       // `http://a.tiles.mapbox.com/styles/v1/${this.props.ui.tiles}/tiles/{z}/{x}/{y}?access_token=${process.env.MAPBOX_TOKEN}`
     } else {
       return "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
@@ -132,7 +132,7 @@ class Map extends React.Component {
       return;
     }
 
-    const url = this.getTileUrl(this.props.ui.tiles);
+    const url = this.getTileUrl(this.props.ui.tile);
     /**
      * If a tile layer already exists, we update its url. Otherwise, we create it and add it to the map.
      */
@@ -548,9 +548,8 @@ class Map extends React.Component {
         />
         {this.props.features.USE_SATELLITE_OVERLAY_TOGGLE && (
           <SatelliteOverlayToggle
-            isUsingSatellite={this.props.ui.tiles === "bellingcat-mapbox/cl1win2vp003914pdhateva6p"}
-            switchToSatellite={this.props.actions.useSatelliteTilesOverlay}
-            reset={this.props.actions.resetTilesOverlay}
+            isUsingSatellite={this.props.ui.isUsingSatellite}
+            toggleSatellite={this.props.actions.toggleTileOverlay}
           />
         )}
         {innerMap}
@@ -584,7 +583,8 @@ function mapStateToProps(state) {
       },
     },
     ui: {
-      tiles: selectors.getTiles(state),
+      tile: selectors.getTile(state),
+      isUsingSatellite: selectors.isUsingSatellite(state),
       dom: state.ui.dom,
       narratives: state.ui.style.narratives,
       mapSelectedEvents: state.ui.style.selectedEvents,

src/components/space/carto/atoms/SatelliteOverlayToggle.js

@@ -4,30 +4,23 @@ import { language } from "../../../../common/utilities";
 import mapImg from "../../../../assets/satelliteoverlaytoggle/map.png";
 import satImg from "../../../../assets/satelliteoverlaytoggle/sat.png";
 
-const SatelliteOverlayToggle = ({
-  switchToSatellite,
-  reset,
-  isUsingSatellite,
-}) => {
+const SatelliteOverlayToggle = ({ isUsingSatellite, toggleSatellite }) => {
+  const toggleClass = isUsingSatellite
+    ? "satellite-overlay-toggle-map"
+    : "satellite-overlay-toggle-sat";
+  const toggleImg = isUsingSatellite ? mapImg : satImg;
+  const toggleLabel = isUsingSatellite
+    ? copy[language].tiles.default
+    : copy[language].tiles.satellite;
   return (
     <div id="satellite-overlay-toggle" className="satellite-overlay-toggle">
-      {isUsingSatellite ? (
-        <button
-          className="satellite-overlay-toggle-button satellite-overlay-toggle-map"
-          style={{ backgroundImage: `url(${mapImg}` }}
-          onClick={reset}
-        >
-          <div className="label">{copy[language].tiles.default}</div>
-        </button>
-      ) : (
-        <button
-          className="satellite-overlay-toggle-button satellite-overlay-toggle-sat"
-          style={{ backgroundImage: `url(${satImg}` }}
-          onClick={switchToSatellite}
-        >
-          <div className="label">{copy[language].tiles.satellite}</div>
-        </button>
-      )}
+      <button
+        className={`satellite-overlay-toggle-button ${toggleClass}`}
+        style={{ backgroundImage: `url(${toggleImg}` }}
+        onClick={toggleSatellite}
+      >
+        <div className="label">{toggleLabel}</div>
+      </button>
     </div>
   );
 };

src/reducers/ui.js

@@ -1,23 +1,18 @@
 import initial from "../store/initial.js";
 
-import { USE_SATELLITE_TILES_OVERLAY, RESET_TILES_OVERLAY } from "../actions";
+import { TOGGLE_TILE_OVERLAY } from "../actions";
 
 function ui(uiState = initial.ui, action) {
   switch (action.type) {
-    case USE_SATELLITE_TILES_OVERLAY:
+    case TOGGLE_TILE_OVERLAY:
       return {
         ...uiState,
         tiles: {
           ...uiState.tiles,
-          current: uiState.tiles.satellite,
-        },
-      };
-    case RESET_TILES_OVERLAY:
-      return {
-        ...uiState,
-        tiles: {
-          ...uiState.tiles,
-          current: uiState.tiles.default,
+          current:
+            uiState.tiles.current === uiState.tiles.satellite
+              ? uiState.tiles.default
+              : uiState.tiles.satellite,
         },
       };
     default:

src/selectors/index.js

@@ -37,7 +37,9 @@ export const getActiveShapes = (state) => state.app.shapes;
 export const selectNarrative = (state) => state.app.associations.narrative;
 export const getFeatures = (state) => state.features;
 export const getEventRadius = (state) => state.ui.eventRadius;
-export const getTiles = (state) => state.ui.tiles.current;
+export const getTile = (state) => state.ui.tiles.current;
+export const isUsingSatellite = (state) =>
+  state.ui.tiles.current === state.ui.tiles.satellite;
 
 export const selectSites = createSelector(
   [getSites, getFeatures],