From fa9a8d903e286dc4b1bce120eba7ccf8bc0597cd Mon Sep 17 00:00:00 2001
From: Romain Dorgueil <romain@makersquad.fr>
Date: Thu, 21 Mar 2024 17:09:59 +0100
Subject: [PATCH] feat: refactor title to add right floating things, move
paginator there
---
frontend/src/Components/Page/PageTitle.tsx | 11 +++++-
.../Transactions/TransactionListPage.tsx | 37 ++++++++++---------
2 files changed, 30 insertions(+), 18 deletions(-)
diff --git a/frontend/src/Components/Page/PageTitle.tsx b/frontend/src/Components/Page/PageTitle.tsx
index 4de1c91b..a251bfb5 100644
--- 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
index 6869b486..fdec419e 100644
--- 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"