updated param functions and added curried url params

src/helpers/param.ts

@@ -1,5 +1,4 @@
 import { normalize, parseSlug, parseName } from '.';
-import type { UrlObject } from 'url';
 import type { Product } from '$types';
 
 /** Gets parameter from URL of field. Defaults to 'product' */
@@ -8,16 +7,19 @@ export const getProdParam = (field = 'product'): string =>
 
 /** Finds a product in products store with matching name as parameter. */
 export const findProdFromParam = (
-	param: URLSearchParams,
+	param: string,
 	$products: Product[]
 ): Product | Record<string, never> =>
 	$products.find(({ name }) => normalize(name) === parseSlug(param)) || {};
 
-/** Resets params and navigates back to index */
-export const resetParams = () => history.pushState({}, '', new URL(window.location.origin));
+/** Reset value with empty parameters */
+export const resetState = () => [{}, '', new URL(window.location.origin)] as const;
 
-/** Updates a url with search parameters with name of product parameter. */
-export const setUrlParam = (url: URL, product: Product): UrlObject => {
-	url.searchParams.set('product', parseName(product.name));
-	return url;
+/** Creates a new URL and then appends parsed product to it. */
+export const updateUrlParam = (url: string) => {
+	const updatedUrl = new URL(url);
+	return (product: Product) => {
+		updatedUrl.searchParams.set('product', parseName(product.name));
+		return updatedUrl;
+	};
 };

src/helpers/toProduct.ts

@@ -1,13 +1,11 @@
-import { parseSlug, normalize, setUrlParam, resetParams } from '.';
+import { parseSlug, normalize, updateUrlParam, resetState } from '.';
 import type { Product } from '$types';
-import type { Writable} from "svelte/store"
-
+import type { Writable } from 'svelte/store';
 
 /**
  * Updates Window URL and checks that it is equal to product name
  */
-const didWinUrlUpdate = (url: URL, product:Product): boolean => {
-	window.history.pushState(window.history.state, '', url);
+const didWinUrlUpdate = (product: Product): boolean => {
 	const params = new URLSearchParams(window.location.search).get('product');
 	return parseSlug(params) === normalize(product.name);
 };
@@ -17,6 +15,12 @@ const didWinUrlUpdate = (url: URL, product:Product): boolean => {
  * Sets URL params to parsed product name and updates Browser URL
  * Sets `currentProduct` store to `product`.
  */
-export const toProduct = (product: Product, currentProduct:Writable<Product>) =>
-	didWinUrlUpdate(setUrlParam((new URL(window.location.href)), product), product)?
-	currentProduct.set(product): resetParams()
+export const toProduct = (product: Product, currentProduct: Writable<Product>) => {
+	const urlWithParam = updateUrlParam(window.location.href)(product);
+
+	window.history.pushState(window.history.state, '', urlWithParam);
+
+	return didWinUrlUpdate(product)
+		? currentProduct.set(product)
+		: history.pushState(...resetState());
+};

src/lib/Feature/Tag/Tag.svelte

@@ -1,7 +1,7 @@
 <script>
 	export let tag;
 	import { tags, currentProduct, productsView, products, filters } from '$lib/stores';
-	import { filterProductsBy, resetParams } from '$helpers';
+	import { filterProductsBy, resetState } from '$helpers';
 
 	const tagName = $tags.find((dirTag) => dirTag._id === tag._ref).name;
 
@@ -11,7 +11,7 @@
 			filterProductsBy({ type: 'tag', value: tagName, products: $products, tags: $tags })
 		);
 		filters.set({ ...$filters, selectedCat: tagName });
-		resetParams();
+		history.pushState(...resetState());
 	};
 </script>
 

src/routes/__layout.svelte

@@ -1,7 +1,7 @@
 <script>
 	import '../app.css';
 	import { products, productsView, currentProduct, filters } from '$lib/stores';
-	import { defaultFilter, resetParams } from '$helpers';
+	import { defaultFilter, resetState } from '$helpers';
 	import Products from '$lib/Layout/Products.svelte';
 	import Header from '$lib/Layout/Header.svelte';
 	import Search from '$lib/Layout/Search.svelte';
@@ -10,7 +10,7 @@
 
 	const reset = () => {
 		productsView.set($products);
-		resetParams();
+		history.pushState(...resetState());
 		currentProduct.set({});
 		filters.set(structuredClone(defaultFilter));
 	};

src/routes/index.svelte

@@ -2,14 +2,15 @@
 	import { browser } from '$app/env';
 	import Grid from '$lib/Grid.svelte';
 	import Feature from '$lib/Feature/Feature.svelte';
-	import { products, productsView, tags, currentProduct, emotions } from '$lib/stores';
-	import { findProdFromParam, getProdParam, resetParams } from '$helpers';
+	import { products, productsView, currentProduct } from '$lib/stores';
+	import { findProdFromParam, getProdParam, resetState } from '$helpers';
 
 	productsView.set($products);
 
 	const load = () => {
 		currentProduct.set(findProdFromParam(getProdParam(), $products));
-		if (getProdParam() && JSON.stringify($currentProduct) === '{}') resetParams();
+		if (getProdParam() && JSON.stringify($currentProduct) === '{}')
+			history.pushState(...resetState());
 	};
 
 	if (browser) {