pull initial values from searchState

weareinreach · Mar 13, 2024 · fb41c56 · fb41c56
1 parent 7ec48f9
commit fb41c56
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 19 deletions.
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(

diff --git a/packages/ui/modals/MoreFilter.tsx b/packages/ui/modals/MoreFilter.tsx
@@ -20,7 +20,6 @@ import {
 import { useForm } from '@mantine/form'
 import { useMediaQuery, useViewportSize } from '@mantine/hooks'
 import { createPolymorphicComponent } from '@mantine/utils'
-import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import { forwardRef, type JSX, type MouseEventHandler, useEffect, useState } from 'react'
 
@@ -217,8 +216,7 @@ const MoreFilterBody = forwardRef<HTMLButtonElement, MoreFilterProps>(
 		const { t } = useTranslation(['common', 'attribute'])
 		const [opened, setOpened] = useState(false)
 		const theme = useMantineTheme()
-		const router = useRouter()
-		const { searchStateActions } = useSearchState()
+		const { searchStateActions, searchState } = useSearchState()
 
 		const isMobileQuery = useMediaQuery(`(max-width: ${theme.breakpoints.xs})`)
 		const isLandscape = useMediaQuery(`(orientation: landscape) and (max-height: ${em(430)})`)
@@ -233,11 +231,7 @@ const MoreFilterBody = forwardRef<HTMLButtonElement, MoreFilterProps>(
 		type FilterValue = AttributeFilter & { checked: boolean }
 
 		const form = useForm<FilterValue[]>({ initialValues: [] })
-		const preSelected = Array.isArray(router.query.a)
-			? router.query.a
-			: typeof router.query.a === 'string'
-				? [router.query.a]
-				: []
+		const preSelected = searchState.attributes
 
 		const generateInitialData = (opts?: { clear?: boolean }) => {
 			if (!moreFilterOptionData) return []

diff --git a/packages/ui/modals/ServiceFilter/index.tsx b/packages/ui/modals/ServiceFilter/index.tsx
@@ -14,7 +14,6 @@ import {
 	Checkbox as VanillaCheckbox,
 } from '@mantine/core'
 import { useMediaQuery, useViewportSize } from '@mantine/hooks'
-import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import { type BaseSyntheticEvent, type MouseEvent, useEffect, useMemo, useState } from 'react'
 import { useForm, useWatch } from 'react-hook-form'
@@ -44,8 +43,7 @@ export const ServiceFilter = ({ resultCount, isFetching, disabled }: ServiceFilt
 	const { t } = useTranslation(['common', 'services'])
 	const [opened, setOpened] = useState(false)
 	const theme = useMantineTheme()
-	const router = useRouter()
-	const { searchStateActions } = useSearchState()
+	const { searchStateActions, searchState } = useSearchState()
 
 	// #region Media Queries
 	const isMobileQuery = useMediaQuery(`(max-width: ${theme.breakpoints.xs})`)
@@ -58,11 +56,7 @@ export const ServiceFilter = ({ resultCount, isFetching, disabled }: ServiceFilt
 	const scrollAreaMaxHeight = isMobile ? viewportHeight - 210 + 30 : viewportHeight * 0.6 - 88
 	// #endregion
 
-	const preSelected = Array.isArray(router.query.s)
-		? router.query.s
-		: typeof router.query.s === 'string'
-			? [router.query.s]
-			: []
+	const preSelected = searchState.services
 	const form = useForm<{ selected: string[] }>({
 		values: { selected: preSelected },
 	})