Merge pull request #41 from zschaffer/helperRefactor

Cleaned up `index.svelte` and condensed helper functions

src/helpers/index.js

@@ -1,4 +1,4 @@
 export * from './toProduct';
 export * from './parse';
-export * from './normalize';
-export * from './getAvgRating';
+export * from './getAvgRating';
+export * from './param';

src/helpers/normalize.js

@@ -1,6 +0,0 @@
-/**
- * @param {string} str Any string
- * @returns {string} Lowercased string without any extra spaces
- */
-export const normalize = (str) => str.toLowerCase().trim()
-

src/helpers/param.js

@@ -0,0 +1,36 @@
+import { normalize, parseSlug, parseName } from './';
+
+/**
+ * Gets parameter from URL of field. Defaults to 'product'
+ * @param {string} field='product'
+ * @returns {string} parameter of field
+ */
+export const getProdParam = (field = 'product') =>
+	new URLSearchParams(window.location.search).get(field) || ''
+
+/**
+ * Finds a product in products store with matching name as parameter.
+ * @param {*} param parameter
+ * @param {*} $products products store
+ * @returns
+ */
+export const findProdFromParam = (param, $products) => 
+	$products.find(({ name }) => normalize(name) === parseSlug(param)) || {}
+
+/**
+ * Resets params and navigates back to index
+ */
+export const resetParams = () => history.pushState({}, '', new URL(window.location.origin));
+
+/**
+ * Updates a url with search parameters with name of product parameter.
+ * @param {URL} url a URL object
+ * @param {object} product
+ * @returns {URL} a URL object with search parameters appended.
+ */
+export const setUrlParam = (url, product) => {
+	url.searchParams.set('product', parseName(product.name));
+	return url;
+};
+
+

src/helpers/parse.js

@@ -1,4 +1,9 @@
-import {normalize }from './normalize';
+
+/**
+ * @param {string} str Any string
+ * @returns {string} Lowercased string without any extra spaces
+ */
+ export const normalize = (str) => str.toLowerCase().trim()
 
 /**
  * @param {string} slug Slug of a product name

src/helpers/toProduct.js

@@ -1,15 +1,4 @@
-import { parseName, parseSlug, normalize } from './';
-
-/**
- * Updates a url with search parameters to match product name of product passed in.
- * @param {URL} url a URL object
- * @param {object} product
- * @returns {URL} a URL object with search parameters appended.
- */
-const setUrlParam = (url, product) => {
-	url.searchParams.set('product', parseName(product.name));
-	return url;
-};
+import { parseSlug, normalize, setUrlParam, resetParams } from './';
 
 /**
  * Updates Window URL and checks that it is equal to product name
@@ -31,5 +20,5 @@ const didWinUrlUpdate = (url, product) => {
  * @param {store} currentProduct currentProduct store
  */
 export const toProduct = (product, currentProduct) =>
-	didWinUrlUpdate(setUrlParam(new URL(window.location), product), product) &&
-	currentProduct.set(product)
+	didWinUrlUpdate(setUrlParam(new URL(window.location), product), product)?
+	currentProduct.set(product): resetParams()

src/routes/index.svelte

@@ -1,43 +1,32 @@
 <script>
+	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 { browser } from '$app/env';
-	import { normalize, parseSlug } from '$helpers';
+	import { findProdFromParam, getProdParam, resetParams } from '$helpers';
 
 	export let data;
+
 	products.set(data.products);
-	tags.set(data.tags);
-	emotions.set(data.emotions)
-
 	productsView.set(data.products);
-	const goToProduct = () => {
-		const paramProd = (new URLSearchParams(window.location.search)).get('product');
+	tags.set(data.tags);
+	emotions.set(data.emotions);
 
-		if (paramProd) {
-			const foundProduct = $products.find(
-				({ name }) => normalize(name) === normalize(parseSlug(paramProd))
-			);
-			if (foundProduct) {
-				currentProduct.set(foundProduct);
-			}
-		} else {
-			const url = new URL(window.location.origin);
-			history.pushState({}, '', url);
-			currentProduct.set({});
-		}
+	const load = () => {
+		currentProduct.set(findProdFromParam(getProdParam(), $products));
+		if (getProdParam() && JSON.stringify($currentProduct) === '{}') resetParams();
 	};
 
 	if (browser) {
-		goToProduct();
+		load();
 		window.onpopstate = () => {
-			goToProduct();
-		}
+			load();
+		};
 	}
 
-	const { container} = {
+	const { container } = {
 		container: 'h-screen overflow-auto w-screen'
-	}
+	};
 </script>
 
 <svelte:head>