feat: refactor title to add right floating things, move paginator there

msqd · Mar 21, 2024 · fa9a8d9 · fa9a8d9
1 parent f8ad886
commit fa9a8d9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/frontend/src/Components/Page/PageTitle.tsx b/frontend/src/Components/Page/PageTitle.tsx
@@ -1,10 +1,19 @@
+import { ReactNode } from "react"
+
 import { H1, P } from "mkui/Components/Typography"
 
-export function PageTitle({ description, title }: { title?: string; description?: string }) {
+interface PageTitleProps {
+  title?: string
+  description?: string
+  children?: ReactNode
+}
+
+export function PageTitle({ description, title, children }: PageTitleProps) {
   return (
     <>
       {title ? (
         <div className="mt-4 mb-4">
+          {children ? <div className="float-end">{children}</div> : null}
           <H1>{title}</H1>
           {description ? <P>{description}</P> : null}
         </div>

diff --git a/frontend/src/Pages/Transactions/TransactionListPage.tsx b/frontend/src/Pages/Transactions/TransactionListPage.tsx
@@ -34,13 +34,6 @@ function TransactionListPageOnQuerySuccess({
   const [isFiltersOpen, setIsFiltersOpen] = useState(true)
 
   const detailQuery = useTransactionsDetailQuery(selected?.id)
-  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,
-  }
   return (
     <div className="flex w-full items-start gap-x-8 relative">
       {isFiltersOpen ? (
@@ -71,13 +64,6 @@ function TransactionListPageOnQuerySuccess({
           }
           selected={hasSelection ? selected : undefined}
         />
-
-        {(paginatorProps.total || 0) > 0 ? (
-          <Paginator {...paginatorProps} showSummary={false} className={hasSelection ? "invisible" : ""} />
-        ) : null}
-        {(paginatorProps.total || 0) > 0 ? (
-          <Paginator {...paginatorProps} className={hasSelection ? "invisible" : ""} />
-        ) : null}
       </main>
 
       {hasSelection ? (
@@ -103,8 +89,27 @@ 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" />}>
+    <Page
+      title={
+        <PageTitle title="Transactions" description="Explore transactions that went through the proxy">
+          {paginator}
+        </PageTitle>
+      }
+    >
       <OnQuerySuccess query={query}>
         {(query) => (
           <TransactionListPageOnQuerySuccess
@@ -119,5 +124,3 @@ export function TransactionListPage() {
     </Page>
   )
 }
-
-//title="Transactions" description="Explore transactions that went through the proxy"