Skip to content

Commit

Permalink
select shows to display details
Browse files Browse the repository at this point in the history
  • Loading branch information
@iskounen
iskounen committed Aug 2, 2024
1 parent 03c1c0a commit aa31b57
Showing 1 changed file with 119 additions and 62 deletions.
181 changes: 119 additions & 62 deletions src/app/Scenes/Map/CityGuideMap.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Flex, useTheme } from "@artsy/palette-mobile"
import MapboxGL from "@react-native-mapbox-gl/maps"
import { CityGuideMapQuery } from "__generated__/CityGuideMapQuery.graphql"
import { Flex, Text, useTheme, Image } from "@artsy/palette-mobile"
import MapboxGL, { OnPressEvent } from "@react-native-mapbox-gl/maps"
import { CityGuideMapQuery, CityGuideMapQuery$data } from "__generated__/CityGuideMapQuery.graphql"
import { ArtsyMapStyleURL } from "app/Scenes/Map/GlobalMap"
import { FilterData } from "app/Scenes/Map/types"
import { navigate } from "app/system/navigation/navigate"
import { convertCityToGeoJSON } from "app/utils/convertCityToGeoJSON"
import React, { useEffect, useRef } from "react"
import { Dimensions } from "react-native"
import React, { useEffect, useRef, useState } from "react"
import { Dimensions, TouchableWithoutFeedback } from "react-native"
import Config from "react-native-config"
import { graphql, useLazyLoadQuery } from "react-relay"
import Supercluster from "supercluster"
Expand All @@ -24,7 +25,8 @@ export const CityGuideMap: React.FC<CityGuideMapProps> = ({ citySlug }) => {
const mapRef = useRef<MapboxGL.MapView>(null)
const cameraRef = useRef<MapboxGL.Camera>(null)

const [pinsToRender, setPinsToRender] = React.useState<FilterData | undefined>(undefined)
const [pinsToRender, setPinsToRender] = useState<FilterData | undefined>(undefined)
const [selectedShow, setSelectedShow] = useState<Show | null>(null)

useEffect(() => {
if (!data) {
Expand Down Expand Up @@ -66,63 +68,110 @@ export const CityGuideMap: React.FC<CityGuideMapProps> = ({ citySlug }) => {

const { color } = useTheme()

const handlePress = async (event: OnPressEvent) => {
if (!event.features.length) {
return
}

const slug = event.features[0].properties?.slug
const cluster = event.features[0].properties?.cluster

/** A pin was tapped (instead of a cluster) */
if (!cluster && slug && data?.city?.shows?.edges) {
const show: Show | null | undefined = data.city.shows.edges.find(
(edge) => edge?.node?.slug === slug
)?.node

if (!show) {
return
}

if (show.location?.coordinates?.lat && show.location?.coordinates?.lng) {
cameraRef.current?.flyTo([show.location.coordinates.lng, show.location.coordinates.lat])
}

setSelectedShow(show)
}
}

return (
<Flex mb={0.5} flexDirection="column" style={{ backgroundColor: color("black5") }}>
<Flex flex={1}>
<MapboxGL.MapView
ref={mapRef}
style={{ width: "100%", height: Dimensions.get("window").height }}
styleURL={ArtsyMapStyleURL}
userTrackingMode={MapboxGL.UserTrackingModes.Follow}
logoEnabled={!!data?.city}
attributionEnabled={false}
compassEnabled={false}
>
<MapboxGL.Camera
ref={cameraRef}
animationMode="flyTo"
zoomLevel={DEFAULT_ZOOM_LEVEL}
minZoomLevel={MIN_ZOOM_LEVEL}
maxZoomLevel={MAX_ZOOM_LEVEL}
centerCoordinate={[NEW_YORK_COORDINATES.lng, NEW_YORK_COORDINATES.lat]}
/>
{!!pinsToRender && (
<MapboxGL.Animated.ShapeSource
id="shows"
shape={pinsToRender.featureCollection}
cluster
clusterRadius={50}
>
<MapboxGL.Animated.SymbolLayer
id="singleShow"
filter={["!", ["has", "point_count"]]}
style={{ iconImage: ["get", "icon"], iconSize: 0.8, iconOpacity: 1 }}
/>
<MapboxGL.Animated.SymbolLayer
id="pointCount"
style={{
textField: "{point_count}",
textSize: 14,
textColor: "white",
textFont: ["Unica77 LL Medium"],
textPitchAlignment: "map",
}}
/>
<MapboxGL.Animated.CircleLayer
id="clusteredPoints"
belowLayerID="pointCount"
filter={["has", "point_count"]}
style={{
circlePitchAlignment: "map",
circleColor: "black",
circleRadius: ["step", ["get", "point_count"], 15, 5, 20, 30, 30],
circleOpacity: 1,
}}
/>
</MapboxGL.Animated.ShapeSource>
)}
</MapboxGL.MapView>
</Flex>
<Flex mb={0.5} style={{ backgroundColor: color("black5") }} position="relative">
<MapboxGL.MapView
ref={mapRef}
style={{ width: "100%", height: Dimensions.get("window").height }}
styleURL={ArtsyMapStyleURL}
userTrackingMode={MapboxGL.UserTrackingModes.Follow}
logoEnabled={!!data?.city}
attributionEnabled={false}
compassEnabled={false}
>
<MapboxGL.Camera
ref={cameraRef}
animationMode="flyTo"
zoomLevel={DEFAULT_ZOOM_LEVEL}
minZoomLevel={MIN_ZOOM_LEVEL}
maxZoomLevel={MAX_ZOOM_LEVEL}
centerCoordinate={[NEW_YORK_COORDINATES.lng, NEW_YORK_COORDINATES.lat]}
/>
{!!pinsToRender && (
<MapboxGL.Animated.ShapeSource
id="shows"
shape={pinsToRender.featureCollection}
cluster
clusterRadius={50}
onPress={handlePress}
>
<MapboxGL.Animated.SymbolLayer
id="singleShow"
filter={["!", ["has", "point_count"]]}
style={{ iconImage: ["get", "icon"], iconSize: 0.8, iconOpacity: 1 }}
/>
<MapboxGL.Animated.SymbolLayer
id="pointCount"
style={{
textField: "{point_count}",
textSize: 14,
textColor: "white",
textFont: ["Unica77 LL Medium"],
textPitchAlignment: "map",
}}
/>
<MapboxGL.Animated.CircleLayer
id="clusteredPoints"
belowLayerID="pointCount"
filter={["has", "point_count"]}
style={{
circlePitchAlignment: "map",
circleColor: "black",
circleRadius: ["step", ["get", "point_count"], 15, 5, 20, 30, 30],
circleOpacity: 1,
}}
/>
</MapboxGL.Animated.ShapeSource>
)}
</MapboxGL.MapView>
{!!selectedShow && (
<Flex position="absolute" bottom={80} left={10} p={1} bg="white" width={1}>
<TouchableWithoutFeedback onPress={() => navigate(`/show/${selectedShow.slug}`)}>
<Flex flexDirection="row">
{!!selectedShow.coverImage?.url && (
<Image src={selectedShow.coverImage.url} width={100} height={100} />
)}
<Flex flexDirection="column" alignItems="flex-start" ml={2}>
<Text variant="sm" weight="medium" numberOfLines={1} ellipsizeMode="tail">
{selectedShow.partner?.name}
</Text>
<Text variant="sm" numberOfLines={1} ellipsizeMode="tail">
{selectedShow.name}
</Text>
<Text variant="xs" color={color("black60")}>
Ongoing
</Text>
</Flex>
</Flex>
</TouchableWithoutFeedback>
</Flex>
)}
</Flex>
)
}
Expand Down Expand Up @@ -185,3 +234,11 @@ const NEW_YORK_COORDINATES = { lat: 40.713, lng: -74.006 }
const DEFAULT_ZOOM_LEVEL = 11
const MIN_ZOOM_LEVEL = 9
const MAX_ZOOM_LEVEL = 17.5

type Show = NonNullable<
NonNullable<
NonNullable<
NonNullable<NonNullable<NonNullable<CityGuideMapQuery$data>["city"]>["shows"]>["edges"]
>[0]
>["node"]
>

0 comments on commit aa31b57

Please sign in to comment.