fix: search state navigation carryover (#1152)

* fix badge styling * use refactored badge components * pull initial values from `searchState` * cleanup imports/lint issues * fix linting issues
weareinreach · Mar 13, 2024 · 325678f · 325678f
1 parent f933a72
commit 325678f
Show file tree

Hide file tree

Showing 13 changed files with 138 additions and 144 deletions.
diff --git a/apps/app/src/pages/org/[slug]/[orgLocationId]/edit/[orgServiceId].tsx b/apps/app/src/pages/org/[slug]/[orgLocationId]/edit/[orgServiceId].tsx
@@ -1,12 +1,12 @@
-import { createStyles, Grid, rem, Stack } from '@mantine/core'
+import { Grid, Stack } from '@mantine/core'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import { type GetServerSideProps } from 'nextjs-routes'
 import { type ReactNode, Suspense, useEffect, useState } from 'react'
-import { type Path, useFieldArray, useForm } from 'react-hook-form'
+import { /*type Path,*/ useFieldArray, useForm } from 'react-hook-form'
 import { Textarea, TextInput } from 'react-hook-form-mantine'
-import { type Merge } from 'type-fest'
+// import { type Merge } from 'type-fest'
 import { z } from 'zod'
 
 import { prefixedId } from '@weareinreach/api/schemas/idPrefix'
@@ -31,8 +31,7 @@ const FreetextObject = z
 	})
 	.nullish()
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type MapValue<A> = A extends Map<any, infer V> ? V : never
+// type MapValue<A> = A extends Map<any, infer V> ? V : never
 
 const literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()])
 type Literal = z.infer<typeof literalSchema>
@@ -95,10 +94,10 @@ const EditServicePage = () => {
 	const activeServices = form.watch('services') ?? []
 
 	type AttrSectionKeys = 'clientsServed' | 'cost' | 'eligibility' | 'languages' | 'additionalInfo'
-	type AttrSectionVals = Merge<
-		FormSchemaType['attributes'][number],
-		{ _rhfName: Path<FormSchemaType>; _rhfLabel: string }
-	>
+	// type AttrSectionVals = Merge<
+	// 	FormSchemaType['attributes'][number],
+	// 	{ _rhfName: Path<FormSchemaType>; _rhfLabel: string }
+	// >
 
 	const attributeBase: {
 		[key in AttrSectionKeys]: ReactNode[]
@@ -264,7 +263,7 @@ export const getServerSideProps: GetServerSideProps = async ({ locale, params, r
 		})
 		.safeParse(params)
 	if (!urlParams.success) return { notFound: true }
-	const { slug, orgLocationId, orgServiceId } = urlParams.data
+	const { slug, orgLocationId: _, orgServiceId } = urlParams.data
 	const session = await checkServerPermissions({
 		ctx: { req, res },
 		permissions: ['dataPortalBasic'],

diff --git a/apps/app/src/pages/org/[slug]/[orgLocationId]/index.tsx b/apps/app/src/pages/org/[slug]/[orgLocationId]/index.tsx
@@ -1,4 +1,4 @@
-import { createStyles, Divider, Grid, Skeleton, Stack, Tabs, useMantineTheme } from '@mantine/core'
+import { createStyles, Divider, Grid, Stack, Tabs, useMantineTheme } from '@mantine/core'
 import { useMediaQuery } from '@mantine/hooks'
 // import compact from 'just-compact'
 import { type GetStaticPaths, type GetStaticPropsContext, type NextPage } from 'next'

diff --git a/apps/app/src/pages/org/[slug]/index.tsx b/apps/app/src/pages/org/[slug]/index.tsx
@@ -1,4 +1,4 @@
-import { createStyles, Divider, Grid, Skeleton, Stack, Tabs, useMantineTheme } from '@mantine/core'
+import { createStyles, Divider, Grid, Stack, Tabs, useMantineTheme } from '@mantine/core'
 import { useElementSize, useMediaQuery } from '@mantine/hooks'
 import { type GetStaticPaths, type GetStaticPropsContext, type InferGetStaticPropsType } from 'next'
 import dynamic from 'next/dynamic'

diff --git a/apps/app/src/providers/index.tsx b/apps/app/src/providers/index.tsx
@@ -1,20 +1,20 @@
 'use client'
 import { MantineProvider } from '@mantine/core'
-import dynamic, { type LoaderComponent } from 'next/dynamic'
-import { Noto_Color_Emoji, Work_Sans } from 'next/font/google'
+// import dynamic, { type LoaderComponent } from 'next/dynamic'
+import { /*Noto_Color_Emoji,*/ Work_Sans } from 'next/font/google'
 import { type Session } from 'next-auth'
 import { SessionProvider } from 'next-auth/react'
-import { Trans, useTranslation } from 'next-i18next'
-import { type ComponentPropsWithoutRef, useMemo } from 'react'
-import { type ConsentBanner, type ConsentOptions } from 'react-hook-consent'
+// import { Trans, useTranslation } from 'next-i18next'
+// import { type ComponentPropsWithoutRef, useMemo } from 'react'
+// import { type ConsentBanner, type ConsentOptions } from 'react-hook-consent'
 
 import { EditModeProvider } from '@weareinreach/ui/providers/EditMode'
 import { GoogleMapsProvider } from '@weareinreach/ui/providers/GoogleMaps'
 import { SearchStateProvider } from '@weareinreach/ui/providers/SearchState'
 import { appCache, appTheme } from '@weareinreach/ui/theme'
 import 'react-hook-consent/dist/styles/style.css'
 
-const fallbackEmoji = Noto_Color_Emoji({ weight: '400', subsets: ['emoji'] })
+// const fallbackEmoji = Noto_Color_Emoji({ weight: '400', subsets: ['emoji'] })
 
 const fontWorkSans = Work_Sans({
 	subsets: ['latin-ext'],
@@ -33,68 +33,68 @@ const fontWorkSans = Work_Sans({
 	],
 })
 
-const PrivacyStatementModal = dynamic(
-	() =>
-		import('@weareinreach/ui/modals/PrivacyStatement').then(
-			(mod) => mod.PrivacyStatementModal
-		) satisfies LoaderComponent
-)
-const Link = dynamic(() => import('@weareinreach/ui/components/core/Link').then((mod) => mod.Link))
+// const PrivacyStatementModal = dynamic(
+// 	() =>
+// 		import('@weareinreach/ui/modals/PrivacyStatement').then(
+// 			(mod) => mod.PrivacyStatementModal
+// 		) satisfies LoaderComponent
+// )
+// const Link = dynamic(() => import('@weareinreach/ui/components/core/Link').then((mod) => mod.Link))
 
 export const Providers = ({ children, session }: ProviderProps) => {
-	const { t } = useTranslation('common')
+	// const { t } = useTranslation('common')
 
-	const consentOptions: ConsentOptions = useMemo(
-		() => ({
-			services: [
-				{
-					id: 'basic',
-					name: t('cookie-consent.item-basic'),
-					mandatory: true,
-				},
-				{
-					id: 'ga4',
-					name: t('cookie-consent.item-ga4'),
-					scripts: [
-						{
-							id: 'ga4-consent',
-							code: `window.gtag && window.gtag('consent', 'update', {ad_storage: 'granted',	analytics_storage: 'granted'})`,
-						},
-					],
-				},
-			],
-			theme: 'light',
-		}),
-		[t]
-	)
+	// const consentOptions: ConsentOptions = useMemo(
+	// 	() => ({
+	// 		services: [
+	// 			{
+	// 				id: 'basic',
+	// 				name: t('cookie-consent.item-basic'),
+	// 				mandatory: true,
+	// 			},
+	// 			{
+	// 				id: 'ga4',
+	// 				name: t('cookie-consent.item-ga4'),
+	// 				scripts: [
+	// 					{
+	// 						id: 'ga4-consent',
+	// 						code: `window.gtag && window.gtag('consent', 'update', {ad_storage: 'granted',	analytics_storage: 'granted'})`,
+	// 					},
+	// 				],
+	// 			},
+	// 		],
+	// 		theme: 'light',
+	// 	}),
+	// 	[t]
+	// )
 
-	const consentBannerSettings: ConsentBannerOpts = useMemo(
-		() => ({
-			settings: {
-				modal: {
-					title: t('cookie-consent.modal-title'),
-					approve: { label: t('cookie-consent.approve-selected') },
-					approveAll: { label: t('cookie-consent.approve-all') },
-					decline: { label: t('words.decline') },
-					description: (
-						<Trans
-							i18nKey='cookie-consent.body'
-							components={{
-								PrivacyLink: (
-									/* @ts-expect-error -> This is a dynamic component */
-									<PrivacyStatementModal component={Link} variant='inlineInvertedUtil1' />
-								),
-							}}
-						/>
-					),
-				},
-				label: t('words.customize'),
-			},
-			approve: { label: t('words.accept') },
-			decline: { label: t('words.decline') },
-		}),
-		[t]
-	)
+	// const consentBannerSettings: ConsentBannerOpts = useMemo(
+	// 	() => ({
+	// 		settings: {
+	// 			modal: {
+	// 				title: t('cookie-consent.modal-title'),
+	// 				approve: { label: t('cookie-consent.approve-selected') },
+	// 				approveAll: { label: t('cookie-consent.approve-all') },
+	// 				decline: { label: t('words.decline') },
+	// 				description: (
+	// 					<Trans
+	// 						i18nKey='cookie-consent.body'
+	// 						components={{
+	// 							PrivacyLink: (
+	// 								/* @ts-expect-error -> This is a dynamic component */
+	// 								<PrivacyStatementModal component={Link} variant='inlineInvertedUtil1' />
+	// 							),
+	// 						}}
+	// 					/>
+	// 				),
+	// 			},
+	// 			label: t('words.customize'),
+	// 		},
+	// 		approve: { label: t('words.accept') },
+	// 		decline: { label: t('words.decline') },
+	// 	}),
+	// 	[t]
+	// )
 
 	return (
 		<MantineProvider
@@ -127,4 +127,4 @@ type ProviderProps = {
 	session: Session
 }
 
-type ConsentBannerOpts = ComponentPropsWithoutRef<typeof ConsentBanner>
+// type ConsentBannerOpts = ComponentPropsWithoutRef<typeof ConsentBanner>
diff --git a/packages/api/router/organization/query.searchDistance.handler.ts b/packages/api/router/organization/query.searchDistance.handler.ts
@@ -118,7 +118,7 @@ service_area as (
 			WHEN district."geoDataId" IS NOT NULL THEN district."geoDataId"
 		END) AS "geoId",
 		array_remove(array_agg(DISTINCT district.slug), NULL) AS "matchedDistricts",
-		array_remove(array_agg(DISTINCT country.cca3),NULL) AS "matchedCountries"
+		array_remove(array_agg(DISTINCT country.cca2),NULL) AS "matchedCountries"
 	FROM "ServiceArea" sa
 		LEFT JOIN "ServiceAreaCountry" sac ON sac. "serviceAreaId" = sa.id
 		AND sac.active

diff --git a/packages/ui/components/core/Badge/Group.tsx b/packages/ui/components/core/Badge/Group.tsx
@@ -1,5 +1,5 @@
 import { Divider, List, type ListProps, useMantineTheme } from '@mantine/core'
-import { Children, type ReactNode } from 'react'
+import { Children, isValidElement, type ReactNode } from 'react'
 
 import { useCustomVariant } from '~ui/hooks/useCustomVariant'
 
@@ -17,9 +17,11 @@ export const _BadgeGroup = ({ withSeparator, children, ...props }: BadgeGroupPro
 			m={0}
 			{...props}
 		>
-			{Children.map(children, (child, idx) => (
-				<List.Item key={idx}>{child}</List.Item>
-			))}
+			{Children.map(children, (child, idx) => {
+				const { key } = isValidElement(child) ? child : { key: idx }
+
+				return <List.Item key={key}>{child}</List.Item>
+			})}
 		</List>
 	)
 }

diff --git a/packages/ui/components/core/Badge/Leader.tsx b/packages/ui/components/core/Badge/Leader.tsx
@@ -19,7 +19,15 @@ export const _Leader = forwardRef<HTMLDivElement, BadgeLeaderProps>(
 		)
 
 		const badge = (
-			<Badge variant='outline' classNames={classes} ref={ref} leftSection={leftSection} {...props}>
+			<Badge
+				variant='outline'
+				classNames={classes}
+				ref={ref}
+				leftSection={leftSection}
+				{...props}
+				{...(minify ? { 'data-minify': true } : {})}
+				{...(hideBg ? { 'data-hidebg': true } : {})}
+			>
 				{minify ? null : <Text fw={500}>{children}</Text>}
 			</Badge>
 		)

diff --git a/packages/ui/components/core/Badge/National.tsx b/packages/ui/components/core/Badge/National.tsx
@@ -1,4 +1,4 @@
-import { Badge, type BadgeProps, rem, Tooltip, useMantineTheme } from '@mantine/core'
+import { Badge, type BadgeProps, Tooltip, useMantineTheme } from '@mantine/core'
 import compact from 'just-compact'
 import { useTranslation } from 'next-i18next'
 import { forwardRef } from 'react'
@@ -16,17 +16,11 @@ export const _National = forwardRef<HTMLDivElement, BadgeNationalProps>(
 		const variants = useCustomVariant()
 
 		const leftSection = (
-			<Icon
-				icon='carbon:globe'
-				height={24}
-				width={24}
-				color={theme.other.colors.secondary.black}
-				style={{ marginBottom: rem(-12) }}
-			/>
+			<Icon icon='carbon:globe' height={24} width={24} color={theme.other.colors.secondary.black} />
 		)
 
 		const badge = (
-			<Badge variant='outline' classNames={classes} ref={ref} leftSection={leftSection} {...props} />
+			<Badge variant='outline' classNames={classes} ref={ref} leftSection={leftSection} h={40} {...props} />
 		)
 
 		const listFormatter = new Intl.ListFormat(i18n.resolvedLanguage, {

diff --git a/packages/ui/components/core/Badge/styles.ts b/packages/ui/components/core/Badge/styles.ts
@@ -7,14 +7,16 @@ export const useSharedStyles = (variant: SharedStyles) => {
 			case 'national': {
 				return {
 					leftSection: {
+						alignSelf: 'center',
+						lineHeight: variant === 'national' ? 0 : undefined,
 						'& *': {
 							fontSize: theme.fontSizes.xs,
 							borderRadius: theme.radius.xl,
 							height: rem(24),
 							width: rem(24),
 							margin: 0,
 							textAlign: 'center',
-							paddingBottom: rem(4),
+							paddingBottom: variant === 'leader' ? rem(4) : 0,
 							color: theme.other.colors.secondary.black,
 						},
 					},
@@ -104,6 +106,6 @@ type SharedStyles =
 	| 'attribute'
 	| 'remote'
 
-type CustomBadgeStyles = Partial<{ [className in BadgeStylesNames]: CSSObject }>
+// type CustomBadgeStyles = Partial<{ [className in BadgeStylesNames]: CSSObject }>
 
-type UseSharedStyles = (variant: SharedStyles) => CustomBadgeStyles
+// type UseSharedStyles = (variant: SharedStyles) => CustomBadgeStyles
diff --git a/packages/ui/components/core/SearchBox.tsx b/packages/ui/components/core/SearchBox.tsx
@@ -147,12 +147,12 @@ export const SearchBox = ({
 	const variants = useCustomVariant()
 	const { t } = useTranslation()
 	const router = useRouter()
-	const form = useForm<FormValues>({ initialValues: { search: initialValue } })
-	const [search] = useDebouncedValue(form.values.search, 400)
 	const [locationSearch, setLocationSearch] = useLocationSearch()
 	const { isLoading, setLoading } = loadingManager
 	const isOrgSearch = type === 'organization'
-	const { searchStateActions } = useSearchState()
+	const { searchStateActions, searchState } = useSearchState()
+	const form = useForm<FormValues>({ initialValues: { search: searchState.searchTerm || initialValue } })
+	const [search] = useDebouncedValue(form.values.search, 400)
 
 	// tRPC functions
 	const { data: orgSearchData, isFetching: orgSearchLoading } = api.organization.searchName.useQuery(