Add getSearchParamValues() util to simplify using sveltekit-search-params config to get values from URLSearchParams (particularly useful server side)

Author: techniq

frontend/src/lib/types/MetricType/MetricType.ts

@@ -1,4 +1,5 @@
 import type { EncodeAndDecodeOptions } from 'sveltekit-search-params/sveltekit-search-params';
+import { getSearchParamValues } from '$lib/util/search-params';
 
 export const METRIC_TYPES = ['jsd', 'hellinger', 'psi'] as const;
 export type MetricType = (typeof METRIC_TYPES)[number];
@@ -30,7 +31,5 @@ export function getMetricTypeParamsConfig() {
 
 export function getMetricTypeFromParams(searchParams: URLSearchParams): MetricType {
 	const paramsConfig = getMetricTypeParamsConfig();
-	const [paramName, paramConfig] = Object.entries(paramsConfig)[0]; // single `metric` config
-	const value = searchParams.get(paramName);
-	return paramConfig.decode(value) ?? paramConfig.defaultValue;
+	return getSearchParamValues(searchParams, paramsConfig).metric;
 }

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

@@ -1,43 +1,40 @@
+import { ssp } from 'sveltekit-search-params';
+
 import {
 	DATE_RANGE_PARAM,
 	DATE_RANGE_START_PARAM,
 	DATE_RANGE_END_PARAM,
 	PAST_1_WEEK,
 	getDateRangeByValue
 } from '$lib/constants/date-ranges';
-import { ssp } from 'sveltekit-search-params';
+import { getSearchParamValues } from './search-params';
 
 export function getDateRange(range: string): [number, number] {
 	const dateRange = getDateRangeByValue(range);
 	return dateRange ? dateRange.getRange() : getDateRangeByValue(PAST_1_WEEK)!.getRange();
 }
 
-export function parseDateRangeParams(searchParams: URLSearchParams) {
-	const dateRangeValue = searchParams.get(DATE_RANGE_PARAM);
-	const startParam = searchParams.get(DATE_RANGE_START_PARAM);
-	const endParam = searchParams.get(DATE_RANGE_END_PARAM);
-
-	let startTimestamp: number;
-	let endTimestamp: number;
-
-	if (startParam && endParam) {
-		startTimestamp = Number(startParam);
-		endTimestamp = Number(endParam);
-	} else {
-		[startTimestamp, endTimestamp] = getDateRange(dateRangeValue || PAST_1_WEEK);
-	}
-
-	return {
-		dateRangeValue: dateRangeValue || PAST_1_WEEK,
-		startTimestamp,
-		endTimestamp
-	};
-}
-
 export function getDateRangeParamsConfig() {
 	return {
 		[DATE_RANGE_PARAM]: ssp.string(PAST_1_WEEK),
 		[DATE_RANGE_START_PARAM]: ssp.number(),
 		[DATE_RANGE_END_PARAM]: ssp.number()
 	};
 }
+
+export function parseDateRangeParams(searchParams: URLSearchParams) {
+	const paramsConfig = getDateRangeParamsConfig();
+	const paramValues = getSearchParamValues(searchParams, paramsConfig);
+
+	if (paramValues[DATE_RANGE_START_PARAM] == null || paramValues[DATE_RANGE_END_PARAM] == null) {
+		const [start, end] = getDateRange(paramValues[DATE_RANGE_PARAM] || PAST_1_WEEK);
+		paramValues[DATE_RANGE_START_PARAM] = start;
+		paramValues[DATE_RANGE_END_PARAM] = end;
+	}
+
+	return {
+		dateRangeValue: paramValues[DATE_RANGE_PARAM],
+		startTimestamp: paramValues[DATE_RANGE_START_PARAM],
+		endTimestamp: paramValues[DATE_RANGE_END_PARAM]
+	};
+}

frontend/src/lib/util/search-params.ts

@@ -0,0 +1,16 @@
+import type { EncodeAndDecodeOptions } from 'sveltekit-search-params/sveltekit-search-params';
+
+/** Get URLSearchParam values from `sveltekit-search-params` config.
+ *  Mostly useful server-side (use `queryParameters()` client side)
+ **/
+export function getSearchParamValues(
+	searchParams: URLSearchParams,
+	paramsConfig: Record<string, EncodeAndDecodeOptions>
+) {
+	const paramEntries = Object.entries(paramsConfig).map(([paramName, paramConfig]) => {
+		const value = searchParams.get(paramName);
+		let decodedValue = paramConfig.decode(value) ?? paramConfig.defaultValue;
+		return [paramName, decodedValue];
+	});
+	return Object.fromEntries(paramEntries);
+}