Progress on converting DateRangeSeelector to use sveltekit-search-params

Author: techniq

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

@@ -1,4 +1,9 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { queryParameters, ssp } from 'sveltekit-search-params';
+	import type { DateRange } from 'bits-ui';
+	import { DateFormatter, getLocalTimeZone, fromAbsolute } from '@internationalized/date';
+
 	import {
 		DATE_RANGE_PARAM,
 		DATE_RANGES,
@@ -11,15 +16,21 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Popover, PopoverContent, PopoverTrigger } from '$lib/components/ui/popover';
 	import IconCalendarDateRange from '~icons/heroicons/calendar-date-range-16-solid';
-	import type { DateRange } from 'bits-ui';
-	import { DateFormatter, getLocalTimeZone, fromAbsolute } from '@internationalized/date';
+
 	import { cn } from '$lib/utils';
 	import { RangeCalendar } from '$lib/components/ui/range-calendar/index';
-	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { untrack } from 'svelte';
 	import { parseDateRangeParams } from '$lib/util/date-ranges';
 
+	const params = queryParameters(
+		{
+			[DATE_RANGE_PARAM]: ssp.string(),
+			[DATE_RANGE_START_PARAM]: ssp.number(),
+			[DATE_RANGE_END_PARAM]: ssp.number()
+		},
+		{ pushHistory: false, showDefaults: false }
+	);
+
 	const df = new DateFormatter('en-US', {
 		dateStyle: 'medium'
 	});
@@ -42,24 +53,21 @@
 		if (newSelectedDateRange && newSelectedDateRange.start && newSelectedDateRange.end) {
 			const startDate = newSelectedDateRange.start.toDate(getLocalTimeZone()).getTime();
 			const endDate = newSelectedDateRange.end.toDate(getLocalTimeZone()).getTime();
-			updateURLParams(CUSTOM, startDate.toString(), endDate.toString());
+			updateURLParams(CUSTOM, startDate, endDate);
 			calendarDateRangePopoverOpen = false;
 		}
 	}
 
-	function updateURLParams(range: string, start?: string, end?: string) {
-		const url = new URL($page.url);
-		url.searchParams.set(DATE_RANGE_PARAM, range);
+	function updateURLParams(range: string, start?: number, end?: number) {
+		params[DATE_RANGE_PARAM] = range;
 
 		if (range === CUSTOM && start && end) {
-			url.searchParams.set(DATE_RANGE_START_PARAM, start);
-			url.searchParams.set(DATE_RANGE_END_PARAM, end);
+			params[DATE_RANGE_START_PARAM] = start;
+			params[DATE_RANGE_END_PARAM] = end;
 		} else {
-			url.searchParams.delete(DATE_RANGE_START_PARAM);
-			url.searchParams.delete(DATE_RANGE_END_PARAM);
+			params[DATE_RANGE_START_PARAM] = null;
+			params[DATE_RANGE_END_PARAM] = null;
 		}
-
-		goto(url.toString(), { replaceState: true });
 	}
 
 	$effect(() => {
@@ -68,11 +76,21 @@
 			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())
+			// };
 		});
 	});
 

frontend/src/lib/constants/date-ranges.ts

@@ -61,6 +61,6 @@ export const DATE_RANGES: DateRange[] = [
 
 export type DateRangeOption = (typeof DATE_RANGES)[number];
 
-export function getDateRangeByValue(value: string): DateRange | undefined {
+export function getDateRangeByValue(value: string | null): DateRange | undefined {
 	return DATE_RANGES.find((range) => range.value === value);
 }