Use tanstack/query for logs and accounts pagination. Remove searchParam manipulation from Table component.

Author: ignatz

trailbase-assets/js/admin/src/components/FilterBar.tsx

@@ -9,7 +9,9 @@ export function FilterBar(props: {
   example?: JSX.Element;
 }) {
   let ref: HTMLInputElement | undefined;
-  const onSubmit = () => {
+  const onSubmit = (ev: SubmitEvent) => {
+    ev.preventDefault();
+
     const value = ref?.value;
     console.debug("set filter: ", value);
     if (value !== undefined) {

trailbase-assets/js/admin/src/components/IndexPage.tsx

@@ -1,4 +1,5 @@
-import { createResource, For } from "solid-js";
+import { For } from "solid-js";
+import { useQuery } from "@tanstack/solid-query";
 import type { IconTypes } from "solid-icons";
 import {
   TbDatabase,
@@ -131,59 +132,62 @@ function FactCard(props: { title: string; content: string; href?: string }) {
   );
 }
 
-export function IndexPage() {
-  const [fetchResult, { refetch: _ }] = createResource(
-    `
+async function fetchDashboardData(): Promise<Data> {
+  const sql = `
     SELECT
       page_count * page_size, num_tables, num_views, num_users
     FROM
       pragma_page_count AS page_count,
       pragma_page_size AS page_size,
       (SELECT COUNT(*) AS num_tables FROM sqlite_master WHERE type = 'table'),
       (SELECT COUNT(*) AS num_views FROM sqlite_master WHERE type = 'view'),
-      (SELECT COUNT(*) AS num_users FROM _user);
-  `,
-    async (sql) => {
-      const response = await executeSql(sql);
-      const error = response.error;
-      if (error) {
-        throw Error(JSON.stringify(error));
-      }
-
-      const data = response.data;
-      if (!data || data.rows.length < 1) {
-        throw Error(`Missing data: ${data}`);
-      }
-      const row = data.rows[0];
-      return {
-        dbSize: row[0] as number,
-        numTables: row[1] as number,
-        numViews: row[2] as number,
-        numUsers: row[3] as number,
-      } as Data;
-    },
-  );
+      (SELECT COUNT(*) AS num_users FROM _user);`;
+
+  const response = await executeSql(sql);
+  const error = response.error;
+  if (error) {
+    throw Error(JSON.stringify(error));
+  }
+
+  const data = response.data;
+  if (!data || data.rows.length < 1) {
+    throw Error(`Missing data: ${data}`);
+  }
+  const row = data.rows[0];
+  return {
+    dbSize: row[0] as number,
+    numTables: row[1] as number,
+    numViews: row[2] as number,
+    numUsers: row[3] as number,
+  } as Data;
+}
+
+export function IndexPage() {
+  const dashboardFetch = useQuery(() => ({
+    queryKey: ["dashboard"],
+    queryFn: fetchDashboardData,
+  }));
 
   return (
     <div class="h-dvh overflow-y-auto">
       <Header title="TrailBase" />
 
       <div class="prose m-4 flex grow flex-col gap-4">
-        {fetchResult.state === "ready" && (
+        {dashboardFetch.data && (
           <div class="flex grow gap-4">
             <FactCard
               title="Users"
-              content={`${fetchResult().numUsers}`}
+              content={`${dashboardFetch.data!.numUsers}`}
               href={`${BASE}/auth`}
             />
             <FactCard
               title="Tables & Views"
-              content={`${fetchResult().numTables + fetchResult().numViews}`}
+              content={`${dashboardFetch.data!.numTables + dashboardFetch.data!.numViews}`}
               href={`${BASE}/table`}
             />
             <FactCard
               title="Size"
-              content={`${(fetchResult().dbSize / 1024 / 1024).toPrecision(2)} MB`}
+              content={`${(dashboardFetch.data!.dbSize / 1024 / 1024).toPrecision(2)} MB`}
             />
           </div>
         )}

trailbase-assets/js/admin/src/components/Table.tsx

@@ -1,14 +1,12 @@
 import {
   For,
   Show,
-  createEffect,
   createMemo,
   createSignal,
   splitProps,
   type Accessor,
 } from "solid-js";
 import { createWritableMemo } from "@solid-primitives/memo";
-import { useSearchParams } from "@solidjs/router";
 import {
   flexRender,
   createSolidTable,
@@ -40,11 +38,6 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { createWindowWidth } from "@/components/SplitView";
 
-type SearchParams = {
-  pageIndex: string;
-  pageSize: string;
-};
-
 export function safeParseInt(v: string | undefined): number | undefined {
   if (v !== undefined) {
     try {
@@ -74,7 +67,7 @@ type Props<TData, TValue> = {
   data: Accessor<TData[] | undefined>;
 
   rowCount?: number;
-  initialPagination?: PaginationState;
+  pagination?: PaginationState;
   onPaginationChange?: OnChangeFn<PaginationState>;
 
   onRowSelection?: (idx: number, row: TData, value: boolean) => void;
@@ -85,36 +78,19 @@ export function DataTable<TData, TValue>(props: Props<TData, TValue>) {
   const [local] = splitProps(props, ["columns", "data"]);
   const [rowSelection, setRowSelection] = createSignal({});
 
-  const [searchParams, setSearchParams] = useSearchParams<SearchParams>();
   const paginationEnabled = () => props.onPaginationChange !== undefined;
-
-  function initPaginationState(): PaginationState {
-    return {
-      pageIndex:
-        safeParseInt(searchParams.pageIndex) ??
-        props.initialPagination?.pageIndex ??
-        0,
-      pageSize:
-        safeParseInt(searchParams.pageSize) ??
-        props.initialPagination?.pageSize ??
-        20,
-    };
-  }
-
   const [paginationState, setPaginationState] =
     createWritableMemo<PaginationState>(() => {
       // Whenever column definitions change, reset pagination state.
       //
-      // FIXME: column definition is an insufficient proxy, we should also reset
-      // when switching between tables/views with matching schemas. Maybe we
-      // should just inject a Signal<PaginationState>
+      // FIXME: We should probably just not use a memo and and receive columns/data by value to rebuild instead.
       const _c = props.columns();
 
-      return initPaginationState();
+      return {
+        pageIndex: props.pagination?.pageIndex ?? 0,
+        pageSize: props.pagination?.pageSize ?? 20,
+      };
     });
-  createEffect(() => {
-    setSearchParams({ ...paginationState() });
-  });
 
   const columns = createMemo(() => {
     const onRowSelection = props.onRowSelection;
@@ -409,6 +385,9 @@ function PaginationControl<TData>(props: {
               />
             </svg>
           </Button>
+
+          {/*
+            // Doesn't work for cursors.
           <Button
             aria-label="Go to last page"
             variant="outline"
@@ -433,6 +412,7 @@ function PaginationControl<TData>(props: {
               />
             </svg>
           </Button>
+          */}
         </div>
 
         <div class="flex items-center justify-center whitespace-nowrap text-sm font-medium">