From f035f99e208729ce316cf48a6a3f3c55d0e9cad3 Mon Sep 17 00:00:00 2001
From: Jake Ruesink <jaruesink@gmail.com>
Date: Mon, 19 May 2025 22:44:33 -0500
Subject: [PATCH] chore: standardize sort parameter

---
 .../data-table-bazza-filters.stories.tsx           | 14 +++++++-------
 .../remix-hook-form/data-table-router-parsers.ts   |  2 +-
 .../remix-hook-form/use-data-table-url-state.ts    |  2 ++
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx b/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx
index 21dca8c7..bea9a478 100644
--- a/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx
+++ b/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx
@@ -341,11 +341,11 @@ function DataTableWithBazzaFilters() {
   const pageIndex = Number.parseInt(searchParams.get('page') ?? '0', 10);
   const pageSize = Number.parseInt(searchParams.get('pageSize') ?? '10', 10);
   const sortField = searchParams.get('sortField');
-  const sortDesc = searchParams.get('sortDesc') === 'true';
+  const sortOrder = (searchParams.get('sortOrder') || 'asc') as 'asc' | 'desc'; // 'asc' or 'desc'
 
   // --- Pagination and Sorting State ---
   const pagination = { pageIndex, pageSize };
-  const sorting = sortField ? [{ id: sortField, desc: sortDesc }] : [];
+  const sorting = sortField ? [{ id: sortField, desc: sortOrder === 'desc' }] : [];
 
   // --- Event Handlers: update URL directly ---
   const handlePaginationChange: OnChangeFn<PaginationState> = (updaterOrValue) => {
@@ -359,10 +359,10 @@ function DataTableWithBazzaFilters() {
     const next = typeof updaterOrValue === 'function' ? updaterOrValue(sorting) : updaterOrValue;
     if (next.length > 0) {
       searchParams.set('sortField', next[0].id);
-      searchParams.set('sortDesc', next[0].desc ? 'true' : 'false');
+      searchParams.set('sortOrder', next[0].desc ? 'desc' : 'asc');
     } else {
       searchParams.delete('sortField');
-      searchParams.delete('sortDesc');
+      searchParams.delete('sortOrder');
     }
     navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
   };
@@ -441,10 +441,10 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs): Promise<DataRes
   const page = dataTableRouterParsers.page.parse(params.get('page')) ?? 0;
   let pageSize = dataTableRouterParsers.pageSize.parse(params.get('pageSize')) ?? 10;
   const sortField = params.get('sortField'); // Get raw string or null
-  const sortDesc = params.get('sortDesc') === 'true'; // Convert to boolean
+  const sortOrder = (params.get('sortOrder') || 'asc') as 'asc' | 'desc'; // 'asc' or 'desc'
   const filtersParam = params.get('filters');
 
-  console.log('handleDataFetch - Parsed Parameters:', { page, pageSize, sortField, sortDesc, filtersParam });
+  console.log('handleDataFetch - Parsed Parameters:', { page, pageSize, sortField, sortOrder, filtersParam });
 
   if (!pageSize || pageSize <= 0) {
     console.log(`[Loader] - Invalid or missing pageSize (${pageSize}), defaulting to 10.`);
@@ -512,7 +512,7 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs): Promise<DataRes
       let comparison = 0;
       if (aValue < bValue) comparison = -1;
       if (aValue > bValue) comparison = 1;
-      return sortDesc ? comparison * -1 : comparison;
+      return sortOrder === 'desc' ? comparison * -1 : comparison;
     });
   }
 
diff --git a/packages/components/src/remix-hook-form/data-table-router-parsers.ts b/packages/components/src/remix-hook-form/data-table-router-parsers.ts
index dae6e294..52a641ab 100644
--- a/packages/components/src/remix-hook-form/data-table-router-parsers.ts
+++ b/packages/components/src/remix-hook-form/data-table-router-parsers.ts
@@ -121,5 +121,5 @@ export type DataTableRouterState = {
   page: number;
   pageSize: number;
   sortField: string;
-  sortOrder: string;
+  sortOrder: string; // 'asc' or 'desc'
 };
diff --git a/packages/components/src/remix-hook-form/use-data-table-url-state.ts b/packages/components/src/remix-hook-form/use-data-table-url-state.ts
index 56d3562b..12030bf5 100644
--- a/packages/components/src/remix-hook-form/use-data-table-url-state.ts
+++ b/packages/components/src/remix-hook-form/use-data-table-url-state.ts
@@ -20,6 +20,7 @@ export function useDataTableUrlState() {
     page: dataTableRouterParsers.page.parse(searchParams.get('page')),
     pageSize: dataTableRouterParsers.pageSize.parse(searchParams.get('pageSize')),
     sortField: dataTableRouterParsers.sortField.parse(searchParams.get('sortField')),
+    // 'asc' or 'desc'
     sortOrder: dataTableRouterParsers.sortOrder.parse(searchParams.get('sortOrder')),
   };
 
@@ -83,6 +84,7 @@ export function getDefaultDataTableState(defaultStateValues?: Partial<DataTableR
     page: dataTableRouterParsers.page.defaultValue,
     pageSize: dataTableRouterParsers.pageSize.defaultValue,
     sortField: dataTableRouterParsers.sortField.defaultValue,
+    // 'asc' or 'desc'
     sortOrder: dataTableRouterParsers.sortOrder.defaultValue,
     ...defaultStateValues,
   };