From 9b8c36514ca41e7c36b0dbd035aed6773cd503d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wojtek=20Ba=C5=BCant?= <wojciech.bazant+ebi@gmail.com>
Date: Sun, 9 Jun 2024 12:44:03 +0100
Subject: [PATCH] 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)
---
 src/components/map/Cluster.js  |  3 ++-
 src/components/map/Location.js |  8 +++++---
 src/components/map/Map.js      | 24 +++++++++++++++--------
 src/components/map/MapPage.js  | 35 +++++++++++++++++-----------------
 4 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/src/components/map/Cluster.js b/src/components/map/Cluster.js
index ce54ebb3..cc405cea 100644
--- 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
index 0a3aa4c9..95a179fb 100644
--- 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,10 +62,10 @@ 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>
   </>
 ))
@@ -71,7 +73,7 @@ const Location = memo(({ label, selected, ...props }) => (
 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
index 0c4825ec..94b07042 100644
--- 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
index 5f440d15..a5c90a00 100644
--- 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}
       />