diff --git a/src/components/search-area/search-area-summary-item.tsx b/src/components/search-area/search-area-summary-item.tsx index 458e36c..e0f6bbd 100644 --- a/src/components/search-area/search-area-summary-item.tsx +++ b/src/components/search-area/search-area-summary-item.tsx @@ -5,7 +5,7 @@ import type { FC } from 'react' type SearchAreaSummaryItemProps = { label: string - value?: string + value?: string | null options?: Record className?: string } diff --git a/src/components/search-area/search-area.tsx b/src/components/search-area/search-area.tsx index 89c0b21..daed2b1 100644 --- a/src/components/search-area/search-area.tsx +++ b/src/components/search-area/search-area.tsx @@ -3,7 +3,7 @@ import { usePathname, useRouter, useParams, useSearchParams } from 'next/navigation' import type { FC } from 'react' import { useCallback } from 'react' -import { useForm } from 'react-hook-form' +import { DefaultValues, useForm } from 'react-hook-form' import { SearchAreaSummary } from './search-area-summary' import styles from './search-area.module.css' @@ -37,10 +37,10 @@ export const SearchArea: FC = ({ countries }) => { const queryParams = searchParams.get('query') const queryValuesParams = queryParams ? JSON.parse(queryParams) : {} - const defaultValues = { - name: queryValuesParams.name ?? undefined, - iso: queryValuesParams.iso ?? undefined, - city: queryValuesParams.city ?? undefined, + const defaultValues: DefaultValues = { + name: queryValuesParams.name ?? null, + iso: queryValuesParams.iso ?? null, + city: queryValuesParams.city ?? null, website: queryValuesParams.website ?? '', } @@ -64,8 +64,15 @@ export const SearchArea: FC = ({ countries }) => { }, [closeDialog, pathname, replace, searchParams]) const onReset = useCallback(() => { - reset() - onSubmit({}) + const emptyValues = { + name: null, + iso: null, + city: null, + website: '', + } + + reset(emptyValues) + onSubmit(emptyValues) }, [onSubmit, reset]) const watchedIso = watch('iso') diff --git a/src/types/search.d.ts b/src/types/search.d.ts index 0226e40..43c91d2 100644 --- a/src/types/search.d.ts +++ b/src/types/search.d.ts @@ -2,10 +2,10 @@ import { CountryCode } from './country' export type SearchPlacesFormInput = { - name?: string - iso?: string - city?: string - website?: string + name?: string | null + iso?: string | null + city?: string | null + website?: string | null } export type SearchPlacesFormInputOptions = {