✨ sort user device table & refactor sort into common functino

server/routers/client/listUserDevices.ts

@@ -1,3 +1,4 @@
+import { build } from "@server/build";
 import {
     clients,
     currentFingerprint,
@@ -132,9 +133,12 @@ const listUserDevicesSchema = z.object({
         ])
         .optional()
         .catch(undefined),
-    filters: z.preprocess(
+    status: z.preprocess(
-        (val: string) => {
+        (val: string | undefined) => {
-            return val.split(","); // the search query array is an array joined by a comma
+            if (val) {
+                return val.split(","); // the search query array is an array joined by commas
+            }
+            return undefined;
         },
         z
             .array(
@@ -222,16 +226,8 @@ export async function listUserDevices(
                 )
             );
         }
-        const {
+        const { page, pageSize, query, sort_by, online, status, agent, order } =
-            page,
+            parsedQuery.data;
-            pageSize,
-            query,
-            sort_by,
-            online,
-            filters,
-            agent,
-            order
-        } = parsedQuery.data;
 
         const parsedParams = listUserDevicesParamsSchema.safeParse(req.params);
         if (!parsedParams.success) {
@@ -293,7 +289,7 @@ export async function listUserDevices(
             conditions.push(
                 or(
                     ilike(clients.name, "%" + query + "%"),
-                    ilike(users.name, "%" + query + "%")
+                    ilike(users.email, "%" + query + "%")
                 )
             );
         }
@@ -321,34 +317,40 @@ export async function listUserDevices(
             }
         }
 
-        if (filters.length > 0) {
+        if (status.length > 0) {
             const filterAggregates: (SQL<unknown> | undefined)[] = [];
 
-            if (filters.includes("active")) {
+            if (status.includes("active")) {
                 filterAggregates.push(
                     and(
                         eq(clients.archived, false),
                         eq(clients.blocked, false),
-                        or(
+                        build !== "oss"
-                            eq(clients.approvalState, "approved"),
+                            ? or(
-                            isNull(clients.approvalState) // approval state of `NULL` means approved by default
+                                  eq(clients.approvalState, "approved"),
-                        )
+                                  isNull(clients.approvalState) // approval state of `NULL` means approved by default
+                              )
+                            : undefined // undefined are automatically ignored by `drizzle-orm`
                     )
                 );
             }
-            if (filters.includes("pending")) {
+
-                filterAggregates.push(eq(clients.approvalState, "pending"));
+            if (status.includes("archived")) {
-            }
-            if (filters.includes("denied")) {
-                filterAggregates.push(eq(clients.approvalState, "denied"));
-            }
-            if (filters.includes("archived")) {
                 filterAggregates.push(eq(clients.archived, true));
             }
-            if (filters.includes("blocked")) {
+            if (status.includes("blocked")) {
                 filterAggregates.push(eq(clients.blocked, true));
             }
 
+            if (build !== "oss") {
+                if (status.includes("pending")) {
+                    filterAggregates.push(eq(clients.approvalState, "pending"));
+                }
+                if (status.includes("denied")) {
+                    filterAggregates.push(eq(clients.approvalState, "denied"));
+                }
+            }
+
             conditions.push(or(...filterAggregates));
         }
 

src/app/[orgId]/settings/clients/user/page.tsx

@@ -10,6 +10,7 @@ import { getTranslations } from "next-intl/server";
 
 type ClientsPageProps = {
     params: Promise<{ orgId: string }>;
+    searchParams: Promise<Record<string, string>>;
 };
 
 export const dynamic = "force-dynamic";
@@ -18,6 +19,7 @@ export default async function ClientsPage(props: ClientsPageProps) {
     const t = await getTranslations();
 
     const params = await props.params;
+    const searchParams = new URLSearchParams(await props.searchParams);
 
     let userClients: ListUserDevicesResponse["devices"] = [];
 
@@ -30,7 +32,10 @@ export default async function ClientsPage(props: ClientsPageProps) {
     try {
         const userRes = await internal.get<
             AxiosResponse<ListUserDevicesResponse>
-        >(`/org/${params.orgId}/user-devices`, await authCookieHeader());
+        >(
+            `/org/${params.orgId}/user-devices?${searchParams.toString()}`,
+            await authCookieHeader()
+        );
         const responseData = userRes.data.data;
         userClients = responseData.devices;
         pagination = responseData.pagination;
@@ -97,11 +102,6 @@ export default async function ClientsPage(props: ClientsPageProps) {
 
     const userClientRows: ClientRow[] = userClients.map(mapClientToRow);
 
-    console.log({
-        userClientRows,
-        pagination
-    });
-
     return (
         <>
             <SettingsSectionTitle
@@ -112,6 +112,11 @@ export default async function ClientsPage(props: ClientsPageProps) {
             <UserDevicesTable
                 userClients={userClientRows}
                 orgId={params.orgId}
+                rowCount={pagination.total}
+                pagination={{
+                    pageIndex: pagination.page - 1,
+                    pageSize: pagination.pageSize
+                }}
             />
         </>
     );

src/components/ClientResourcesTable.tsx

@@ -382,7 +382,7 @@ export default function ClientResourcesTable({
                 onPaginationChange={handlePaginationChange}
                 pagination={pagination}
                 rowCount={rowCount}
-                isRefreshing={isRefreshing}
+                isRefreshing={isRefreshing || isFiltering}
                 enableColumnVisibility
                 columnVisibility={{
                     niceId: false,

src/components/SitesTable.tsx

@@ -12,10 +12,10 @@ import {
 } from "@app/components/ui/dropdown-menu";
 import { InfoPopup } from "@app/components/ui/info-popup";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useSortColumn } from "@app/hooks/useSortColumn";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
+import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { parseDataSize } from "@app/lib/dataSize";
 import { build } from "@server/build";
 import { type PaginationState } from "@tanstack/react-table";
 import {
@@ -24,21 +24,19 @@ import {
     ArrowUp10Icon,
     ArrowUpRight,
     ChevronsUpDownIcon,
-    Funnel,
     MoreHorizontal
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { useDebouncedCallback } from "use-debounce";
+import z from "zod";
+import { ColumnFilterButton } from "./ColumnFilterButton";
 import {
     ControlledDataTable,
     type ExtendedColumnDef
 } from "./ui/controlled-data-table";
-import { ColumnFilter } from "./ColumnFilter";
-import { ColumnFilterButton } from "./ColumnFilterButton";
-import z from "zod";
 
 export type SiteRow = {
     id: number;
@@ -71,16 +69,18 @@ export default function SitesTable({
     rowCount
 }: SitesTableProps) {
     const router = useRouter();
-    const searchParams = useSearchParams();
     const pathname = usePathname();
+    const {
+        navigate: filter,
+        isNavigating: isFiltering,
+        searchParams
+    } = useNavigationContext();
 
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);
     const [isRefreshing, startTransition] = useTransition();
     const [isNavigatingToAddPage, startNavigation] = useTransition();
 
-    const [getSortDirection, toggleSorting] = useSortColumn();
-
     const api = createApiClient(useEnvContext());
     const t = useTranslations();
 
@@ -136,9 +136,6 @@ export default function SitesTable({
         });
     }
 
-    const dataInOrder = getSortDirection("megabytesIn");
-    const dataOutOrder = getSortDirection("megabytesOut");
-
     const columns: ExtendedColumnDef<SiteRow>[] = [
         {
             accessorKey: "name",
@@ -212,6 +209,10 @@ export default function SitesTable({
             accessorKey: "mbIn",
             friendlyName: t("dataIn"),
             header: () => {
+                const dataInOrder = getSortDirection(
+                    "megabytesIn",
+                    searchParams
+                );
                 const Icon =
                     dataInOrder === "asc"
                         ? ArrowDown01Icon
@@ -221,21 +222,23 @@ export default function SitesTable({
                 return (
                     <Button
                         variant="ghost"
-                        onClick={() => toggleSorting("megabytesIn")}
+                        onClick={() => toggleSort("megabytesIn")}
                     >
                         {t("dataIn")}
                         <Icon className="ml-2 h-4 w-4" />
                     </Button>
                 );
-            },
+            }
-            sortingFn: (rowA, rowB) =>
-                parseDataSize(rowA.original.mbIn) -
-                parseDataSize(rowB.original.mbIn)
         },
         {
             accessorKey: "mbOut",
             friendlyName: t("dataOut"),
             header: () => {
+                const dataOutOrder = getSortDirection(
+                    "megabytesOut",
+                    searchParams
+                );
+
                 const Icon =
                     dataOutOrder === "asc"
                         ? ArrowDown01Icon
@@ -245,16 +248,13 @@ export default function SitesTable({
                 return (
                     <Button
                         variant="ghost"
-                        onClick={() => toggleSorting("megabytesOut")}
+                        onClick={() => toggleSort("megabytesOut")}
                     >
                         {t("dataOut")}
                         <Icon className="ml-2 h-4 w-4" />
                     </Button>
                 );
-            },
+            }
-            sortingFn: (rowA, rowB) =>
-                parseDataSize(rowA.original.mbOut) -
-                parseDataSize(rowB.original.mbOut)
         },
         {
             accessorKey: "type",
@@ -423,18 +423,28 @@ export default function SitesTable({
         }
     ];
 
+    function toggleSort(column: string) {
+        const newSearch = getNextSortOrder(column, searchParams);
+
+        filter({
+            searchParams: newSearch
+        });
+    }
+
     const handlePaginationChange = (newPage: PaginationState) => {
-        const sp = new URLSearchParams(searchParams);
+        searchParams.set("page", (newPage.pageIndex + 1).toString());
-        sp.set("page", (newPage.pageIndex + 1).toString());
+        searchParams.set("pageSize", newPage.pageSize.toString());
-        sp.set("pageSize", newPage.pageSize.toString());
+        filter({
-        startTransition(() => router.push(`${pathname}?${sp.toString()}`));
+            searchParams
+        });
     };
 
     const handleSearchChange = useDebouncedCallback((query: string) => {
-        const sp = new URLSearchParams(searchParams);
+        searchParams.set("query", query);
-        sp.set("query", query);
+        searchParams.delete("page");
-        sp.delete("page");
+        filter({
-        startTransition(() => router.push(`${pathname}?${sp.toString()}`));
+            searchParams
+        });
     }, 300);
 
     return (
@@ -478,7 +488,7 @@ export default function SitesTable({
                 onSearch={handleSearchChange}
                 addButtonText={t("siteAdd")}
                 onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                isRefreshing={isRefreshing || isFiltering}
                 rowCount={rowCount}
                 columnVisibility={{
                     niceId: false,

src/components/UserDevicesTable.tsx

@@ -2,37 +2,41 @@
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { Button } from "@app/components/ui/button";
-import { DataTable, ExtendedColumnDef } from "@app/components/ui/data-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger
 } from "@app/components/ui/dropdown-menu";
+import { InfoPopup } from "@app/components/ui/info-popup";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
+import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { formatFingerprintInfo } from "@app/lib/formatDeviceFingerprint";
 import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+import { build } from "@server/build";
+import type { PaginationState } from "@tanstack/react-table";
 import {
-    formatFingerprintInfo,
+    ArrowDown01Icon,
-    formatPlatform
-} from "@app/lib/formatDeviceFingerprint";
-import {
     ArrowRight,
-    ArrowUpDown,
+    ArrowUp10Icon,
     ArrowUpRight,
-    MoreHorizontal,
+    ChevronsUpDownIcon,
-    CircleSlash
+    CircleSlash,
+    MoreHorizontal
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition } from "react";
+import { useDebouncedCallback } from "use-debounce";
 import ClientDownloadBanner from "./ClientDownloadBanner";
+import { ColumnFilterButton } from "./ColumnFilterButton";
 import { Badge } from "./ui/badge";
-import { build } from "@server/build";
+import { ControlledDataTable } from "./ui/controlled-data-table";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { InfoPopup } from "@app/components/ui/info-popup";
 
 export type ClientRow = {
     id: number;
@@ -68,9 +72,15 @@ export type ClientRow = {
 type ClientTableProps = {
     userClients: ClientRow[];
     orgId: string;
+    pagination: PaginationState;
+    rowCount: number;
 };
 
-export default function UserDevicesTable({ userClients }: ClientTableProps) {
+export default function UserDevicesTable({
+    userClients,
+    pagination,
+    rowCount
+}: ClientTableProps) {
     const router = useRouter();
     const t = useTranslations();
 
@@ -80,6 +90,11 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
     );
 
     const api = createApiClient(useEnvContext());
+    const {
+        navigate: filter,
+        isNavigating: isFiltering,
+        searchParams
+    } = useNavigationContext();
     const [isRefreshing, startTransition] = useTransition();
 
     const defaultUserColumnVisibility = {
@@ -296,21 +311,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                 accessorKey: "name",
                 enableHiding: false,
                 friendlyName: t("name"),
-                header: ({ column }) => {
+                header: () => <span className="px-3">{t("name")}</span>,
-                    return (
-                        <Button
-                            variant="ghost"
-                            onClick={() =>
-                                column.toggleSorting(
-                                    column.getIsSorted() === "asc"
-                                )
-                            }
-                        >
-                            {t("name")}
-                            <ArrowUpDown className="ml-2 h-4 w-4" />
-                        </Button>
-                    );
-                },
                 cell: ({ row }) => {
                     const r = row.original;
                     const fingerprintInfo = r.fingerprint
@@ -360,40 +361,12 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             {
                 accessorKey: "niceId",
                 friendlyName: t("identifier"),
-                header: ({ column }) => {
+                header: () => <span className="px-3">{t("identifier")}</span>
-                    return (
-                        <Button
-                            variant="ghost"
-                            onClick={() =>
-                                column.toggleSorting(
-                                    column.getIsSorted() === "asc"
-                                )
-                            }
-                        >
-                            {t("identifier")}
-                            <ArrowUpDown className="ml-2 h-4 w-4" />
-                        </Button>
-                    );
-                }
             },
             {
                 accessorKey: "userEmail",
                 friendlyName: t("users"),
-                header: ({ column }) => {
+                header: () => <span className="px-3">{t("users")}</span>,
-                    return (
-                        <Button
-                            variant="ghost"
-                            onClick={() =>
-                                column.toggleSorting(
-                                    column.getIsSorted() === "asc"
-                                )
-                            }
-                        >
-                            {t("users")}
-                            <ArrowUpDown className="ml-2 h-4 w-4" />
-                        </Button>
-                    );
-                },
                 cell: ({ row }) => {
                     const r = row.original;
                     return r.userId ? (
@@ -416,19 +389,30 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             {
                 accessorKey: "online",
                 friendlyName: t("online"),
-                header: ({ column }) => {
+                header: () => {
                     return (
-                        <Button
+                        <ColumnFilterButton
-                            variant="ghost"
+                            options={[
-                            onClick={() =>
+                                {
-                                column.toggleSorting(
+                                    value: "true",
-                                    column.getIsSorted() === "asc"
+                                    label: t("connected")
-                                )
+                                },
+                                {
+                                    value: "false",
+                                    label: t("disconnected")
+                                }
+                            ]}
+                            selectedValue={
+                                searchParams.get("online") ?? undefined
                             }
-                        >
+                            onValueChange={(value) =>
-                            {t("online")}
+                                handleFilterChange("online", value)
-                            <ArrowUpDown className="ml-2 h-4 w-4" />
+                            }
-                        </Button>
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
+                            label={t("online")}
+                            className="p-3"
+                        />
                     );
                 },
                 cell: ({ row }) => {
@@ -453,18 +437,29 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             {
                 accessorKey: "mbIn",
                 friendlyName: t("dataIn"),
-                header: ({ column }) => {
+                header: () => {
+                    const dataInOrder = getSortDirection(
+                        "megabytesIn",
+                        searchParams
+                    );
+
+                    console.log({
+                        dataInOrder,
+                        searchParams: Object.fromEntries(searchParams.entries())
+                    });
+                    const Icon =
+                        dataInOrder === "asc"
+                            ? ArrowDown01Icon
+                            : dataInOrder === "desc"
+                              ? ArrowUp10Icon
+                              : ChevronsUpDownIcon;
                     return (
                         <Button
                             variant="ghost"
-                            onClick={() =>
+                            onClick={() => toggleSort("megabytesIn")}
-                                column.toggleSorting(
-                                    column.getIsSorted() === "asc"
-                                )
-                            }
                         >
                             {t("dataIn")}
-                            <ArrowUpDown className="ml-2 h-4 w-4" />
+                            <Icon className="ml-2 h-4 w-4" />
                         </Button>
                     );
                 }
@@ -472,18 +467,25 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             {
                 accessorKey: "mbOut",
                 friendlyName: t("dataOut"),
-                header: ({ column }) => {
+                header: () => {
+                    const dataOutOrder = getSortDirection(
+                        "megabytesOut",
+                        searchParams
+                    );
+
+                    const Icon =
+                        dataOutOrder === "asc"
+                            ? ArrowDown01Icon
+                            : dataOutOrder === "desc"
+                              ? ArrowUp10Icon
+                              : ChevronsUpDownIcon;
                     return (
                         <Button
                             variant="ghost"
-                            onClick={() =>
+                            onClick={() => toggleSort("megabytesOut")}
-                                column.toggleSorting(
-                                    column.getIsSorted() === "asc"
-                                )
-                            }
                         >
                             {t("dataOut")}
-                            <ArrowUpDown className="ml-2 h-4 w-4" />
+                            <Icon className="ml-2 h-4 w-4" />
                         </Button>
                     );
                 }
@@ -491,21 +493,48 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             {
                 accessorKey: "client",
                 friendlyName: t("agent"),
-                header: ({ column }) => {
+                header: () => (
-                    return (
+                    <ColumnFilterButton
-                        <Button
+                        options={[
-                            variant="ghost"
+                            {
-                            onClick={() =>
+                                value: "macos",
-                                column.toggleSorting(
+                                label: "Pangolin macOS"
-                                    column.getIsSorted() === "asc"
+                            },
-                                )
+                            {
+                                value: "ios",
+                                label: "Pangolin iOS"
+                            },
+                            {
+                                value: "ipados",
+                                label: "Pangolin iPadOS"
+                            },
+                            {
+                                value: "android",
+                                label: "Pangolin Android"
+                            },
+                            {
+                                value: "windows",
+                                label: "Pangolin Windows"
+                            },
+                            {
+                                value: "cli",
+                                label: "Pangolin CLI"
+                            },
+                            {
+                                value: "unknown",
+                                label: t("unknown")
                             }
-                        >
+                        ]}
-                            {t("agent")}
+                        selectedValue={searchParams.get("agent") ?? undefined}
-                            <ArrowUpDown className="ml-2 h-4 w-4" />
+                        onValueChange={(value) =>
-                        </Button>
+                            handleFilterChange("agent", value)
-                    );
+                        }
-                },
+                        searchPlaceholder={t("searchPlaceholder")}
+                        emptyMessage={t("emptySearchOptions")}
+                        label={t("agent")}
+                        className="p-3"
+                    />
+                ),
                 cell: ({ row }) => {
                     const originalRow = row.original;
 
@@ -531,21 +560,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             {
                 accessorKey: "subnet",
                 friendlyName: t("address"),
-                header: ({ column }) => {
+                header: () => <span className="px-3">{t("address")}</span>
-                    return (
-                        <Button
-                            variant="ghost"
-                            onClick={() =>
-                                column.toggleSorting(
-                                    column.getIsSorted() === "asc"
-                                )
-                            }
-                        >
-                            {t("address")}
-                            <ArrowUpDown className="ml-2 h-4 w-4" />
-                        </Button>
-                    );
-                }
             }
         ];
 
@@ -643,7 +658,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
         });
 
         return baseColumns;
-    }, [hasRowsWithoutUserId, t]);
+    }, [hasRowsWithoutUserId, t, getSortDirection, toggleSort]);
 
     const statusFilterOptions = useMemo(() => {
         const allOptions = [
@@ -691,6 +706,53 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
         return ["active", "pending"];
     }, []);
 
+    const [, setCount] = useState(0);
+
+    function handleFilterChange(
+        column: string,
+        value: string | undefined | null | string[]
+    ) {
+        searchParams.delete(column);
+        searchParams.delete("page");
+
+        if (typeof value === "string") {
+            searchParams.set(column, value);
+        } else if (value) {
+            for (const val of value) {
+                searchParams.append(column, val);
+            }
+        }
+
+        filter({
+            searchParams
+        });
+        setCount((c) => c + 1);
+    }
+
+    function toggleSort(column: string) {
+        const newSearch = getNextSortOrder(column, searchParams);
+
+        filter({
+            searchParams: newSearch
+        });
+    }
+
+    const handlePaginationChange = (newPage: PaginationState) => {
+        searchParams.set("page", (newPage.pageIndex + 1).toString());
+        searchParams.set("pageSize", newPage.pageSize.toString());
+        filter({
+            searchParams
+        });
+    };
+
+    const handleSearchChange = useDebouncedCallback((query: string) => {
+        searchParams.set("query", query);
+        searchParams.delete("page");
+        filter({
+            searchParams
+        });
+    }, 300);
+
     return (
         <>
             {selectedClient && !selectedClient.userId && (
@@ -714,67 +776,69 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             )}
             <ClientDownloadBanner />
 
-            <DataTable
+            <ControlledDataTable
                 columns={columns}
-                data={userClients || []}
+                rows={userClients || []}
-                persistPageSize="user-clients"
+                tableId="user-clients"
                 searchPlaceholder={t("resourcesSearch")}
-                searchColumn="name"
                 onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                isRefreshing={isRefreshing || isFiltering}
-                enableColumnVisibility={true}
+                enableColumnVisibility
-                persistColumnVisibility="user-clients"
                 columnVisibility={defaultUserColumnVisibility}
+                onSearch={handleSearchChange}
+                onPaginationChange={handlePaginationChange}
+                pagination={pagination}
+                rowCount={rowCount}
                 stickyLeftColumn="name"
                 stickyRightColumn="actions"
-                filters={[
+                // filters={[
-                    {
+                //     {
-                        id: "status",
+                //         id: "status",
-                        label: t("status") || "Status",
+                //         label: t("status") || "Status",
-                        multiSelect: true,
+                //         multiSelect: true,
-                        displayMode: "calculated",
+                //         displayMode: "calculated",
-                        options: statusFilterOptions,
+                //         options: statusFilterOptions,
-                        filterFn: (
+                //         filterFn: (
-                            row: ClientRow,
+                //             row: ClientRow,
-                            selectedValues: (string | number | boolean)[]
+                //             selectedValues: (string | number | boolean)[]
-                        ) => {
+                //         ) => {
-                            if (selectedValues.length === 0) return true;
+                //             if (selectedValues.length === 0) return true;
-                            const rowArchived = row.archived;
+                //             const rowArchived = row.archived;
-                            const rowBlocked = row.blocked;
+                //             const rowBlocked = row.blocked;
-                            const approvalState = row.approvalState;
+                //             const approvalState = row.approvalState;
-                            const isActive =
+                //             const isActive =
-                                !rowArchived &&
+                //                 !rowArchived &&
-                                !rowBlocked &&
+                //                 !rowBlocked &&
-                                approvalState !== "pending" &&
+                //                 approvalState !== "pending" &&
-                                approvalState !== "denied";
+                //                 approvalState !== "denied";
 
-                            if (selectedValues.includes("active") && isActive)
+                //             if (selectedValues.includes("active") && isActive)
-                                return true;
+                //                 return true;
-                            if (
+                //             if (
-                                selectedValues.includes("pending") &&
+                //                 selectedValues.includes("pending") &&
-                                approvalState === "pending"
+                //                 approvalState === "pending"
-                            )
+                //             )
-                                return true;
+                //                 return true;
-                            if (
+                //             if (
-                                selectedValues.includes("denied") &&
+                //                 selectedValues.includes("denied") &&
-                                approvalState === "denied"
+                //                 approvalState === "denied"
-                            )
+                //             )
-                                return true;
+                //                 return true;
-                            if (
+                //             if (
-                                selectedValues.includes("archived") &&
+                //                 selectedValues.includes("archived") &&
-                                rowArchived
+                //                 rowArchived
-                            )
+                //             )
-                                return true;
+                //                 return true;
-                            if (
+                //             if (
-                                selectedValues.includes("blocked") &&
+                //                 selectedValues.includes("blocked") &&
-                                rowBlocked
+                //                 rowBlocked
-                            )
+                //             )
-                                return true;
+                //                 return true;
-                            return false;
+                //             return false;
-                        },
+                //         },
-                        defaultValues: statusFilterDefaultValues
+                //         defaultValues: statusFilterDefaultValues
-                    }
+                //     }
-                ]}
+                // ]}
             />
         </>
     );

src/hooks/useSortColumn.ts

@@ -1,56 +0,0 @@
-import type { SortOrder } from "@app/lib/types/sort";
-import { useSearchParams, useRouter, usePathname } from "next/navigation";
-import { startTransition } from "react";
-
-export function useSortColumn() {
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-
-    const toggleSorting = (column: string) => {
-        const sp = new URLSearchParams(searchParams);
-
-        let nextDirection: SortOrder = "indeterminate";
-
-        if (sp.get("sort_by") === column) {
-            nextDirection = (sp.get("order") as SortOrder) ?? "indeterminate";
-        }
-
-        switch (nextDirection) {
-            case "indeterminate": {
-                nextDirection = "asc";
-                break;
-            }
-            case "asc": {
-                nextDirection = "desc";
-                break;
-            }
-            default: {
-                nextDirection = "indeterminate";
-                break;
-            }
-        }
-
-        sp.delete("sort_by");
-        sp.delete("order");
-
-        if (nextDirection !== "indeterminate") {
-            sp.set("sort_by", column);
-            sp.set("order", nextDirection);
-        }
-
-        startTransition(() => router.push(`${pathname}?${sp.toString()}`));
-    };
-
-    function getSortDirection(column: string) {
-        let currentDirection: SortOrder = "indeterminate";
-
-        if (searchParams.get("sort_by") === column) {
-            currentDirection =
-                (searchParams.get("order") as SortOrder) ?? "indeterminate";
-        }
-        return currentDirection;
-    }
-
-    return [getSortDirection, toggleSorting] as const;
-}

src/lib/sortColumn.ts

@@ -0,0 +1,52 @@
+import type { SortOrder } from "@app/lib/types/sort";
+
+export function getNextSortOrder(
+    column: string,
+    searchParams: URLSearchParams
+) {
+    const sp = new URLSearchParams(searchParams);
+
+    let nextDirection: SortOrder = "indeterminate";
+
+    if (sp.get("sort_by") === column) {
+        nextDirection = (sp.get("order") as SortOrder) ?? "indeterminate";
+    }
+
+    switch (nextDirection) {
+        case "indeterminate": {
+            nextDirection = "asc";
+            break;
+        }
+        case "asc": {
+            nextDirection = "desc";
+            break;
+        }
+        default: {
+            nextDirection = "indeterminate";
+            break;
+        }
+    }
+
+    sp.delete("sort_by");
+    sp.delete("order");
+
+    if (nextDirection !== "indeterminate") {
+        sp.set("sort_by", column);
+        sp.set("order", nextDirection);
+    }
+
+    return sp;
+}
+
+export function getSortDirection(
+    column: string,
+    searchParams: URLSearchParams
+) {
+    let currentDirection: SortOrder = "indeterminate";
+
+    if (searchParams.get("sort_by") === column) {
+        currentDirection =
+            (searchParams.get("order") as SortOrder) ?? "indeterminate";
+    }
+    return currentDirection;
+}