Fix critical error on /exploration (#709)

NASA-IMPACT · Oct 25, 2023 · 1c5bf02 · 1c5bf02
2 parents 5ff51d3 + 9738d47
commit 1c5bf02
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 31 deletions.
diff --git a/app/scripts/components/common/map/index.tsx b/app/scripts/components/common/map/index.tsx
@@ -2,10 +2,20 @@ import React, { ReactNode } from 'react';
 import { MapProvider } from 'react-map-gl';
 import Maps, { MapsContextWrapperProps } from './maps';
 
+export const COMPARE_CONTAINER_NAME = 'CompareContainer';
 export function Compare({ children }: { children: ReactNode }) {
   return <>{children}</>;
 }
 
+Compare.displayName = COMPARE_CONTAINER_NAME;
+
+export const CONTROLS_CONTAINER_NAME = 'MapControlsContainer';
+export function MapControls({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
+
+MapControls.displayName = CONTROLS_CONTAINER_NAME;
+
 export default function MapProviderWrapper(props: MapsContextWrapperProps) {
   return (
     <MapProvider>

diff --git a/app/scripts/components/common/map/maps.tsx b/app/scripts/components/common/map/maps.tsx
@@ -3,7 +3,6 @@ import React, {
   Children,
   useMemo,
   ReactElement,
-  JSXElementConstructor,
   useState,
   createContext
 } from 'react';
@@ -23,6 +22,7 @@ import { Styles } from './styles';
 import useMapCompare from './hooks/use-map-compare';
 import MapComponent from './map-component';
 import useMaps, { useMapsContext } from './hooks/use-maps';
+import { COMPARE_CONTAINER_NAME, CONTROLS_CONTAINER_NAME } from '.';
 
 const chevronRightURI = () =>
   iconDataURI(CollecticonChevronRightSmall, {
@@ -92,13 +92,19 @@ function Maps({ children, projection }: MapsProps) {
 
     const sortedChildren = childrenArr.reduce(
       (acc, child) => {
-        const componentName = (child.type as JSXElementConstructor<any>).name;
-        if (componentName === 'Compare') {
+        // This is added so that we can use the component name in production
+        // where the function names are minified
+        // @ts-expect-error displayName is not in the type
+        const componentName = child.type.displayName ?? '';
+
+        if (componentName === COMPARE_CONTAINER_NAME) {
           acc.compareGenerators = Children.toArray(
             child.props.children
           ) as ReactElement[];
-        } else if (componentName.endsWith('Control')) {
-          acc.controls = [...acc.controls, child];
+        } else if (componentName == CONTROLS_CONTAINER_NAME) {
+          acc.controls = Children.toArray(
+            child.props.children
+          ) as ReactElement[];
         } else {
           acc.generators = [...acc.generators, child];
         }

diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
@@ -2,15 +2,19 @@ import React, { useState } from 'react';
 import { useAtomValue } from 'jotai';
 
 import { useStacMetadataOnDatasets } from '../../hooks/use-stac-metadata-datasets';
-import { selectedCompareDateAtom, selectedDateAtom, timelineDatasetsAtom } from '../../atoms/atoms';
+import {
+  selectedCompareDateAtom,
+  selectedDateAtom,
+  timelineDatasetsAtom
+} from '../../atoms/atoms';
 import {
   TimelineDatasetStatus,
   TimelineDatasetSuccess
 } from '../../types.d.ts';
 import { Layer } from './layer';
 import { AnalysisMessageControl } from './analysis-message-control';
 
-import Map, { Compare } from '$components/common/map';
+import Map, { Compare, MapControls } from '$components/common/map';
 import { Basemap } from '$components/common/map/style-generators/basemap';
 import GeocoderControl from '$components/common/map/controls/geocoder';
 import { ScaleControl } from '$components/common/map/controls';
@@ -71,31 +75,33 @@ export function ExplorationMap() {
           />
         ))}
       {/* Map controls */}
-      <DrawControl
-        displayControlsDefault={false}
-        controls={
-          {
-            polygon: true,
-            trash: true
-          } as any
-        }
-      />
-      <CustomAoIControl />
-      <ResetAoIControl />
-      <AnalysisMessageControl />
-      <GeocoderControl />
-      <MapOptionsControl
-        projection={projection}
-        onProjectionChange={setProjection}
-        basemapStyleId={mapBasemapId}
-        onBasemapStyleIdChange={setBasemapId}
-        labelsOption={labelsOption}
-        boundariesOption={boundariesOption}
-        onOptionChange={onOptionChange}
-      />
+      <MapControls>
+        <DrawControl
+          displayControlsDefault={false}
+          controls={
+            {
+              polygon: true,
+              trash: true
+            } as any
+          }
+        />
+        <CustomAoIControl />
+        <ResetAoIControl />
+        <AnalysisMessageControl />
+        <GeocoderControl />
+        <MapOptionsControl
+          projection={projection}
+          onProjectionChange={setProjection}
+          basemapStyleId={mapBasemapId}
+          onBasemapStyleIdChange={setBasemapId}
+          labelsOption={labelsOption}
+          boundariesOption={boundariesOption}
+          onOptionChange={onOptionChange}
+        />
 
-      <ScaleControl />
-      <MapCoordsControl />
+        <ScaleControl />
+        <MapCoordsControl />
+      </MapControls>
       {comparing && (
         // Compare map layers
         <Compare>