Hide venues on InfoVenue click (#3)

* Hide venues on InfoVenue click * Added unique key to Experience component, DRY-ed cluster and venue rendering logic
ikorotkaya · Oct 4, 2023 · c40385c · c40385c
1 parent 8a1808b
commit c40385c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 37 deletions.
diff --git a/src/components/ExperienceList.tsx b/src/components/ExperienceList.tsx
@@ -43,7 +43,7 @@ export default function ExperienceList({
             return null;
           }
 
-          return <Experience distance={distance} venue={venue} />;
+          return <Experience distance={distance} key={venue.id} venue={venue} />;
         })}
       </div>
     </div>

diff --git a/src/components/GoogleMap.tsx b/src/components/GoogleMap.tsx
@@ -227,47 +227,53 @@ export default function GoogleMapsComponent({
               const [lng, lat] = geometry.coordinates;
               const { cluster, point_count } = properties;
 
+              if (selectedVenueId !== null && cluster === true) {
+                return null;
+              }
+              if (selectedVenueId !== null && selectedVenueId !== properties.venue.id) {
+                return null;
+              }
               return cluster // eslint-disable-line @typescript-eslint/strict-boolean-expressions
-                  ? <MarkerF
-                      key={`cluster-${id}`}
-                      onClick={() => handleClusterClick({ id: id as number, lat, lng })}
-                      position={{ lat, lng }}
-                      options={{
-                        icon: {
-                          url: clusterPinIcon,
-                          scaledSize: new window.google.maps.Size(48, 48)
-                        },
-                      }}
-                      label={getLabel(point_count)} />
-                  : <MarkerF
-                    key={id}
-                    position={properties.venue.coordinates}
-                    title={properties.venue.name}
-                    onClick={() => selectVenue(properties.venue.id)}
-                    onMouseOver={() => highlightVenue(properties.venue.id)}
-                    onMouseOut={() => highlightVenue(null)}
+                ? <MarkerF
+                    key={`cluster-${id}`}
+                    onClick={() => handleClusterClick({ id: id as number, lat, lng })}
+                    position={{ lat, lng }}
                     options={{
                       icon: {
-                        url:
-                          highlightedVenueId === properties.venue.id || selectedVenueId === properties.venue.id
-                            ? pinActiveIcon
-                            : pinIcon,
-                        scaledSize: new window.google.maps.Size(32, 48),
+                        url: clusterPinIcon,
+                        scaledSize: new window.google.maps.Size(48, 48)
                       },
                     }}
-                  >
-                    {selectedVenueId === properties.venue.id && (
-                      <InfoWindowF
-                        position={properties.venue.coordinates}
-                        onCloseClick={() => handleInfoWindowCloseClick()}
-                        options={{ 
-                          disableAutoPan: false
-                        }}
-                      >
-                        <VenuePopUp venue={properties.venue} routeDistance={routeDistance} routeDuration={routeDuration} />
-                      </InfoWindowF>
-                    )}
-                  </MarkerF>;
+                    label={getLabel(point_count)} />
+                : <MarkerF
+                  key={properties.venue.id}
+                  position={properties.venue.coordinates}
+                  title={properties.venue.name}
+                  onClick={() => selectVenue(properties.venue.id)}
+                  onMouseOver={() => highlightVenue(properties.venue.id)}
+                  onMouseOut={() => highlightVenue(null)}
+                  options={{
+                    icon: {
+                      url:
+                        highlightedVenueId === properties.venue.id || selectedVenueId === properties.venue.id
+                          ? pinActiveIcon
+                          : pinIcon,
+                      scaledSize: new window.google.maps.Size(32, 48),
+                    },
+                  }}
+                >
+                  {selectedVenueId === properties.venue.id && (
+                    <InfoWindowF
+                      position={properties.venue.coordinates}
+                      onCloseClick={() => handleInfoWindowCloseClick()}
+                      options={{ 
+                        disableAutoPan: false
+                      }}
+                    >
+                      <VenuePopUp venue={properties.venue} routeDistance={routeDistance} routeDuration={routeDuration} />
+                    </InfoWindowF>
+                  )}
+                </MarkerF>;
             })
           }
         </GoogleMap>
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,7 +43,7 @@ export default function ExperienceList({ @@
                 return null;
               }
-              return <Experience distance={distance} venue={venue} />;
+              return <Experience distance={distance} key={venue.id} venue={venue} />;
             })}
           </div>
         </div>
@@ Expand Down @@