Fetch and display categories in CategoryFilterDropdown; update adventure details to include category information

frontend/src/lib/components/CategoryFilterDropdown.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
-	import { ADVENTURE_TYPES } from '$lib';
+	import type { Category } from '$lib/types';
 	import { onMount } from 'svelte';
 	import { t } from 'svelte-i18n';
 
 	let types_arr: string[] = [];
 	export let types: string;
+	let adventure_types: Category[] = [];
 
-	onMount(() => {
-		console.log(types);
+	onMount(async () => {
+		let categoryFetch = await fetch('/api/categories/categories');
+		let categoryData = await categoryFetch.json();
+		adventure_types = categoryData;
+		console.log(categoryData);
 		types_arr = types.split(',');
 	});
 
@@ -17,12 +21,15 @@
 	}
 
 	function toggleSelect(type: string) {
-		if (types_arr.includes(type)) {
-			types_arr = types_arr.filter((t) => t !== type);
+		if (types_arr.indexOf(type) > -1) {
+			types_arr = types_arr.filter((item) => item !== type);
 		} else {
 			types_arr.push(type);
 		}
+		types_arr = types_arr.filter((item) => item !== '');
+		// turn types_arr into a comma seperated list with no spaces
 		types = types_arr.join(',');
+
 		console.log(types);
 		console.log(types_arr);
 	}
@@ -37,16 +44,16 @@
 		<button class="btn btn-wide btn-neutral-300" on:click={clearTypes}
 			>{$t(`adventures.clear`)}</button
 		>
-		{#each ADVENTURE_TYPES as type}
+		{#each adventure_types as type}
 			<li>
 				<label class="cursor-pointer">
 					<input
 						type="checkbox"
-						value={type.label}
-						on:change={() => toggleSelect(type.type)}
-						checked={types.indexOf(type.type) > -1}
+						value={type.name}
+						on:change={() => toggleSelect(type.name)}
+						checked={types.indexOf(type.name) > -1}
 					/>
-					<span>{$t(`adventures.activities.${type.type}`)}</span>
+					<span>{type.display_name + ' ' + type.icon}</span>
 				</label>
 			</li>
 		{/each}

frontend/src/lib/types.ts

@@ -187,3 +187,11 @@ export type ReverseGeocode = {
 	is_visited: boolean;
 	display_name: string;
 };
+
+export type Category = {
+	id: string;
+	name: string;
+	display_name: string;
+	icon: string;
+	user_id: number;
+};

frontend/src/routes/adventures/+page.svelte

@@ -6,7 +6,7 @@
 	import AdventureModal from '$lib/components/AdventureModal.svelte';
 	import CategoryFilterDropdown from '$lib/components/CategoryFilterDropdown.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
-	import type { Adventure } from '$lib/types';
+	import type { Adventure, Category } from '$lib/types';
 	import { t } from 'svelte-i18n';
 
 	import Plus from '~icons/mdi/plus';
@@ -15,6 +15,7 @@
 	console.log(data);
 
 	let adventures: Adventure[] = data.props.adventures || [];
+	let categories: Category[] = data.props.categories || [];
 
 	let currentSort = {
 		order_by: '',
@@ -35,10 +36,15 @@
 	let typeString: string = '';
 
 	$: {
+		console.log(typeString);
 		if (typeof window !== 'undefined' && typeString) {
 			let url = new URL(window.location.href);
 			url.searchParams.set('types', typeString);
 			goto(url.toString(), { invalidateAll: true, replaceState: true });
+		} else if (typeof window !== 'undefined' && !typeString) {
+			let url = new URL(window.location.href);
+			url.searchParams.set('types', 'all');
+			goto(url.toString(), { invalidateAll: true, replaceState: true });
 		}
 	}
 

frontend/src/routes/adventures/[id]/+page.svelte

@@ -265,7 +265,7 @@
 								<div>
 									<p class="text-sm text-muted-foreground">{$t('adventures.adventure_type')}</p>
 									<p class="text-base font-medium">
-										{$t(`adventures.activities.${adventure.type}`)}
+										{`${adventure.category.display_name} ${adventure.category.icon}`}
 									</p>
 								</div>
 								{#if data.props.collection}