refactor(frontend): use in house function to parse search params

apps/frontend/app/routes/_dashboard.calendar.tsx

@@ -15,12 +15,11 @@ import {
 	UserCalendarEventsDocument,
 	type UserCalendarEventsQuery,
 } from "@ryot/generated/graphql/backend/graphql";
-import { sum } from "@ryot/ts-utils";
+import { parseRequestSearchQuery, sum } from "@ryot/ts-utils";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { Fragment } from "react/jsx-runtime";
 import { match } from "ts-pattern";
 import { z } from "zod";
-import { zx } from "zodix";
 import { ApplicationGrid } from "~/components/common";
 import { MetadataDisplayItem } from "~/components/media";
 import { dayjsLib } from "~/lib/generals";
@@ -40,7 +39,7 @@ export type SearchParams = z.infer<typeof searchParamsSchema>;
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const cookieName = await getEnhancedCookieName("calendar", request);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	const date = dayjsLib(query.date);
 	const [{ userCalendarEvents }] = await Promise.all([
 		serverGqlService.authenticatedRequest(request, UserCalendarEventsDocument, {

apps/frontend/app/routes/_dashboard.collections.$id._index.tsx

@@ -24,7 +24,11 @@ import {
 	GraphqlSortOrder,
 	MediaLot,
 } from "@ryot/generated/graphql/backend/graphql";
-import { startCase, zodIntAsString } from "@ryot/ts-utils";
+import {
+	parseRequestSearchQuery,
+	startCase,
+	zodIntAsString,
+} from "@ryot/ts-utils";
 import {
 	IconBucketDroplet,
 	IconFilter,
@@ -84,7 +88,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 		request,
 	);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	const [{ collectionContents }] = await Promise.all([
 		serverGqlService.authenticatedRequest(request, CollectionContentsDocument, {
 			input: {

apps/frontend/app/routes/_dashboard.fitness.$entity.list.tsx

@@ -29,6 +29,7 @@ import {
 import {
 	changeCase,
 	humanizeDuration,
+	parseRequestSearchQuery,
 	truncate,
 	zodIntAsString,
 } from "@ryot/ts-utils";
@@ -92,7 +93,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 	});
 	const cookieName = await getEnhancedCookieName(`${entity}.list`, request);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	const itemList = await match(entity)
 		.with(FitnessEntity.Workouts, async () => {
 			const { userWorkoutsList } = await serverGqlService.authenticatedRequest(

apps/frontend/app/routes/_dashboard.fitness.exercises.$action.tsx

@@ -33,6 +33,7 @@ import {
 import {
 	cloneDeep,
 	getActionIntent,
+	parseRequestSearchQuery,
 	processSubmission,
 	startCase,
 	zodBoolAsString,
@@ -64,7 +65,7 @@ enum Action {
 
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 	const { action } = zx.parseParams(params, { action: z.nativeEnum(Action) });
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	const details = await match(action)
 		.with(Action.Create, () => undefined)
 		.with(Action.Update, async () => {

apps/frontend/app/routes/_dashboard.fitness.exercises.item.$id._index.tsx

@@ -44,6 +44,7 @@ import {
 import {
 	changeCase,
 	isNumber,
+	parseRequestSearchQuery,
 	snakeCase,
 	sortBy,
 	startCase,
@@ -111,7 +112,7 @@ const paramsSchema = { id: z.string() };
 
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 	const { id: exerciseId } = zx.parseParams(params, paramsSchema);
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	const [{ exerciseDetails }, { userExerciseDetails }] = await Promise.all([
 		serverGqlService.request(ExerciseDetailsDocument, { exerciseId }),
 		serverGqlService.authenticatedRequest(

apps/frontend/app/routes/_dashboard.fitness.exercises.list.tsx

@@ -47,6 +47,7 @@ import {
 import {
 	getActionIntent,
 	isNumber,
+	parseRequestSearchQuery,
 	processSubmission,
 	snakeCase,
 	startCase,
@@ -64,7 +65,6 @@ import { $path } from "remix-routes";
 import { match } from "ts-pattern";
 import { withQuery } from "ufo";
 import { z } from "zod";
-import { zx } from "zodix";
 import { DebouncedSearchInput, FiltersModal } from "~/components/common";
 import {
 	dayjsLib,
@@ -113,17 +113,17 @@ const searchParamsSchema = z.object({
 	level: z.nativeEnum(ExerciseLevel).optional(),
 	force: z.nativeEnum(ExerciseForce).optional(),
 	sortBy: z.nativeEnum(ExerciseSortBy).optional(),
+	muscle: z.nativeEnum(ExerciseMuscle).optional(),
 	mechanic: z.nativeEnum(ExerciseMechanic).optional(),
 	equipment: z.nativeEnum(ExerciseEquipment).optional(),
-	muscle: z.nativeEnum(ExerciseMuscle).optional(),
 });
 
 export type SearchParams = z.infer<typeof searchParamsSchema>;
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const cookieName = await getEnhancedCookieName("exercises.list", request);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	query.sortBy = query.sortBy ?? defaultFiltersValue.sortBy;
 	query[pageQueryParam] = query[pageQueryParam] ?? 1;
 	const [{ exercisesList }] = await Promise.all([

apps/frontend/app/routes/_dashboard.fitness.measurements.list.tsx

@@ -22,7 +22,12 @@ import {
 	DeleteUserMeasurementDocument,
 	UserMeasurementsListDocument,
 } from "@ryot/generated/graphql/backend/graphql";
-import { getActionIntent, processSubmission, startCase } from "@ryot/ts-utils";
+import {
+	getActionIntent,
+	parseRequestSearchQuery,
+	processSubmission,
+	startCase,
+} from "@ryot/ts-utils";
 import {
 	IconChartArea,
 	IconPlus,
@@ -34,7 +39,6 @@ import { match } from "ts-pattern";
 import { withQuery } from "ufo";
 import { useLocalStorage } from "usehooks-ts";
 import { z } from "zod";
-import { zx } from "zodix";
 import {
 	TimeSpan,
 	dayjsLib,
@@ -67,7 +71,7 @@ const defaultTimeSpan = TimeSpan.Last30Days;
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const cookieName = await getEnhancedCookieName("measurements.list", request);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	const now = dayjsLib();
 	const startTime = getDateFromTimeSpan(query.timeSpan || defaultTimeSpan);
 	const [{ userMeasurementsList }] = await Promise.all([

apps/frontend/app/routes/_dashboard.media.$action.$lot.tsx

@@ -38,6 +38,7 @@ import {
 } from "@ryot/generated/graphql/backend/graphql";
 import {
 	changeCase,
+	parseRequestSearchQuery,
 	snakeCase,
 	startCase,
 	zodBoolAsString,
@@ -126,13 +127,14 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 		request,
 	);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
-	const query = zx.parseQuery(request, {
+	const schema = z.object({
 		query: z.string().optional(),
 		[pageQueryParam]: zodIntAsString.default("1"),
 	});
+	const query = parseRequestSearchQuery(request, schema);
 	const [totalResults, mediaList, mediaSearch] = await match(action)
 		.with(Action.List, async () => {
-			const urlParse = zx.parseQuery(request, {
+			const listSchema = z.object({
 				collections: zodCommaDelimitedString,
 				endDateRange: z.string().optional(),
 				startDateRange: z.string().optional(),
@@ -148,6 +150,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 					.nativeEnum(MediaGeneralFilter)
 					.default(defaultFilters.mineGeneralFilter),
 			});
+			const urlParse = parseRequestSearchQuery(request, listSchema);
 			const { metadataList } = await serverGqlService.authenticatedRequest(
 				request,
 				MetadataListDocument,
@@ -180,11 +183,12 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 				(m) => m.lot === lot,
 			);
 			if (!metadataSourcesForLot) throw new Error("Mapping not found");
-			const urlParse = zx.parseQuery(request, {
+			const searchSchema = z.object({
 				source: z
 					.nativeEnum(MediaSource)
 					.default(metadataSourcesForLot.sources[0]),
 			});
+			const urlParse = parseRequestSearchQuery(request, searchSchema);
 			let metadataSearch: MetadataSearchQuery["metadataSearch"] | false;
 			try {
 				const response = await serverGqlService.authenticatedRequest(
@@ -193,8 +197,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 					{
 						input: {
 							lot,
-							search: { page: query[pageQueryParam], query: query.query },
 							source: urlParse.source,
+							search: { page: query[pageQueryParam], query: query.query },
 						},
 					},
 				);

apps/frontend/app/routes/_dashboard.media.genre.$id._index.tsx

@@ -10,7 +10,7 @@ import {
 import type { LoaderFunctionArgs, MetaArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { GenreDetailsDocument } from "@ryot/generated/graphql/backend/graphql";
-import { zodIntAsString } from "@ryot/ts-utils";
+import { parseRequestSearchQuery, zodIntAsString } from "@ryot/ts-utils";
 import { z } from "zod";
 import { zx } from "zodix";
 import { ApplicationGrid } from "~/components/common";
@@ -34,7 +34,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 	const { id: genreId } = zx.parseParams(params, { id: z.string() });
 	const cookieName = await getEnhancedCookieName(`genre.${genreId}`, request);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	const [{ genreDetails }] = await Promise.all([
 		serverGqlService.request(GenreDetailsDocument, {
 			input: { genreId, page: query[pageQueryParam] },

apps/frontend/app/routes/_dashboard.media.genre.list.tsx

@@ -23,13 +23,13 @@ import {
 import {
 	getInitials,
 	isString,
+	parseRequestSearchQuery,
 	truncate,
 	zodIntAsString,
 } from "@ryot/ts-utils";
 import { useQuery } from "@tanstack/react-query";
 import { $path } from "remix-routes";
 import { z } from "zod";
-import { zx } from "zodix";
 import {
 	ApplicationGrid,
 	DebouncedSearchInput,
@@ -65,7 +65,7 @@ export type SearchParams = z.infer<typeof searchParamsSchema>;
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const cookieName = await getEnhancedCookieName("genre.list", request);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	const [{ genresList }] = await Promise.all([
 		serverGqlService.request(GenresListDocument, {
 			input: { page: query[pageQueryParam], query: query.query },

apps/frontend/app/routes/_dashboard.media.groups.$action.tsx

@@ -29,6 +29,7 @@ import {
 import {
 	changeCase,
 	isString,
+	parseRequestSearchQuery,
 	startCase,
 	zodBoolAsString,
 	zodIntAsString,
@@ -82,30 +83,32 @@ enum Action {
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 	const { action } = zx.parseParams(params, { action: z.nativeEnum(Action) });
 	const cookieName = await getEnhancedCookieName(`groups.${action}`, request);
-	const query = zx.parseQuery(request, {
+	const schema = z.object({
 		query: z.string().optional(),
 		[pageQueryParam]: zodIntAsString.default("1"),
 	});
+	const query = parseRequestSearchQuery(request, schema);
 	const [totalResults, list, search] = await match(action)
 		.with(Action.List, async () => {
-			const urlParse = zx.parseQuery(request, {
+			const listSchema = z.object({
 				collections: zodCommaDelimitedString,
 				invertCollection: zodBoolAsString.optional(),
 				orderBy: z.nativeEnum(GraphqlSortOrder).default(defaultFilters.orderBy),
 				sortBy: z
 					.nativeEnum(PersonAndMetadataGroupsSortBy)
 					.default(defaultFilters.sortBy),
 			});
+			const urlParse = parseRequestSearchQuery(request, listSchema);
 			const { metadataGroupsList } =
 				await serverGqlService.authenticatedRequest(
 					request,
 					MetadataGroupsListDocument,
 					{
 						input: {
-							search: { page: query[pageQueryParam], query: query.query },
-							sort: { by: urlParse.sortBy, order: urlParse.orderBy },
-							filter: { collections: urlParse.collections },
 							invertCollection: urlParse.invertCollection,
+							filter: { collections: urlParse.collections },
+							sort: { by: urlParse.sortBy, order: urlParse.orderBy },
+							search: { page: query[pageQueryParam], query: query.query },
 						},
 					},
 				);
@@ -116,9 +119,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 			] as const;
 		})
 		.with(Action.Search, async () => {
-			const urlParse = zx.parseQuery(request, {
+			const searchSchema = z.object({
 				source: z.nativeEnum(MediaSource).default(MediaSource.Tmdb),
 			});
+			const urlParse = parseRequestSearchQuery(request, searchSchema);
 			const coreDetails = await getCoreDetails();
 			const lot = coreDetails.metadataGroupSourceLotMappings.find(
 				(m) => m.source === urlParse.source,

apps/frontend/app/routes/_dashboard.media.groups.item.$id._index.tsx

@@ -17,6 +17,7 @@ import {
 	MetadataGroupDetailsDocument,
 	UserMetadataGroupDetailsDocument,
 } from "@ryot/generated/graphql/backend/graphql";
+import { parseRequestSearchQuery } from "@ryot/ts-utils";
 import {
 	IconDeviceTv,
 	IconInfoCircle,
@@ -49,7 +50,7 @@ export type SearchParams = z.infer<typeof searchParamsSchema>;
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 	const { id: metadataGroupId } = zx.parseParams(params, { id: z.string() });
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	const [{ metadataGroupDetails }, { userMetadataGroupDetails }] =
 		await Promise.all([
 			serverGqlService.request(MetadataGroupDetailsDocument, {

apps/frontend/app/routes/_dashboard.media.item.$id._index.tsx

@@ -64,6 +64,7 @@ import {
 	isInteger,
 	isNumber,
 	isString,
+	parseRequestSearchQuery,
 	processSubmission,
 } from "@ryot/ts-utils";
 import {
@@ -153,7 +154,7 @@ export type SearchParams = z.infer<typeof searchParamsSchema>;
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 	const { id: metadataId } = zx.parseParams(params, { id: z.string() });
-	const query = zx.parseQuery(request, searchParamsSchema);
+	const query = parseRequestSearchQuery(request, searchParamsSchema);
 	const [{ metadataDetails }, { userMetadataDetails }] = await Promise.all([
 		serverGqlService.request(MetadataDetailsDocument, { metadataId }),
 		serverGqlService.authenticatedRequest(