refactor BaseMap props and Recoil state

nismod · Jun 24, 2024 · f164053 · f164053
1 parent 01d8524
commit f164053
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 30 deletions.
diff --git a/frontend/src/lib/data-map/BaseMap.tsx b/frontend/src/lib/data-map/BaseMap.tsx
@@ -1,25 +1,30 @@
-import { MapViewState } from 'deck.gl/typed';
-import { ComponentProps, FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { Map } from 'react-map-gl/maplibre';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { backgroundState, showLabelsState } from 'map/layers/layers-state';
+import { useBasemapStyle } from 'map/use-basemap-style';
+import { mapViewStateState } from 'state/map-view/map-view-state';
 
 export interface BaseMapProps {
-  mapStyle: ComponentProps<typeof Map>['mapStyle'];
-  viewState: MapViewState;
-  onViewState: (vs: MapViewState) => void;
   children?: ReactNode;
 }
 
 /**
  * Displays a react-map-gl basemap component.
  * Accepts children such as a DeckGLOverlay, HUD controls etc
  */
-export const BaseMap: FC<BaseMapProps> = ({ mapStyle, viewState, onViewState, children }) => {
+export const BaseMap: FC<BaseMapProps> = ({ children }) => {
+  const background = useRecoilValue(backgroundState);
+  const showLabels = useRecoilValue(showLabelsState);
+  const [viewState, setViewState] = useRecoilState(mapViewStateState);
+  const { mapStyle } = useBasemapStyle(background, showLabels);
   return (
     <Map
       reuseMaps={true}
       styleDiffing={true}
       {...viewState}
-      onMove={({ viewState }) => onViewState(viewState)}
+      onMove={({ viewState }) => setViewState(viewState)}
       mapStyle={mapStyle}
       dragRotate={false}
       keyboard={false}

diff --git a/frontend/src/map/MapView.tsx b/frontend/src/map/MapView.tsx
@@ -1,13 +1,6 @@
 import { Suspense, useCallback, useEffect } from 'react';
-import {
-  atom,
-  useRecoilState,
-  useRecoilValue,
-  useResetRecoilState,
-  useSetRecoilState,
-} from 'recoil';
-
-import { mapViewStateState } from '../state/map-view/map-view-state';
+import { atom, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
+
 import { BoundingBox } from 'lib/bounding-box';
 import { BaseMap } from 'lib/data-map/BaseMap';
 import { DataMap } from 'lib/data-map/DataMap';
@@ -139,7 +132,7 @@ const MapViewContent = () => {
   const isMobile = useIsMobile();
 
   return (
-    <>
+    <Suspense fallback={null}>
       <DataMap
         beforeId={firstLabelId}
         viewLayers={viewLayers}
@@ -151,22 +144,14 @@ const MapViewContent = () => {
         <TooltipContent />
       </DataMapTooltip>
       {isMobile ? <MapHudMobileLayout /> : <MapHudDesktopLayout />}
-    </>
+    </Suspense>
   );
 };
 
-export const MapView = () => {
-  const background = useRecoilValue(backgroundState);
-  const showLabels = useRecoilValue(showLabelsState);
-  const [viewState, setViewState] = useRecoilState(mapViewStateState);
-  const { mapStyle } = useBasemapStyle(background, showLabels);
-  return (
+export const MapView = () => (
   <ErrorBoundary message="There was a problem displaying the map." justifyErrorContent="center">
-    <BaseMap mapStyle={mapStyle} viewState={viewState} onViewState={setViewState}>
-      <Suspense fallback={null}>
-        <MapViewContent />
-      </Suspense>
+    <BaseMap>
+      <MapViewContent />
     </BaseMap>
   </ErrorBoundary>
-  )
-};
+);