frigid surge
I have a topbar where my user can open menu items. One of the items has subitems and they will be directly forwarded to a URL with filter products. So for example they click on the item "Apaszka" they will be routed to the following URL
/products?page=1&category=Apaszka
But now when they click on a item the category gets removed and the id is only attached /products/2
but it should be following /products/2?category=Apaszka so when the user is clicking to the next item they will only see the filter items and not all. Here is my code for the filter
const handleShowAll = useCallback(() => {
setCategoryVisibility(
categories.reduce(
(acc, category) => {
acc[category] = true; // Show all categories.
return acc;
},
{} as { [key: string]: boolean }
)
);
setClickedCategory(null);
newParams.delete('category');
newParams.set('page', '1');
router.push(createUrl(locale + '/products', newParams));
}, [categories, newParams, router, locale]);
const handleFilter = useCallback(
(category: string) => {
const currentCategory = newParams.get('category');
if (currentCategory === category) {
handleShowAll();
return;
} else {
newParams.set('category', category);
setClickedCategory(category);
setCategoryVisibility({
...Object.keys(categoryVisibility).reduce<{
[key: string]: boolean;
}>((acc, cat) => {
acc[cat] = cat === category;
return acc;
}, {}),
});
}
newParams.set('page', '1');
router.push(createUrl(locale + '/products', newParams));
},
[newParams, router, locale, categoryVisibility, handleShowAll]
);
return null;
}
bold prism