Update DateRangeSelector to use sveltekit-search-params to manage URL state

Author: techniq

frontend/src/lib/components/DateRangeSelector/DateRangeSelector.svelte

@@ -10,7 +10,6 @@
 		CUSTOM,
 		DATE_RANGE_START_PARAM,
 		DATE_RANGE_END_PARAM,
-		type DateRangeOption,
 		getDateRangeByValue
 	} from '$lib/constants/date-ranges';
 	import { Button } from '$lib/components/ui/button';
@@ -19,8 +18,6 @@
 
 	import { cn } from '$lib/utils';
 	import { RangeCalendar } from '$lib/components/ui/range-calendar/index';
-	import { page } from '$app/stores';
-	import { parseDateRangeParams } from '$lib/util/date-ranges';
 
 	const params = queryParameters(
 		{
@@ -35,12 +32,31 @@
 		dateStyle: 'medium'
 	});
 
-	let selectDateRange: DateRangeOption | undefined = $state(undefined);
+	let selectDateRange = $derived(getDateRangeByValue(params[DATE_RANGE_PARAM]));
+
 	let calendarDateRange: DateRange | undefined = $state({
 		start: undefined,
 		end: undefined
 	});
 
+	// Update `calendarDateRange` when `selectDateRange` (preset selection) changes
+	$effect(() => {
+		const selectedRange = selectDateRange?.getRange();
+		const isCustomPreset = selectDateRange?.value === CUSTOM;
+		untrack(() => {
+			calendarDateRange = {
+				start: fromAbsolute(
+					isCustomPreset ? params[DATE_RANGE_START_PARAM] : selectedRange?.[0],
+					getLocalTimeZone()
+				),
+				end: fromAbsolute(
+					isCustomPreset ? params[DATE_RANGE_END_PARAM] : selectedRange?.[1],
+					getLocalTimeZone()
+				)
+			};
+		});
+	});
+
 	let dateRangePopoverOpen = $state(false);
 	let calendarDateRangePopoverOpen = $state(false);
 
@@ -70,30 +86,6 @@
 		}
 	}
 
-	$effect(() => {
-		const url = new URL($page.url);
-		untrack(() => {
-			const { dateRangeValue, startTimestamp, endTimestamp } = parseDateRangeParams(
-				url.searchParams
-			);
-			// console.log({ dateRangeValue, startTimestamp, endTimestamp });
-			// console.log(JSON.parse(JSON.stringify(params)));
-
-			// TODO: Use `params` and handle converting non-custom ranges (ex. "Past 1 Month")
-			selectDateRange = getDateRangeByValue(dateRangeValue);
-			calendarDateRange = {
-				start: fromAbsolute(Number(startTimestamp), getLocalTimeZone()),
-				end: fromAbsolute(Number(endTimestamp), getLocalTimeZone())
-			};
-
-			// selectDateRange = getDateRangeByValue(params[DATE_RANGE_PARAM]);
-			// calendarDateRange = {
-			// 	start: fromAbsolute(params[DATE_RANGE_START_PARAM], getLocalTimeZone()),
-			// 	end: fromAbsolute(params[DATE_RANGE_END_PARAM], getLocalTimeZone())
-			// };
-		});
-	});
-
 	function getNonCustomDateRanges() {
 		return DATE_RANGES.filter((range) => range.value !== CUSTOM);
 	}