When adding new location, keep showing previous locations and clusters (

#393) When adding a new location: * Show locations / clusters * Disable clicks on locations / clusters * Always include labels Always include labels, and disable clicking on them * Correct the PropTypes annotation (although may not actually do anything)
falling-fruit · Jun 9, 2024 · 9b8c365 · 9b8c365
1 parent 37bdd03
commit 9b8c365
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 29 deletions.
diff --git a/src/components/map/Cluster.js b/src/components/map/Cluster.js
@@ -32,6 +32,7 @@ const ClusterContainer = styled(ResetButton)`
   &:focus {
     outline: none;
   }
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'unset')};
 `
 
 /**
@@ -69,7 +70,7 @@ const Cluster = memo(({ onClick, count }) => (
 Cluster.displayName = 'Cluster'
 
 Cluster.propTypes = {
-  onClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
   count: PropTypes.number.isRequired,
 }
 

diff --git a/src/components/map/Location.js b/src/components/map/Location.js
@@ -37,6 +37,8 @@ const LocationButton = styled(ResetButton)`
   &:focus {
     outline: none;
   }
+
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'unset')};
 `
 
 const Label = styled.div`
@@ -60,18 +62,18 @@ const Label = styled.div`
     1px 1px 0 ${({ theme }) => theme.background};
 `
 
-const Location = memo(({ label, selected, ...props }) => (
+const Location = memo(({ label, selected, onClick, ...props }) => (
   <>
     {selected && <MapPin />}
-    <LocationButton {...props} />
+    <LocationButton onClick={onClick} {...props} />
     <Label>{label}</Label>
   </>
 ))
 
 Location.displayName = 'Location'
 
 Location.propTypes = {
-  onClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
   // TODO: Correct the instance in MapPage
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 }

diff --git a/src/components/map/Map.js b/src/components/map/Map.js
@@ -214,10 +214,14 @@ const Map = ({
         {clusters.map((cluster) => (
           <Cluster
             key={JSON.stringify(cluster)}
-            onClick={(event) => {
-              onClusterClick(cluster)
-              event.stopPropagation()
-            }}
+            onClick={
+              onClusterClick
+                ? (event) => {
+                    onClusterClick(cluster)
+                    event.stopPropagation()
+                  }
+                : undefined
+            }
             count={cluster.count}
             lat={cluster.lat}
             lng={cluster.lng}
@@ -226,10 +230,14 @@ const Map = ({
         {locations.map((location) => (
           <Location
             key={location.id}
-            onClick={(event) => {
-              onLocationClick(location)
-              event.stopPropagation()
-            }}
+            onClick={
+              onLocationClick
+                ? (event) => {
+                    onLocationClick(location)
+                    event.stopPropagation()
+                  }
+                : undefined
+            }
             lat={location.lat}
             lng={location.lng}
             selected={location.id === activeLocationId}

diff --git a/src/components/map/MapPage.js b/src/components/map/MapPage.js
@@ -70,12 +70,17 @@ const MapPage = ({ isDesktop }) => {
     }
   }, [dispatch, isAddingLocation])
 
-  const handleLocationClick = (location) => {
-    history.push({
-      pathname: `/locations/${location.id}`,
-      state: { fromPage: '/map' },
-    })
-  }
+  const handleLocationClick = isAddingLocation
+    ? undefined
+    : (location) => {
+        history.push({
+          pathname: `/locations/${location.id}`,
+          state: { fromPage: '/map' },
+        })
+      }
+  const handleClusterClick = isAddingLocation
+    ? undefined
+    : (cluster) => dispatch(clusterClick(cluster))
   const stopViewingLocation = () => {
     if (isViewingLocation) {
       history.push('/map')
@@ -109,15 +114,11 @@ const MapPage = ({ isDesktop }) => {
         bootstrapURLKeys={bootstrapURLKeys}
         view={view}
         geolocation={geolocation}
-        clusters={isAddingLocation ? [] : clusters}
-        locations={
-          isAddingLocation
-            ? []
-            : allLocations.map((location) => ({
-                ...location,
-                typeName: getCommonName(location.type_ids[0]),
-              }))
-        }
+        clusters={clusters}
+        locations={allLocations.map((location) => ({
+          ...location,
+          typeName: getCommonName(location.type_ids[0]),
+        }))}
         activeLocationId={locationId || hoveredLocationId}
         onViewChange={(newView) => {
           dispatch(viewChangeAndFetch(newView))
@@ -128,11 +129,11 @@ const MapPage = ({ isDesktop }) => {
           )
         }}
         onLocationClick={handleLocationClick}
-        onClusterClick={(cluster) => dispatch(clusterClick(cluster))}
+        onClusterClick={handleClusterClick}
         onNonspecificClick={() => dispatch(stopViewingLocation)}
         mapType={settings.mapType}
         layerTypes={settings.mapLayers}
-        showLabels={settings.showLabels}
+        showLabels={settings.showLabels || isAddingLocation}
         showStreetView={streetView}
         showBusinesses={settings.showBusinesses}
       />