feat: refactor paginator for smaller components

frontend/src/Pages/Transactions/Components/OptionalPaginator.tsx

@@ -0,0 +1,25 @@
+import { Paginator } from "mkui/Components/Pagination"
+
+export function OptionalPaginator({
+  current,
+  setPage,
+  total,
+  pages,
+  perPage,
+}: {
+  current: number
+  setPage: (page: number) => void
+  total?: number
+  pages?: number
+  perPage?: number
+}) {
+  const paginatorProps = {
+    current,
+    setPage,
+    total: total ?? undefined,
+    pages: pages ?? undefined,
+    perPage: perPage ?? undefined,
+  }
+
+  return (paginatorProps.total || 0) > 0 ? <Paginator {...paginatorProps} showSummary={false} /> : null
+}

frontend/src/Pages/Transactions/TransactionListPage.tsx

@@ -1,81 +1,13 @@
-import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from "@heroicons/react/16/solid"
 import { useEffect, useState } from "react"
-import { QueryObserverSuccessResult } from "react-query/types/core/types"
 
 import { Page } from "Components/Page"
 import { PageTitle } from "Components/Page/PageTitle.tsx"
 import { OnQuerySuccess } from "Components/Utilities/OnQuerySuccess"
-import { ItemList } from "Domain/Api/Types"
-import { useTransactionsDetailQuery, useTransactionsListQuery } from "Domain/Transactions"
-import { Transaction } from "Models/Transaction"
+import { useTransactionsListQuery } from "Domain/Transactions"
 import { Filters } from "Types/filters"
-import { Paginator } from "mkui/Components/Pagination"
 
-import { TransactionDataTable } from "./Components/List"
-import { FiltersSidebar } from "./Containers"
-import { TransactionDetail } from "./Containers/Detail"
-
-function TransactionListPageOnQuerySuccess({
-  query,
-  filters,
-  setFilters,
-  page,
-  setPage,
-}: {
-  query: QueryObserverSuccessResult<ItemList<Transaction> & { total: number; pages: number; perPage: number }>
-  filters: Filters
-  setFilters: (filters: Filters) => void
-  page: number
-  setPage: (page: number) => void
-}) {
-  const [selected, setSelected] = useState<Transaction | null>(null)
-  const hasSelection = selected && selected.id
-
-  const [isFiltersOpen, setIsFiltersOpen] = useState(true)
-
-  const detailQuery = useTransactionsDetailQuery(selected?.id)
-  return (
-    <div className="flex w-full items-start gap-x-8 relative">
-      {isFiltersOpen ? (
-        <aside className="sticky top-8 hidden w-1/5 min-w-56 max-w-96 shrink-0 lg:block">
-          <div className="text-right">
-            <button onClick={() => setIsFiltersOpen(false)} className="text-gray-400 mx-1 font-medium text-xs">
-              <ChevronDoubleLeftIcon className="h-3 w-3 inline-block" /> hide
-            </button>
-          </div>
-          <FiltersSidebar filters={filters} setFilters={setFilters} />
-        </aside>
-      ) : (
-        <button onClick={() => setIsFiltersOpen(true)} className="text-gray-400 mx-1 font-medium text-xs">
-          <ChevronDoubleRightIcon className="h-3 w-3 inline-block" />
-          <div className="w-4">
-            <div className="rotate-90">filters</div>
-          </div>
-        </button>
-      )}
-
-      <main className="flex-1 overflow-auto">
-        <TransactionDataTable
-          transactions={query.data.items}
-          onSelectionChange={(newSelected) =>
-            newSelected && newSelected.id && (!hasSelection || selected.id != newSelected.id)
-              ? setSelected(newSelected)
-              : setSelected(null)
-          }
-          selected={hasSelection ? selected : undefined}
-        />
-      </main>
-
-      {hasSelection ? (
-        <aside className="sticky top-8 w-2/5 min-w-96 shrink-0 block">
-          <OnQuerySuccess query={detailQuery}>
-            {(query) => <TransactionDetail transaction={query.data} />}
-          </OnQuerySuccess>
-        </aside>
-      ) : null}
-    </div>
-  )
-}
+import { OptionalPaginator } from "./Components/OptionalPaginator.tsx"
+import { TransactionListPageOnQuerySuccess } from "./TransactionListPageOnQuerySuccess.tsx"
 
 export function TransactionListPage() {
   const [filters, setFilters] = useState<Filters>({})
@@ -89,37 +21,24 @@ export function TransactionListPage() {
     }
   }, [page, query])
 
-  let paginator = null
-  if (query.isSuccess) {
-    const paginatorProps = {
-      current: page,
-      setPage: setPage,
-      total: query.isSuccess ? query.data.total ?? undefined : undefined,
-      pages: query.isSuccess ? query.data.pages ?? undefined : undefined,
-      perPage: query.isSuccess ? query.data.perPage ?? undefined : undefined,
-    }
-
-    paginator = (paginatorProps.total || 0) > 0 ? <Paginator {...paginatorProps} showSummary={false} /> : null
-  }
-
   return (
     <Page
       title={
         <PageTitle title="Transactions" description="Explore transactions that went through the proxy">
-          {paginator}
+          {query.isSuccess ? (
+            <OptionalPaginator
+              current={page}
+              setPage={setPage}
+              total={query.data.total}
+              pages={query.data.pages}
+              perPage={query.data.perPage}
+            />
+          ) : null}
         </PageTitle>
       }
     >
       <OnQuerySuccess query={query}>
-        {(query) => (
-          <TransactionListPageOnQuerySuccess
-            query={query}
-            filters={filters}
-            setFilters={setFilters}
-            page={page}
-            setPage={setPage}
-          />
-        )}
+        {(query) => <TransactionListPageOnQuerySuccess query={query} filters={filters} setFilters={setFilters} />}
       </OnQuerySuccess>
     </Page>
   )

frontend/src/Pages/Transactions/TransactionListPageOnQuerySuccess.tsx

@@ -0,0 +1,71 @@
+import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from "@heroicons/react/16/solid"
+import { useState } from "react"
+import { QueryObserverSuccessResult } from "react-query/types/core/types"
+
+import { OnQuerySuccess } from "Components/Utilities/OnQuerySuccess.tsx"
+import { ItemList } from "Domain/Api/Types"
+import { useTransactionsDetailQuery } from "Domain/Transactions"
+import { Transaction } from "Models/Transaction"
+import { Filters } from "Types/filters"
+
+import { TransactionDataTable } from "./Components/List"
+import { FiltersSidebar } from "./Containers"
+import { TransactionDetail } from "./Containers/Detail"
+
+export function TransactionListPageOnQuerySuccess({
+  query,
+  filters,
+  setFilters,
+}: {
+  query: QueryObserverSuccessResult<ItemList<Transaction> & { total: number; pages: number; perPage: number }>
+  filters: Filters
+  setFilters: (filters: Filters) => void
+}) {
+  const [selected, setSelected] = useState<Transaction | null>(null)
+  const hasSelection = selected && selected.id
+
+  const [isFiltersOpen, setIsFiltersOpen] = useState(true)
+
+  const detailQuery = useTransactionsDetailQuery(selected?.id)
+  return (
+    <div className="flex w-full items-start gap-x-8 relative">
+      {isFiltersOpen ? (
+        <aside className="sticky top-8 hidden w-1/5 min-w-56 max-w-96 shrink-0 lg:block">
+          <div className="text-right">
+            <button onClick={() => setIsFiltersOpen(false)} className="text-gray-400 mx-1 font-medium text-xs">
+              <ChevronDoubleLeftIcon className="h-3 w-3 inline-block" /> hide
+            </button>
+          </div>
+          <FiltersSidebar filters={filters} setFilters={setFilters} />
+        </aside>
+      ) : (
+        <button onClick={() => setIsFiltersOpen(true)} className="text-gray-400 mx-1 font-medium text-xs">
+          <ChevronDoubleRightIcon className="h-3 w-3 inline-block" />
+          <div className="w-4">
+            <div className="rotate-90">filters</div>
+          </div>
+        </button>
+      )}
+
+      <main className="flex-1 overflow-auto">
+        <TransactionDataTable
+          transactions={query.data.items}
+          onSelectionChange={(newSelected) =>
+            newSelected && newSelected.id && (!hasSelection || selected.id != newSelected.id)
+              ? setSelected(newSelected)
+              : setSelected(null)
+          }
+          selected={hasSelection ? selected : undefined}
+        />
+      </main>
+
+      {hasSelection ? (
+        <aside className="sticky top-8 w-2/5 min-w-96 shrink-0 block">
+          <OnQuerySuccess query={detailQuery}>
+            {(query) => <TransactionDetail transaction={query.data} />}
+          </OnQuerySuccess>
+        </aside>
+      ) : null}
+    </div>
+  )
+}

frontend/src/Pages/Transactions/__snapshots__/TransactionListPage.test.tsx.snap

@@ -6,11 +6,19 @@ exports[`renders well when the query is successful 1`] = `
     <div
       class="mt-4 mb-4"
     >
+      <div
+        class="float-end"
+      />
       <h1
         class="css-9lrcch"
       >
         Transactions
       </h1>
+      <p
+        class="css-11bp3eh"
+      >
+        Explore transactions that went through the proxy
+      </p>
     </div>
     <div
       class="mt-4"