diff --git a/src/app/_home/components/Products/FilteredProducts/FilteredProducts.tsx b/src/app/_home/components/Products/FilteredProducts/FilteredProducts.tsx index 39e61ff4..8ab906db 100644 --- a/src/app/_home/components/Products/FilteredProducts/FilteredProducts.tsx +++ b/src/app/_home/components/Products/FilteredProducts/FilteredProducts.tsx @@ -10,6 +10,7 @@ import { useGetFilteredProducts } from "@/_home/hooks/useGetFilteredProducts"; import { useQueryParams } from "@/app/_home/hooks/useQueryParams"; import { Dropdown } from "@/components/Dropdown"; import { ORDER, DROPDOWN } from "@/components/Dropdown/constants"; +import { findOptionByValue } from "@/components/Dropdown/utils"; import { NoData } from "@/components/NoData"; import cn from "@/utils/classNames"; import { createQueryString } from "@/utils/createQueryString"; @@ -32,13 +33,13 @@ export default function FilteredProducts({ category }: FilteredProductsProps) { const { data: productData, fetchNextPage, hasNextPage } = useGetFilteredProducts(params.toString()); const { control } = useForm({ mode: "onBlur" }); - const order = useWatch({ control, name: "order" }); + const watchedOrder = useWatch({ control, name: "order" }); useEffect(() => { - if (order) { - router.push(`/?${createQueryString(QUERY.ORDER, order, searchParams)}`); + if (watchedOrder) { + router.push(`/?${createQueryString(QUERY.ORDER, watchedOrder, searchParams)}`); } - }, [order, router, searchParams]); + }, [watchedOrder, router, searchParams]); useEffect(() => { if (inView && hasNextPage) { @@ -47,6 +48,7 @@ export default function FilteredProducts({ category }: FilteredProductsProps) { }, [inView, fetchNextPage, hasNextPage]); const keyword = searchParams.get(QUERY.KEYWORD); + const order = searchParams.get(QUERY.ORDER); return (
@@ -60,7 +62,7 @@ export default function FilteredProducts({ category }: FilteredProductsProps) { control={control} name='order' variant={DROPDOWN.ORDER} - placeholder={ORDER.PRODUCT[0].option} + placeholder={findOptionByValue(ORDER.PRODUCT, order)} />
diff --git a/src/components/Dropdown/utils.ts b/src/components/Dropdown/utils.ts new file mode 100644 index 00000000..1a484bec --- /dev/null +++ b/src/components/Dropdown/utils.ts @@ -0,0 +1,6 @@ +import { ItemType } from "@/components/Dropdown/type"; + +export const findOptionByValue = (Items: ItemType[], valueToFind: string | null) => { + const result = Items.find(({ value }) => value === valueToFind); + return result ? result.option : Items[0].option; +};