fix: sort table

apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx

@@ -25,6 +25,8 @@ type LeaderboardTableProps = {
   totalPages: number;
   perPage: number;
   page: number;
+  sortBy: 'name' | 'createdAt' | 'signingVolume';
+  sortOrder: 'asc' | 'desc';
 };
 
 export const LeaderboardTable = ({
@@ -32,6 +34,8 @@ export const LeaderboardTable = ({
   totalPages,
   perPage,
   page,
+  sortBy,
+  sortOrder,
 }: LeaderboardTableProps) => {
   const { _ } = useLingui();
 
@@ -49,10 +53,10 @@ export const LeaderboardTable = ({
         size: 10,
       },
       {
-        header: ({ column }) => (
+        header: () => (
           <div
             className="flex cursor-pointer items-center"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            onClick={() => handleColumnSort('name', sortOrder)}
           >
             {_(msg`Name`)}
             <CaretSortIcon className="ml-2 h-4 w-4" />
@@ -63,10 +67,10 @@ export const LeaderboardTable = ({
         size: 250,
       },
       {
-        header: ({ column }) => (
+        header: () => (
           <div
             className="flex cursor-pointer items-center"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            onClick={() => handleColumnSort('signingVolume', sortOrder)}
           >
             {_(msg`Signing Volume`)}
             <CaretSortIcon className="ml-2 h-4 w-4" />
@@ -76,11 +80,11 @@ export const LeaderboardTable = ({
         cell: ({ row }) => <div>{Number(row.getValue('signingVolume'))}</div>,
       },
       {
-        header: ({ column }) => {
+        header: () => {
           return (
             <div
               className="flex cursor-pointer items-center"
-              onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+              onClick={() => handleColumnSort('createdAt', sortOrder)}
             >
               {_(msg`Created`)}
               <CaretSortIcon className="ml-2 h-4 w-4" />
@@ -91,7 +95,7 @@ export const LeaderboardTable = ({
         cell: ({ row }) => <div>{row.original.createdAt.toLocaleDateString()}</div>,
       },
     ] satisfies DataTableColumnDef<SigningVolume>[];
-  }, []);
+  }, [sortOrder]);
 
   useEffect(() => {
     startTransition(() => {
@@ -117,6 +121,18 @@ export const LeaderboardTable = ({
     setSearchString(e.target.value);
   };
 
+  const handleColumnSort = (
+    column: 'name' | 'createdAt' | 'signingVolume',
+    sortOrder: 'asc' | 'desc',
+  ) => {
+    startTransition(() => {
+      updateSearchParams({
+        sortBy: sortBy === column,
+        sortOrder: sortOrder === 'asc' ? 'desc' : 'asc',
+      });
+    });
+  };
+
   return (
     <div className="relative">
       <Input

apps/web/src/app/(dashboard)/admin/leaderboard/fetch-leaderboard.actions.ts

@@ -4,14 +4,22 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import { getSigningVolume } from '@documenso/lib/server-only/admin/get-signing-volume';
 
-export async function search(search: string, page: number, perPage: number) {
+type SearchOptions = {
+  search: string;
+  page: number;
+  perPage: number;
+  sortBy: 'name' | 'createdAt' | 'signingVolume';
+  sortOrder: 'asc' | 'desc';
+};
+
+export async function search({ search, page, perPage, sortBy, sortOrder }: SearchOptions) {
   const { user } = await getRequiredServerComponentSession();
 
   if (!isAdmin(user)) {
     throw new Error('Unauthorized');
   }
 
-  const results = await getSigningVolume({ search, page, perPage });
+  const results = await getSigningVolume({ search, page, perPage, sortBy, sortOrder });
 
   return results;
 }

apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx

@@ -12,6 +12,8 @@ type AdminLeaderboardProps = {
     search?: string;
     page?: number;
     perPage?: number;
+    sortBy?: 'name' | 'createdAt' | 'signingVolume';
+    sortOrder?: 'asc' | 'desc';
   };
 };
 
@@ -27,9 +29,16 @@ export default async function Leaderboard({ searchParams = {} }: AdminLeaderboar
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 10;
   const searchString = searchParams.search || '';
+  const sortBy = searchParams.sortBy || 'signingVolume';
+  const sortOrder = searchParams.sortOrder || 'desc';
 
-  // todo: change the name
-  const { leaderboard: signingVolume, totalPages } = await search(searchString, page, perPage);
+  const { leaderboard: signingVolume, totalPages } = await search({
+    search: searchString,
+    page,
+    perPage,
+    sortBy,
+    sortOrder,
+  });
 
   return (
     <div>
@@ -42,6 +51,8 @@ export default async function Leaderboard({ searchParams = {} }: AdminLeaderboar
           totalPages={totalPages}
           page={page}
           perPage={perPage}
+          sortBy={sortBy}
+          sortOrder={sortOrder}
         />
       </div>
     </div>