forwarded navigate events

src/helpers/index.ts

@@ -1,4 +1,3 @@
-export * from './toProduct';
 export * from './utils/parse';
 export * from './utils/avgRating';
 export * from './param';

src/helpers/param.ts

@@ -1,5 +1,6 @@
 import { normalize, parseSlug, parseName } from '.';
 import type { Product } from '$types';
+import type { Writable } from 'svelte/store';
 
 /** Gets parameter from URL of field. Defaults to 'product' */
 export const getProdParam = (field = 'product'): string =>
@@ -23,3 +24,11 @@ export const updateUrlParam = (url: string) => {
 		return updatedUrl;
 	};
 };
+
+/**
+ * Updates Window URL and checks that it is equal to product name
+ */
+export const didWinUrlUpdate = (product: Product): boolean => {
+	const params = new URLSearchParams(window.location.search).get('product');
+	return parseSlug(params) === normalize(product.name);
+};

src/helpers/toProduct.ts

@@ -1,26 +0,0 @@
-import { parseSlug, normalize, updateUrlParam, resetState } from '.';
-import type { Product } from '$types';
-import type { Writable } from 'svelte/store';
-
-/**
- * Updates Window URL and checks that it is equal to product name
- */
-const didWinUrlUpdate = (product: Product): boolean => {
-	const params = new URLSearchParams(window.location.search).get('product');
-	return parseSlug(params) === normalize(product.name);
-};
-
-/**
- * Takes a `product` and `currentProduct` store
- * Sets URL params to parsed product name and updates Browser URL
- * Sets `currentProduct` store to `product`.
- */
-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/Feature.svelte

@@ -45,7 +45,7 @@
 			{/each}
 		</div>
 	{/if}
-	<PrevNext />
+	<PrevNext on:toProduct />
 </div>
 
 <style lang="postcss">

src/lib/Feature/PrevNext/PrevNext.svelte

@@ -1,18 +1,21 @@
-<script>
+<script lang="ts">
 	import { currentProduct, productsView } from '$lib/stores';
-	import { toProduct } from '$helpers';
+	import { createEventDispatcher } from 'svelte';
 
 	$: foundIndex = $productsView.findIndex((prod) => prod._id === $currentProduct._id);
 	$: PREV = $productsView[foundIndex - 1];
 	$: NEXT = $productsView[foundIndex + 1];
 
+	const dispatch = createEventDispatcher();
+
 	const navigate = (e) => {
-		if (e.target.name === 'prev' && PREV) {
-			toProduct(PREV, currentProduct);
-		}
-		if (e.target.name === 'next' && NEXT) {
-			toProduct(NEXT, currentProduct);
-		}
+		let product;
+		if (e.target.name === 'prev' && PREV) product = PREV;
+		if (e.target.name === 'next' && NEXT) product = NEXT;
+		dispatch('toProduct', {
+			product,
+			currentProduct
+		});
 	};
 
 	const { container, btn } = {
@@ -23,7 +26,7 @@
 
 <div class={container}>
 	{#if PREV}
-		<button on:click={navigate} class={`${btn} pr-4`} name='prev'
+		<button on:click={navigate} class={`${btn} pr-4`} name="prev"
 			><svg focusable="false" width={50} height={50} viewBox="0 0 24 24">
 				<path d="m14 7-5 5 5 5V7z" />
 			</svg><span class="text-left">{PREV.name}</span></button
@@ -33,7 +36,7 @@
 	{/if}
 
 	{#if NEXT}
-		<button on:click={navigate} class={`${btn} pl-4`} name='next'
+		<button on:click={navigate} class={`${btn} pl-4`} name="next"
 			><span class="text-right">{NEXT.name}</span><svg
 				focusable="false"
 				width={50}
@@ -55,6 +58,6 @@
 
 	button:hover {
 		background-image: url('dither.gif');
-    background-repeat: repeat;
+		background-repeat: repeat;
 	}
 </style>

src/lib/Grid.svelte

@@ -1,17 +1,22 @@
 <script>
 	import { urlFor } from './sanityClient';
 	import { currentProduct } from '$lib/stores';
-	import { toProduct } from '$helpers';
 	export let products;
+	import { createEventDispatcher } from 'svelte';
 
-	const { container } = {
-		container: 'flex flex-wrap mt-1 mb-1 justify-start'
-	};
+	const dispatch = createEventDispatcher();
 </script>
 
-<div class={container}>
+<div class="container">
 	{#each products as product}
-		<button on:click={() => toProduct(product, currentProduct)}>
+		<button
+			on:click={() => {
+				dispatch('toProduct', {
+					product,
+					currentProduct
+				});
+			}}
+		>
 			{#if product.image}
 				<img src={urlFor(product.image).width(150).url()} alt={product.name} />
 			{/if}
@@ -19,7 +24,10 @@
 	{/each}
 </div>
 
-<style>
+<style lang="postcss">
+	.container {
+		@apply flex flex-wrap mt-1 mb-1 justify-start;
+	}
 	img:hover {
 		background-image: url('dither.gif');
 		background-repeat: repeat;

src/lib/Layout/Products.svelte

@@ -1,18 +1,22 @@
 <script>
 	export let productsView;
 	export let currentProduct;
-	import { toProduct } from '$helpers';
+	import { createEventDispatcher } from 'svelte';
 
-	const { container, productStyle } = {
-		container: 'pt-4',
-		productList: 'flex flex-col items-start mt-10 text-sm',
-		productStyle: 'w-full text-left snap-start snap-always'
-	};
+	const dispatch = createEventDispatcher();
 </script>
 
-<div class={container}>
+<div class="container">
 	{#each productsView as product}
-		<button class={productStyle} on:click={() => toProduct(product, currentProduct)}>
+		<button
+			class="productStyle"
+			on:click={() => {
+				dispatch('toProduct', {
+					product,
+					currentProduct
+				});
+			}}
+		>
 			<p
 				class={`pl-4 hover:bg-gray-200 ${
 					$currentProduct && $currentProduct.name === product.name ? 'dither' : ''
@@ -23,3 +27,13 @@
 		</button>
 	{/each}
 </div>
+
+<style lang="postcss">
+	.container {
+		@apply pt-4;
+	}
+
+	.productStyle {
+		@apply w-full text-left snap-start snap-always;
+	}
+</style>

src/routes/__layout.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
 	import '../app.css';
 	import { products, productsView, currentProduct, filters } from '$lib/stores';
-	import { defaultFilter, resetState } from '$helpers';
+	import { defaultFilter, didWinUrlUpdate, resetState, updateUrlParam } from '$helpers';
 	import Products from '$lib/Layout/Products.svelte';
 	import Header from '$lib/Layout/Header.svelte';
 	import Search from '$lib/Layout/Search.svelte';
@@ -15,6 +15,21 @@
 		filters.set(structuredClone(defaultFilter));
 	};
 
+	/**
+	 * Takes a `product` and `currentProduct` store
+	 * Sets URL params to parsed product name and updates Browser URL
+	 * Sets `currentProduct` store to `product`.
+	 */
+	const goToProduct = ({ detail }) => {
+		const { product, currentProduct } = detail;
+		const urlWithParam = updateUrlParam(window.location.href)(product);
+		window.history.pushState(window.history.state, '', urlWithParam);
+
+		return didWinUrlUpdate(product)
+			? currentProduct.set(product)
+			: history.pushState(...resetState());
+	};
+
 	const { main, container, sidebar } = {
 		main: 'flex w-screen h-screen sfmono',
 		container: 'flex flex-col h-screen justify-start shrink-0 overflow-auto w-40',
@@ -31,7 +46,7 @@
 				<Filters {reset} />
 				<Sort />
 			{:else}
-				<Products productsView={$productsView} {currentProduct} />
+				<Products productsView={$productsView} {currentProduct} on:toProduct={goToProduct} />
 			{/if}
 		</div>
 	</div>

src/routes/index.svelte

@@ -3,7 +3,13 @@
 	import Grid from '$lib/Grid.svelte';
 	import Feature from '$lib/Feature/Feature.svelte';
 	import { products, productsView, currentProduct } from '$lib/stores';
-	import { findProdFromParam, getProdParam, resetState } from '$helpers';
+	import {
+		didWinUrlUpdate,
+		findProdFromParam,
+		getProdParam,
+		resetState,
+		updateUrlParam
+	} from '$helpers';
 
 	productsView.set($products);
 
@@ -19,6 +25,21 @@
 			load();
 		};
 	}
+
+	/**
+	 * Takes a `product` and `currentProduct` store
+	 * Sets URL params to parsed product name and updates Browser URL
+	 * Sets `currentProduct` store to `product`.
+	 */
+	const goToProduct = ({ detail }) => {
+		const { product, currentProduct } = detail;
+		const urlWithParam = updateUrlParam(window.location.href)(product);
+		window.history.pushState(window.history.state, '', urlWithParam);
+
+		return didWinUrlUpdate(product)
+			? currentProduct.set(product)
+			: history.pushState(...resetState());
+	};
 </script>
 
 <svelte:head>
@@ -27,9 +48,9 @@
 
 <div class="container">
 	{#if Object.keys($currentProduct).length}
-		<Feature />
+		<Feature on:toProduct={goToProduct} />
 	{:else}
-		<Grid products={$productsView} />
+		<Grid products={$productsView} on:toProduct={goToProduct} />
 	{/if}
 </div>