From ddabf079f68a3c4988b1370facecfb5f0e921ed1 Mon Sep 17 00:00:00 2001 From: Joe Karow <58997957+JoeKarow@users.noreply.github.com> Date: Wed, 6 Mar 2024 12:11:46 -0500 Subject: [PATCH] move onSuccess callback in to useEffect --- packages/ui/components/core/SearchBox.tsx | 46 ++++++++++++----------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/packages/ui/components/core/SearchBox.tsx b/packages/ui/components/core/SearchBox.tsx index 24952d9927..704b791fa2 100644 --- a/packages/ui/components/core/SearchBox.tsx +++ b/packages/ui/components/core/SearchBox.tsx @@ -35,6 +35,9 @@ import { useSearchState } from '~ui/hooks/useSearchState' import { Icon } from '~ui/icon' import { trpc as api } from '~ui/lib/trpcClient' +const DEFAULT_RADIUS = 200 +const DEFAULT_UNIT = 'mi' + const useStyles = createStyles((theme) => ({ autocompleteContainer: { width: '100%', @@ -201,31 +204,30 @@ export const SearchBox = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [autocompleteData, autocompleteLoading, search, isOrgSearch, orgSearchData, orgSearchLoading]) - api.geo.geoByPlaceId.useQuery(locationSearch, { + const { data: locationResult } = api.geo.geoByPlaceId.useQuery(locationSearch, { enabled: notBlank(locationSearch) && !isOrgSearch, - cacheTime: 0, - onSuccess: (data) => { - const DEFAULT_RADIUS = 200 - const DEFAULT_UNIT = 'mi' - if (!data.result) return - const params = SearchParamsSchema.safeParse([ - data.result.country, - data.result.geometry.location.lng, - data.result.geometry.location.lat, - DEFAULT_RADIUS, - DEFAULT_UNIT, - ]) - if (!params.success) return - router.push({ - pathname: '/search/[...params]', - query: { - params: params.data.map((val) => val.toString()), - }, - }) - setLoading(false) - }, }) + useEffect(() => { + if (!locationResult?.result) return + const params = SearchParamsSchema.safeParse([ + locationResult.result.country, + locationResult.result.geometry.location.lng, + locationResult.result.geometry.location.lat, + DEFAULT_RADIUS, + DEFAULT_UNIT, + ]) + if (!params.success) return + router.push({ + pathname: '/search/[...params]', + query: { + params: params.data.map((val) => val.toString()), + }, + }) + setLoading(false) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [locationResult]) + const rightIcon = isLoading || searchLoading ? (