refactor item sort

src/lib/cleanString.ts

@@ -0,0 +1,9 @@
+/** remove emojis and whitespace */
+export function cleanString(string: string): string {
+	return string
+		.replace(
+			/[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2580-\u27BF]|\uD83E[\uDD10-\uDDFF]| /g,
+			''
+		)
+		.trim()
+}

src/lib/data/items.ts

@@ -1,3 +1,4 @@
+import { cleanString } from '$lib/cleanString'
 import { db } from '$lib/firebase'
 import { calculateKcalPer100FromItems } from '$lib/kcal'
 import { getStorage, setStorage } from '$lib/localStorage'
@@ -213,3 +214,40 @@ export interface Portion {
 // 	}
 // 	return items;
 // }
+
+export enum ItemSortModes {
+	updatedAt = 'Recently Updated',
+	createdAt = 'Creation Time',
+	label = 'Label',
+	brand = 'Brand',
+	recentItems = 'Recent Items',
+}
+
+export function getSortedItems(mode: ItemSortModes) {
+	const $items = get(items)
+	const collator = new Intl.Collator()
+	console.log('sorting by ...' + mode)
+	switch (mode) {
+		case ItemSortModes.updatedAt:
+			return $items.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
+		case ItemSortModes.createdAt:
+			return $items.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0))
+		case ItemSortModes.label:
+			return $items.sort(({ label: a }, { label: b }) => {
+				const cleanA = cleanString(a)
+				const cleanB = cleanString(b)
+				return collator.compare(cleanA, cleanB)
+			})
+		case ItemSortModes.brand:
+			return $items.sort(({ brand: a }, { brand: b }) => {
+				const cleanA = cleanString(a)
+				const cleanB = cleanString(b)
+				return collator.compare(cleanA, cleanB)
+			})
+		case ItemSortModes.recentItems:
+			return get(recentItems)
+		default:
+			console.warn('No sort mode for ' + mode)
+			return $items
+	}
+}

src/lib/views/ItemDrawer/SavedItems.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import ItemCards from '$lib/components/ItemCards.svelte'
 	import ItemSkeleton from '$lib/components/ItemSkeleton.svelte'
-	import { items, type Item } from '$lib/data/items'
+	import {
+		getSortedItems,
+		items,
+		ItemSortModes,
+		type Item,
+	} from '$lib/data/items'
 	import { fuzzySearch } from '$lib/fuzzySearch'
 	import Input from '$lib/Input.svelte'
 	import Select from '$lib/Select.svelte'
@@ -14,68 +19,23 @@
 
 	let search = ''
 	let showQuickSnacks = false
-	let sortMode = 'updatedAt'
+	let sortMode = ItemSortModes.updatedAt
 	const dispatch = createEventDispatcher<{ edit: Item }>()
-	const collator = new Intl.Collator()
 
-	$: sortedItems = sortItems($items, sortMode)
+	$: sortedItems = getSortedItems(sortMode)
 
-	function sortItems(items: Item[], mode: string) {
-		switch (mode) {
-			case 'updatedAt':
-				return items.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
-			case 'label':
-				return items.sort(({ label: a }, { label: b }) => {
-					const cleanA = cleanString(a)
-					const cleanB = cleanString(b)
-					return collator.compare(cleanA, cleanB)
-				})
-			case 'brand':
-				return items.sort(({ brand: a }, { brand: b }) => {
-					const cleanA = cleanString(a)
-					const cleanB = cleanString(b)
-					return collator.compare(cleanA, cleanB)
-				})
-			default:
-				return items
-		}
-	}
-
-	function cleanString(str: string) {
-		// remove emojis and whitespace
-		return str
-			.replace(
-				/[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2580-\u27BF]|\uD83E[\uDD10-\uDDFF]| /g,
-				''
-			)
-			.trim()
-	}
+	const sortModeOptions = Object.values(ItemSortModes).map((value) => ({
+		label: value,
+		value,
+	}))
 </script>
 
 {#if !showQuickSnacks}
 	<h2 class="headline-3 with-icon"><IcItems /> Saved Items</h2>
 	<Input clearable bind:value={search}>Search</Input>
 
 	{#if !search}
-		<Select
-			bind:value={sortMode}
-			options={[
-				{
-					label: 'Recently Updated',
-					value: 'updatedAt',
-				},
-				{
-					label: 'Label',
-					value: 'label',
-				},
-				{
-					label: 'Brand',
-					value: 'brand',
-				},
-			]}
-		>
-			Sort
-		</Select>
+		<Select bind:value={sortMode} options={sortModeOptions}>Sort</Select>
 	{/if}
 
 	{#if sortedItems}