Filter in sidebar of adventures list page!

frontend/src/lib/components/CategoryFilterDropdown.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { ADVENTURE_TYPES } from '$lib';
+	import { onMount } from 'svelte';
+
+	let types_arr: string[] = [];
+	export let types: string;
+
+	onMount(() => {
+		console.log(types);
+		types_arr = types.split(',');
+	});
+
+	function clearTypes() {
+		types = '';
+		types_arr = [];
+	}
+
+	function toggleSelect(type: string) {
+		if (types_arr.includes(type)) {
+			types_arr = types_arr.filter((t) => t !== type);
+		} else {
+			types_arr.push(type);
+		}
+		types = types_arr.join(',');
+		console.log(types);
+		console.log(types_arr);
+	}
+</script>
+
+<div class="collapse collapse-plus bg-base-300 mb-4 overflow-visible">
+	<input type="checkbox" />
+	<div class="collapse-title text-xl font-medium">Category Filter</div>
+	<div class="collapse-content">
+		<button class="btn btn-wide mb-1 btn-neutral-300" on:click={clearTypes}>Clear</button>
+		{#each ADVENTURE_TYPES as type}
+			<!-- checkbox for each -->
+			<li>
+				<label class="cursor-pointer">
+					<input
+						type="checkbox"
+						value={type.label}
+						on:change={() => toggleSelect(type.type)}
+						checked={types.indexOf(type.type) > -1}
+					/>
+					<span>{type.label}</span>
+				</label>
+			</li>
+		{/each}
+	</div>
+</div>

frontend/src/routes/adventures/+page.server.ts

@@ -16,12 +16,12 @@ export const load = (async (event) => {
 		let count = 0;
 		let adventures: Adventure[] = [];
 
-		// const visited = event.url.searchParams.get('visited');
-		// const planned = event.url.searchParams.get('planned');
+		let typeString = event.url.searchParams.get('types');
 
-		let typeString: string = 'all';
-
-		// *** FOR NOW TYPESTRING IS ALWAYS 'ALL' BECAUSE WE DON'T HAVE A WAY TO FILTER BY VISITED/PLANNED YET ***
+		// If no type is specified, default to 'all'
+		if (!typeString) {
+			typeString = 'all';
+		}
 
 		const include_collections = event.url.searchParams.get('include_collections') || 'false';
 		const order_by = event.url.searchParams.get('order_by') || 'updated_at';

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

@@ -4,6 +4,7 @@
 	import { page } from '$app/stores';
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	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';
 
@@ -28,6 +29,28 @@
 	let totalPages = Math.ceil(count / resultsPerPage);
 	let currentPage: number = 1;
 
+	let typeString: string = '';
+
+	$: {
+		if (typeof window !== 'undefined') {
+			let url = new URL(window.location.href);
+			url.searchParams.set('types', typeString);
+			goto(url.toString(), { invalidateAll: true, replaceState: true });
+		}
+	}
+
+	// sets typeString if present in the URL
+	$: {
+		// check to make sure its running on the client side
+		if (typeof window !== 'undefined') {
+			let url = new URL(window.location.href);
+			let types = url.searchParams.get('types');
+			if (types) {
+				typeString = types;
+			}
+		}
+	}
+
 	function handleChangePage(pageNumber: number) {
 		// let query = new URLSearchParams($page.url.searchParams.toString());
 
@@ -218,27 +241,8 @@
 			<div class="form-control">
 				<!-- <h3 class="text-center font-bold text-lg mb-4">Adventure Types</h3> -->
 				<form method="get">
-					<!-- <label class="label cursor-pointer">
-						<span class="label-text">Completed</span>
-						<input
-							type="checkbox"
-							name="visited"
-							id="visited"
-							class="checkbox checkbox-primary"
-							checked={currentSort.visited}
-						/>
-					</label>
-					<label class="label cursor-pointer">
-						<span class="label-text">Planned</span>
-						<input
-							type="checkbox"
-							id="planned"
-							name="planned"
-							class="checkbox checkbox-primary"
-							checked={currentSort.planned}
-						/>
-					</label> -->
-					<!-- <div class="divider"></div> -->
+					<CategoryFilterDropdown bind:types={typeString} />
+					<div class="divider"></div>
 					<h3 class="text-center font-bold text-lg mb-4">Sort</h3>
 					<p class="text-lg font-semibold mb-2">Order Direction</p>
 					<div class="join">