Access context through hooks

app/scripts/components/common/map/hooks/use-map-compare.ts

@@ -1,11 +1,10 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import MapboxCompare from 'mapbox-gl-compare';
-import { MapsContext } from '../maps';
-import useMaps from './use-maps';
+import useMaps, { useMapsContext } from './use-maps';
 
 export default function useMapCompare() {
   const { main, compared } = useMaps();
-  const { containerId } = useContext(MapsContext);
+  const { containerId } = useMapsContext();
   const hasMapCompare = !!compared;
   useEffect(() => {
     if (!main) return;

app/scripts/components/common/map/hooks/use-map-style.ts

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { StylesContext } from "../styles";
+import useCustomMarker from "./use-custom-marker";
+import useMaps from "./use-maps";
+
+export function useStylesContext() {
+  return useContext(StylesContext);
+}
+
+export default function useMapStyle() {
+  const { updateStyle, style } = useStylesContext();
+  const { current } = useMaps();
+  useCustomMarker(current);
+
+  return { updateStyle, style };
+}

app/scripts/components/common/map/hooks/use-maps.ts

@@ -1,11 +1,15 @@
 import { useContext } from 'react';
 import { useMap } from 'react-map-gl';
 import { MapsContext } from '../maps';
-import { StylesContext } from '../styles';
+import { useStylesContext } from './use-map-style';
+
+export function useMapsContext() {
+  return useContext(MapsContext);
+}
 
 export default function useMaps() {
-  const { mainId, comparedId } = useContext(MapsContext);
-  const { isCompared } = useContext(StylesContext);
+  const { mainId, comparedId } = useMapsContext();
+  const { isCompared } = useStylesContext();
   const maps = useMap();
   const main = maps[mainId];
   const compared = maps[comparedId];

app/scripts/components/common/map/map-component.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, ReactElement, useContext, useMemo } from 'react';
+import React, { useCallback, ReactElement, useMemo } from 'react';
 import ReactMapGlMap from 'react-map-gl';
 import { ProjectionOptions } from 'veda';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
 import { convertProjectionToMapbox } from '../mapbox/map-options/utils';
-import { useMapStyle } from './styles';
-import { MapsContext } from './maps';
+import useMapStyle from './hooks/use-map-style';
+import { useMapsContext } from './hooks/use-maps';
 
 export default function MapComponent({
   controls,
@@ -17,7 +17,7 @@ export default function MapComponent({
   projection?: ProjectionOptions;
 }) {
   const { initialViewState, setInitialViewState, mainId, comparedId } =
-    useContext(MapsContext);
+    useMapsContext();
 
   const id = isCompared ? comparedId : mainId;
 
@@ -30,11 +30,11 @@ export default function MapComponent({
     [isCompared, setInitialViewState]
   );
 
-    // Get MGL projection from Veda projection
-    const mapboxProjection = useMemo(() => {
-      if (!projection) return undefined;
-      return convertProjectionToMapbox(projection);
-    }, [projection]);
+  // Get MGL projection from Veda projection
+  const mapboxProjection = useMemo(() => {
+    if (!projection) return undefined;
+    return convertProjectionToMapbox(projection);
+  }, [projection]);
 
   const { style } = useMapStyle();
 

app/scripts/components/common/map/maps.tsx

@@ -5,8 +5,7 @@ import React, {
   ReactElement,
   JSXElementConstructor,
   useState,
-  createContext,
-  useContext
+  createContext
 } from 'react';
 import styled from 'styled-components';
 import {
@@ -23,7 +22,7 @@ import MapboxStyleOverride from './mapbox-style-override';
 import { Styles } from './styles';
 import useMapCompare from './hooks/use-map-compare';
 import MapComponent from './map-component';
-import useMaps from './hooks/use-maps';
+import useMaps, { useMapsContext } from './hooks/use-maps';
 
 const chevronRightURI = () =>
   iconDataURI(CollecticonChevronRightSmall, {
@@ -116,7 +115,7 @@ function Maps({ children, projection }: MapsProps) {
     }
   });
 
-  const { containerId } = useContext(MapsContext);
+  const { containerId } = useMapsContext();
 
   return (
     <MapsContainer id={containerId} ref={observe}>

app/scripts/components/common/map/style-generators/basemap.tsx

@@ -7,8 +7,8 @@ import {
   getStyleUrl,
   GROUPS_BY_OPTION
 } from '../controls/map-options/basemap';
-import { useMapStyle } from '../styles';
 import { ExtendedLayer } from '../types';
+import useMapStyle from '../hooks/use-map-style';
 
 interface BasemapProps {
   basemapStyleId?: BasemapId;

app/scripts/components/common/map/style-generators/raster-timeseries.tsx

@@ -12,7 +12,7 @@ import {
 import { useTheme } from 'styled-components';
 import { featureCollection, point } from '@turf/helpers';
 import { BaseGeneratorParams, StacFeature } from '../types';
-import { useMapStyle } from '../styles';
+import useMapStyle from '../hooks/use-map-style';
 import {
   FIT_BOUNDS_PADDING,
   getFilterPayload,

app/scripts/components/common/map/styles.tsx

@@ -3,14 +3,14 @@ import React, {
   ReactNode,
   createContext,
   useCallback,
-  useContext,
   useEffect,
   useState
 } from 'react';
-import { ExtendedLayer, GeneratorStyleParams, LayerOrderPosition } from './types';
-import useCustomMarker from './hooks/use-custom-marker';
-import useMaps from './hooks/use-maps';
-
+import {
+  ExtendedLayer,
+  GeneratorStyleParams,
+  LayerOrderPosition
+} from './types';
 
 interface StylesContextType {
   updateStyle: (params: GeneratorStyleParams) => void;
@@ -27,7 +27,6 @@ export const StylesContext = createContext<StylesContextType>({
   isCompared: false
 });
 
-
 const LAYER_ORDER: LayerOrderPosition[] = [
   'basemap-background',
   'raster',
@@ -100,15 +99,15 @@ const generateStyle = (stylesData: Record<string, GeneratorStyleParams>) => {
 export function Styles({
   onStyleUpdate,
   children,
-  isCompared,
+  isCompared
 }: {
   onStyleUpdate?: (style: ExtendedStyle) => void;
   children?: ReactNode;
   isCompared?: boolean;
 }) {
-  const [stylesData, setStylesData] = useState<Record<string, GeneratorStyleParams>>(
-    {}
-  );
+  const [stylesData, setStylesData] = useState<
+    Record<string, GeneratorStyleParams>
+  >({});
 
   const [style, setStyle] = useState<Style | undefined>();
 
@@ -134,11 +133,3 @@ export function Styles({
     </StylesContext.Provider>
   );
 }
-
-export const useMapStyle = () => {
-  const { updateStyle, style } = useContext(StylesContext);
-  const { current } = useMaps();
-  useCustomMarker(current);
-
-  return { updateStyle, style };
-};