release: 2024-07-18 (#1335)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced error handling with Sentry integration for better issue
tracking and diagnostics.
  
- **Improvements**
- Address formatting logic now includes an edit mode, providing more
flexible handling of address visibility.

- **UI Updates**
- VisitCard component now displays an icon with a tooltip when the
address is hidden.
- Simplified mutation handling for the AddressDrawer component for
improved performance.
- Updated Icon component to better handle refs, improving responsiveness
and usability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/app/src/pages/api/trpc/[trpc].ts

@@ -14,36 +14,28 @@ const isServer = typeof window === 'undefined'
 export default createNextApiHandler({
 	createContext,
 	router: appRouter,
-	onError: ({ path, error, type }) => {
+	onError: ({ path, error, type, ctx }) => {
+		Sentry.setUser(ctx?.session?.user ?? null)
+		if (error.code !== 'NOT_FOUND') {
+			Sentry.captureException(error, (scope) => {
+				scope.setTags({
+					'tRPC.path': path,
+					'tRPC.operation': type,
+				})
+				return scope
+			})
+		}
 		switch (true) {
 			case isDev: {
-				if (error.code === 'INTERNAL_SERVER_ERROR') {
-					Sentry.captureException(error, (scope) => {
-						scope.setTags({
-							'tRPC.path': path,
-							'tRPC.operation': type,
-						})
-						return scope
-					})
-				}
 				log.error(`❌ tRPC ${type} failed on ${path}:`, error)
 				break
 			}
 			case isServer: {
-				if (error.code === 'INTERNAL_SERVER_ERROR') {
-					Sentry.captureException(error, (scope) => {
-						scope.setTags({
-							'tRPC.path': path,
-							'tRPC.operation': type,
-						})
-						return scope
-					})
-				}
 				log.error({ type, path, error })
 				break
 			}
 			default: {
-				return
+				break
 			}
 		}
 	},

packages/api/router/location/lib.formatAddressVisibility.ts

@@ -1,6 +1,6 @@
 import { PrismaEnums } from '@weareinreach/db'
 
-export const formatAddressVisiblity = (location: ProvidedAddress) => {
+export const formatAddressVisiblity = (location: ProvidedAddress, isEditMode = false) => {
 	const address: ReformattedAddress = {
 		street1: location.street1,
 		street2: location.street2,
@@ -23,11 +23,13 @@ export const formatAddressVisiblity = (location: ProvidedAddress) => {
 		default: {
 			address.street1 = null
 			address.street2 = null
-			address.city = null
 			address.postCode = null
-			address.govDist = null
 			address.latitude = null
 			address.longitude = null
+			if (!isEditMode) {
+				address.city = null
+				address.govDist = null
+			}
 			return address
 		}
 	}

packages/api/router/location/query.forVisitCardEdits.handler.ts

@@ -32,7 +32,7 @@ const forVisitCardEdits = async ({ input }: TRPCHandlerParams<TForVisitCardEdits
 		if (!result) {
 			return null
 		}
-		const formattedAddress = formatAddressVisiblity(result)
+		const formattedAddress = formatAddressVisiblity(result, true)
 
 		const { attributes, ...rest } = result
 		const transformed = {

packages/ui/components/data-portal/AddressDrawer/index.tsx

@@ -147,8 +147,7 @@ const _AddressDrawer = forwardRef<HTMLButtonElement, AddressDrawerProps>(({ loca
 	// #region Mutation handling
 	const updateLocation = api.location.update.useMutation({
 		onSuccess: () => {
-			apiUtils.location.getAddress.invalidate(locationId ?? '')
-			apiUtils.location.forVisitCard.invalidate()
+			apiUtils.location.invalidate()
 			setIsSaved(true)
 			notifySave()
 			setTimeout(() => handler.close(), 500)

packages/ui/components/sections/VisitCard.tsx

@@ -1,9 +1,10 @@
-import { Card, createStyles, rem, Stack, Text, Title, useMantineTheme } from '@mantine/core'
+import { Card, createStyles, Group, rem, Stack, Text, Title, Tooltip, useMantineTheme } from '@mantine/core'
 import { useElementSize, useMediaQuery } from '@mantine/hooks'
 import { useTranslation } from 'next-i18next'
 import { useEffect } from 'react'
 import invariant from 'tiny-invariant'
 
+import { AddressVisibility } from '@weareinreach/db/enums'
 import { Badge } from '~ui/components/core/Badge'
 import { GoogleMap } from '~ui/components/core/GoogleMap'
 import { Link } from '~ui/components/core/Link'
@@ -12,7 +13,7 @@ import { AddressDrawer } from '~ui/components/data-portal/AddressDrawer'
 import { useCustomVariant, useFormattedAddress, useScreenSize } from '~ui/hooks'
 import { useGoogleMapMarker } from '~ui/hooks/useGoogleMapMarker'
 import { useGoogleMaps } from '~ui/hooks/useGoogleMaps'
-import { validateIcon } from '~ui/icon'
+import { Icon, validateIcon } from '~ui/icon'
 import { trpc as api } from '~ui/lib/trpcClient'
 
 export const VisitCard = ({ edit = false, ...props }: VisitCardProps & { edit?: boolean }) =>
@@ -171,18 +172,27 @@ const VisitCardEdit = ({ locationId }: VisitCardProps) => {
 		return null
 	}
 
+	const addressHiddenIcon = (
+		<Tooltip label='Address is hidden' withinPortal>
+			<Icon icon='carbon:view-off' />
+		</Tooltip>
+	)
+
 	const address = formattedAddress && (
 		<Stack spacing={12} ref={ref}>
 			<Title order={3}>{t('address', { context: data.remote ? 'physical' : undefined })}</Title>
-			<AddressDrawer
-				locationId={locationId}
-				external
-				component={Link}
-				variant={variants.Link.inlineInverted}
-				className={classes.overlay}
-			>
-				<Text className={classes.overlayInner}>{formattedAddress}</Text>
-			</AddressDrawer>
+			<Group>
+				{data.addressVisibility === AddressVisibility.HIDDEN && addressHiddenIcon}
+				<AddressDrawer
+					locationId={locationId}
+					external
+					component={Link}
+					variant={variants.Link.inlineInverted}
+					className={classes.overlay}
+				>
+					<Text className={classes.overlayInner}>{formattedAddress}</Text>
+				</AddressDrawer>
+			</Group>
 			<GoogleMap locationIds={data.id} height={Math.floor(width * 0.625)} width={width} />
 		</Stack>
 	)

packages/ui/icon/index.tsx

@@ -1,6 +1,6 @@
 import { Icon as Iconify, type IconifyIconHTMLElement, type IconifyIconProps } from '@iconify-icon/react'
 import { createStyles } from '@mantine/core'
-import { memo, type Ref, type SVGProps } from 'react'
+import { forwardRef, memo, type Ref, type SVGProps } from 'react'
 import { type LiteralUnion } from 'type-fest'
 
 import { iconList } from './iconList'
@@ -22,18 +22,20 @@ const useStyles = createStyles((_theme, { block, color }: IconStylesParams) => (
 	},
 }))
 
-export const Icon = memo(({ icon, block, className, ref, color, ...props }: CustomIconProps) => {
-	const { classes, cx } = useStyles({ block, color })
-	Iconify.displayName = 'Iconify'
-	return (
-		<Iconify
-			ref={ref}
-			icon={validateIcon(icon)}
-			className={`${cx(classes.root, className)} iconify-icon-root`}
-			{...props}
-		/>
-	)
-})
+export const Icon = memo(
+	forwardRef<IconifyIconHTMLElement, CustomIconProps>(({ icon, block, className, color, ...props }, ref) => {
+		const { classes, cx } = useStyles({ block, color })
+		Iconify.displayName = 'Iconify'
+		return (
+			<Iconify
+				ref={ref}
+				icon={validateIcon(icon)}
+				className={`${cx(classes.root, className)} iconify-icon-root`}
+				{...props}
+			/>
+		)
+	})
+)
 
 Icon.displayName = '@weareinreach/ui/icon'
 export type IconList = (typeof iconList)[number]