Skip to content

Commit

Permalink
fix: map rendering (#1368)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoeKarow
JoeKarow authored Aug 5, 2024
1 parent 3313e65 commit dd13b3f
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 107 deletions.
4 changes: 2 additions & 2 deletions apps/app/public/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
},
"account": "Account",
"add": "Add {{item}}",
"address": "Address",
"address_physical": "Physical address",
"adjective": {
"organization": "{{adjective}} organization"
},
Expand Down Expand Up @@ -413,6 +411,8 @@
"accept": "Accept",
"account": "Account",
"add": "Add",
"address": "Address",
"address_physical": "Physical address",
"and": "and",
"and-x-more": "and {{count}} more",
"approve": "Approve",
Expand Down
3 changes: 3 additions & 0 deletions packages/api/router/location/lib.formatAddressVisibility.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ export const formatAddressVisiblity = (location: ProvidedAddress, isEditMode = f
case PrismaEnums.AddressVisibility.PARTIAL: {
address.street1 = null
address.street2 = null
address.postCode = null
address.latitude = null
address.longitude = null
return address
}
case PrismaEnums.AddressVisibility.HIDDEN:
Expand Down
4 changes: 1 addition & 3 deletions packages/api/router/location/query.forGoogleMaps.handler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,7 @@ const forGoogleMaps = async ({ input, ctx }: TRPCHandlerParams<TForGoogleMapsSch
{ latitude: { not: 0 } },
{ longitude: { not: 0 } },
{
addressVisibility: {
in: [PrismaEnums.AddressVisibility.FULL, PrismaEnums.AddressVisibility.PARTIAL],
},
addressVisibility: PrismaEnums.AddressVisibility.FULL,
},
],
},
Expand Down
92 changes: 1 addition & 91 deletions packages/ui/components/data-portal/AddressDrawer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
Title,
} from '@mantine/core'
import { useForm, zodResolver } from '@mantine/form'
import { useDebouncedValue, useDisclosure, usePrevious } from '@mantine/hooks'
import { useDebouncedValue, useDisclosure } from '@mantine/hooks'
import compact from 'just-compact'
import filterObject from 'just-filter-object'
import { useTranslation } from 'next-i18next'
Expand All @@ -41,19 +41,12 @@ import { AddressVisibilitySchema, FormSchema, schemaTransform } from './schema'
import { useStyles } from './styles'
import { MultiSelectPopover } from '../MultiSelectPopover'

const US_COUNTRY_ID = 'ctry_01GW2HHDK9M26M80SG63T21SVH'

const addressVisibilityOptions: { value: AddressVisibility; label: string }[] = [
{ value: AddressVisibility.FULL, label: 'Show full address' },
{ value: AddressVisibility.PARTIAL, label: 'Show city & state/province' },
{ value: AddressVisibility.HIDDEN, label: 'Hide address' },
]

const useCoordNotification = () => ({
address: useNewNotification({ displayText: 'Lat/Lon set to address', icon: 'info' }),
city: useNewNotification({ displayText: 'Lat/Lon set to city center', icon: 'info' }),
})

const _AddressDrawer = forwardRef<HTMLButtonElement, AddressDrawerProps>(({ locationId, ...props }, ref) => {
const [opened, handler] = useDisclosure(false)
const [coordModalOpen, coordModalHandler] = useDisclosure(false)
Expand All @@ -70,7 +63,6 @@ const _AddressDrawer = forwardRef<HTMLButtonElement, AddressDrawerProps>(({ loca
},
transformValues: FormSchema.transform(schemaTransform).parse,
})
const previousAddressVisibility = usePrevious(form.values.data.addressVisibility)
const { id: organizationId } = useOrgInfo()
const { t, i18n } = useTranslation(['attribute', 'gov-dist'])
const countryTranslation = new Intl.DisplayNames(i18n.language, { type: 'region' })
Expand All @@ -79,7 +71,6 @@ const _AddressDrawer = forwardRef<HTMLButtonElement, AddressDrawerProps>(({ loca
const apiUtils = api.useUtils()

const notifySave = useNewNotification({ displayText: 'Saved', icon: 'success' })
const notifyCoordUpdate = useCoordNotification()

// #region Get country/gov dist selection items
const { data: countryOptions, isSuccess: countryOptionsLoaded } =
Expand Down Expand Up @@ -161,57 +152,6 @@ const _AddressDrawer = forwardRef<HTMLButtonElement, AddressDrawerProps>(({ loca
)
}, [form, updateLocation])

const setCoordsToFullAddress = useCallback(
async (formHook: typeof form) => {
if (formHook.isTouched('data.addressVisibility')) {
if (!formHook.values.data.street1 || formHook.values.data.street1 === '') {
coordModalHandler.open()
}
const searchTerms = [
formHook.values.data.street1,
formHook.values.data.street2,
formHook.values.data.city,
formHook.values.data.postCode,
]
.filter(Boolean)
.join(', ')
const { results: autocompleteResults } = await apiUtils.geo.autocomplete.fetch({
search: searchTerms,
fullAddress: true,
})
const placeId =
autocompleteResults.length >= 1 && autocompleteResults.at(0)?.placeId
? autocompleteResults.at(0)?.placeId
: undefined
if (placeId) {
setGooglePlaceId(placeId)
} else {
coordModalHandler.open()
}
notifyCoordUpdate.address()
}
},
[apiUtils, coordModalHandler, notifyCoordUpdate]
)

const setCoordsToCityCenter = useCallback(
async (formHook: typeof form) => {
if (formHook.values.data.city && formHook.isTouched('data.addressVisibility')) {
const { results: cityResults } = await apiUtils.geo.cityCoords.fetch({
city: formHook.values.data.city,
country: formHook.values.data.countryId ?? US_COUNTRY_ID,
govDist: formHook.values.data.govDistId,
})
if (cityResults && !Array.isArray(cityResults)) {
const { place_id } = cityResults
setGooglePlaceId(place_id)
}
}
notifyCoordUpdate.city()
},
[apiUtils, notifyCoordUpdate]
)

useEffect(() => {
if (isSaved && isSaved === form.isDirty()) {
setIsSaved(false)
Expand Down Expand Up @@ -330,35 +270,6 @@ const _AddressDrawer = forwardRef<HTMLButtonElement, AddressDrawerProps>(({ loca
},
[setSearchTerm, form]
)
const handleAddressVisibilityChange = useCallback(
(val: string | null) => {
form.getInputProps('data.addressVisibility').onChange(val)
const validatedAddressVisibility = AddressVisibilitySchema.safeParse(val)
if (!validatedAddressVisibility.success) {
return
}
const currentAddressVisibility = validatedAddressVisibility.data

switch (true) {
case previousAddressVisibility === 'FULL' &&
currentAddressVisibility &&
currentAddressVisibility !== 'FULL': {
setCoordsToCityCenter(form)
break
}
case previousAddressVisibility !== undefined &&
previousAddressVisibility !== 'FULL' &&
currentAddressVisibility === 'FULL': {
setCoordsToFullAddress(form)
break
}
default: {
break
}
}
},
[form, previousAddressVisibility, setCoordsToCityCenter, setCoordsToFullAddress]
)

// #endregion
const addressFieldRequired = form.values.data.addressVisibility === AddressVisibility.FULL
Expand Down Expand Up @@ -428,7 +339,6 @@ const _AddressDrawer = forwardRef<HTMLButtonElement, AddressDrawerProps>(({ loca
data={addressVisibilityOptions}
defaultValue={AddressVisibility.FULL}
{...form.getInputProps('data.addressVisibility')}
onChange={handleAddressVisibilityChange}
/>
</Stack>
<Stack spacing={0}>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/components/sections/LocationCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const LocationCard = ({ remoteOnly, locationId, edit }: LocationCardProps
if (!mapIsReady || !map || !hasData(data) || !canGetCenter) {
return null
}
if (!hasCoords(data)) {
if (!hasCoords(data) || !data.published) {
return null
}

Expand Down
37 changes: 28 additions & 9 deletions packages/ui/components/sections/VisitCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ const VisitCardDisplay = ({ locationId }: VisitCardProps) => {
const { data } = api.location.forVisitCard.useQuery(locationId)

const formattedAddress = useFormattedAddress(data)

const hasMapData = !!data?.latitude && !!data?.longitude && !!data?.name
useEffect(() => {
if (map && mapIsReady) {
if (map && mapIsReady && hasMapData) {
const lat = data?.latitude
const lng = data?.longitude
const name = data?.name
Expand All @@ -60,7 +60,17 @@ const VisitCardDisplay = ({ locationId }: VisitCardProps) => {
}
}
return () => void 0
}, [data?.name, data?.latitude, data?.longitude, formattedAddress, map, mapIsReady, locationId, mapMarker])
}, [
data?.name,
data?.latitude,
data?.longitude,
formattedAddress,
map,
mapIsReady,
locationId,
mapMarker,
hasMapData,
])

// const isAccessible = location.attributes.some(
// (attribute) => attribute.attribute.tsKey === 'additional.wheelchair-accessible'
Expand All @@ -72,9 +82,13 @@ const VisitCardDisplay = ({ locationId }: VisitCardProps) => {

const address = formattedAddress && (
<Stack spacing={12} ref={ref}>
<Title order={3}>{t('address', { context: data.remote ? 'physical' : undefined })}</Title>
<Title order={3}>
{t(hasMapData ? 'words.address' : 'words.location', {
context: data.remote ? 'physical' : undefined,
})}
</Title>
<Text>{formattedAddress}</Text>
<GoogleMap locationIds={data.id} height={Math.floor(width * 0.625)} width={width} />
{hasMapData && <GoogleMap locationIds={data.id} height={Math.floor(width * 0.625)} width={width} />}
</Stack>
)

Expand Down Expand Up @@ -139,8 +153,9 @@ const VisitCardEdit = ({ locationId }: VisitCardProps) => {
const { data } = api.location.forVisitCardEdits.useQuery(locationId)

const formattedAddress = useFormattedAddress(data)
const hasMapData = !!data?.latitude && !!data?.longitude && !!data?.name
useEffect(() => {
if (map && mapIsReady) {
if (map && mapIsReady && hasMapData) {
const { name, latitude: lat, longitude: lng } = data ?? {}
try {
invariant(lat)
Expand All @@ -165,7 +180,7 @@ const VisitCardEdit = ({ locationId }: VisitCardProps) => {
}
}
return () => void 0
}, [data, formattedAddress, map, mapIsReady, locationId, mapMarker])
}, [data, formattedAddress, map, mapIsReady, locationId, mapMarker, hasMapData])

// const isAccessible = location.attributes.some(
// (attribute) => attribute.attribute.tsKey === 'additional.wheelchair-accessible'
Expand All @@ -183,7 +198,11 @@ const VisitCardEdit = ({ locationId }: VisitCardProps) => {

const address = formattedAddress && (
<Stack spacing={12} ref={ref}>
<Title order={3}>{t('address', { context: data.remote ? 'physical' : undefined })}</Title>
<Title order={3}>
{t(hasMapData ? 'words.address' : 'words.location', {
context: data.remote ? 'physical' : undefined,
})}
</Title>
<Group>
{data.addressVisibility === AddressVisibility.HIDDEN && addressHiddenIcon}
<AddressDrawer
Expand All @@ -196,7 +215,7 @@ const VisitCardEdit = ({ locationId }: VisitCardProps) => {
<Text className={classes.overlayInner}>{formattedAddress}</Text>
</AddressDrawer>
</Group>
<GoogleMap locationIds={data.id} height={Math.floor(width * 0.625)} width={width} />
{hasMapData && <GoogleMap locationIds={data.id} height={Math.floor(width * 0.625)} width={width} />}
</Stack>
)

Expand Down
2 changes: 1 addition & 1 deletion packages/ui/mockData/json/component.ServiceSelect.json
View file

Large diffs are not rendered by default.

0 comments on commit dd13b3f

Please sign in to comment.