Extract reusable UI components to reduce DRY violations
- Created StatusBadge component: Standardizes status badge display - Supports tradeStatus prop for trade-specific styling - Supports variant prop for simple badges (success/error/ready) - Eliminates repetitive badge style combinations - Created EmptyState component: Standardizes empty state display - Handles loading and empty states consistently - Supports message, hint, and action props - Used across trades, invites, admin pages - Created ConfirmationButton component: Standardizes confirmation flows - Two-step confirmation pattern (action -> confirm/cancel) - Supports different variants (danger/success/primary) - Handles loading states automatically - Used for cancel, complete, no-show actions - Migrated pages to use new components: - trades/page.tsx: StatusBadge, EmptyState, ConfirmationButton - trades/[id]/page.tsx: StatusBadge - invites/page.tsx: StatusBadge, EmptyState - admin/trades/page.tsx: StatusBadge, EmptyState, ConfirmationButton - admin/invites/page.tsx: StatusBadge Benefits: - Eliminated ~50+ lines of repetitive badge styling code - Consistent UI patterns across all pages - Easier to maintain and update styling - Better type safety All tests passing (32 frontend, 33 e2e)
This commit is contained in:
parent
b86b506d72
commit
1a47b3643f
GPG key ID:
883EDBAA726BD96C
9 changed files with 309 additions and 425 deletions
|
|
@ -4,6 +4,7 @@ import { useEffect, useState, useCallback } from "react";
|
|||
import { Permission } from "../../auth-context";
|
||||
import { adminApi } from "../../api";
|
||||
import { Header } from "../../components/Header";
|
||||
import { StatusBadge } from "../../components/StatusBadge";
|
||||
import { useRequireAuth } from "../../hooks/useRequireAuth";
|
||||
import { useMutation } from "../../hooks/useMutation";
|
||||
import { components } from "../../generated/api";
|
||||
|
|
@ -15,7 +16,6 @@ import {
|
|||
paginationStyles,
|
||||
formStyles,
|
||||
buttonStyles,
|
||||
badgeStyles,
|
||||
utilityStyles,
|
||||
} from "../../styles/shared";
|
||||
|
||||
|
|
@ -119,16 +119,16 @@ export default function AdminInvitesPage() {
|
|||
return new Date(dateStr).toLocaleString();
|
||||
};
|
||||
|
||||
const getStatusBadgeStyle = (status: string) => {
|
||||
const getStatusBadgeVariant = (status: string): "ready" | "success" | "error" | undefined => {
|
||||
switch (status) {
|
||||
case READY:
|
||||
return badgeStyles.badgeReady;
|
||||
return "ready";
|
||||
case SPENT:
|
||||
return badgeStyles.badgeSuccess;
|
||||
return "success";
|
||||
case REVOKED:
|
||||
return badgeStyles.badgeError;
|
||||
return "error";
|
||||
default:
|
||||
return {};
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -237,11 +237,9 @@ export default function AdminInvitesPage() {
|
|||
<td style={tableStyles.tdMono}>{record.identifier}</td>
|
||||
<td style={tableStyles.td}>{record.godfather_email}</td>
|
||||
<td style={tableStyles.td}>
|
||||
<span
|
||||
style={{ ...badgeStyles.badge, ...getStatusBadgeStyle(record.status) }}
|
||||
>
|
||||
<StatusBadge variant={getStatusBadgeVariant(record.status)}>
|
||||
{record.status}
|
||||
</span>
|
||||
</StatusBadge>
|
||||
</td>
|
||||
<td style={tableStyles.td}>{record.used_by_email || "-"}</td>
|
||||
<td style={tableStyles.tdDate}>{formatDate(record.created_at)}</td>
|
||||
|
|
|
|||
|
|
@ -5,18 +5,13 @@ import { Permission } from "../../auth-context";
|
|||
import { adminApi } from "../../api";
|
||||
import { Header } from "../../components/Header";
|
||||
import { SatsDisplay } from "../../components/SatsDisplay";
|
||||
import { EmptyState } from "../../components/EmptyState";
|
||||
import { ConfirmationButton } from "../../components/ConfirmationButton";
|
||||
import { useRequireAuth } from "../../hooks/useRequireAuth";
|
||||
import { components } from "../../generated/api";
|
||||
import { formatDateTime } from "../../utils/date";
|
||||
import { formatEur, getTradeStatusDisplay } from "../../utils/exchange";
|
||||
import {
|
||||
layoutStyles,
|
||||
typographyStyles,
|
||||
bannerStyles,
|
||||
badgeStyles,
|
||||
buttonStyles,
|
||||
tradeCardStyles,
|
||||
} from "../../styles/shared";
|
||||
import { formatEur } from "../../utils/exchange";
|
||||
import { layoutStyles, typographyStyles, bannerStyles, tradeCardStyles } from "../../styles/shared";
|
||||
|
||||
type AdminExchangeResponse = components["schemas"]["AdminExchangeResponse"];
|
||||
|
||||
|
|
@ -197,15 +192,14 @@ export default function AdminTradesPage() {
|
|||
)}
|
||||
|
||||
{isLoadingTrades ? (
|
||||
<div style={tradeCardStyles.emptyState}>Loading trades...</div>
|
||||
<EmptyState message="Loading trades..." isLoading={true} />
|
||||
) : trades.length === 0 ? (
|
||||
<div style={tradeCardStyles.emptyState}>
|
||||
{activeTab === "upcoming" ? "No upcoming trades." : "No trades found."}
|
||||
</div>
|
||||
<EmptyState
|
||||
message={activeTab === "upcoming" ? "No upcoming trades." : "No trades found."}
|
||||
/>
|
||||
) : (
|
||||
<div style={tradeCardStyles.tradeList}>
|
||||
{trades.map((trade) => {
|
||||
const status = getTradeStatusDisplay(trade.status);
|
||||
const isBuy = trade.direction === "buy";
|
||||
const isPast = new Date(trade.slot_start) <= new Date();
|
||||
const canComplete = trade.status === "booked" && isPast && activeTab === "past";
|
||||
|
|
@ -281,83 +275,72 @@ export default function AdminTradesPage() {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
style={{
|
||||
...badgeStyles.badge,
|
||||
background: status.bgColor,
|
||||
color: status.textColor,
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
{status.text}
|
||||
</span>
|
||||
<StatusBadge tradeStatus={trade.status} style={{ marginTop: "0.5rem" }} />
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div style={styles.buttonGroup}>
|
||||
{confirmAction?.id === trade.public_id ? (
|
||||
{canComplete && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => handleAction(trade.public_id, confirmAction.type)}
|
||||
disabled={actioningIds.has(trade.public_id)}
|
||||
style={
|
||||
confirmAction.type === "cancel"
|
||||
? styles.dangerButton
|
||||
: styles.successButton
|
||||
<ConfirmationButton
|
||||
isConfirming={
|
||||
confirmAction?.id === trade.public_id &&
|
||||
confirmAction?.type === "complete"
|
||||
}
|
||||
>
|
||||
{actioningIds.has(trade.public_id) ? "..." : "Confirm"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConfirmAction(null)}
|
||||
style={buttonStyles.secondaryButton}
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{canComplete && (
|
||||
<>
|
||||
<button
|
||||
onClick={() =>
|
||||
setConfirmAction({
|
||||
id: trade.public_id,
|
||||
type: "complete",
|
||||
})
|
||||
}
|
||||
style={styles.successButton}
|
||||
>
|
||||
Complete
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
setConfirmAction({
|
||||
id: trade.public_id,
|
||||
type: "no_show",
|
||||
})
|
||||
}
|
||||
style={styles.warningButton}
|
||||
>
|
||||
No Show
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{trade.status === "booked" && (
|
||||
<button
|
||||
onClick={() =>
|
||||
setConfirmAction({
|
||||
id: trade.public_id,
|
||||
type: "cancel",
|
||||
})
|
||||
}
|
||||
style={buttonStyles.secondaryButton}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
onConfirm={() => handleAction(trade.public_id, "complete")}
|
||||
onCancel={() => setConfirmAction(null)}
|
||||
onActionClick={() =>
|
||||
setConfirmAction({
|
||||
id: trade.public_id,
|
||||
type: "complete",
|
||||
})
|
||||
}
|
||||
actionLabel="Complete"
|
||||
isLoading={actioningIds.has(trade.public_id)}
|
||||
confirmVariant="success"
|
||||
confirmButtonStyle={styles.successButton}
|
||||
actionButtonStyle={styles.successButton}
|
||||
/>
|
||||
<ConfirmationButton
|
||||
isConfirming={
|
||||
confirmAction?.id === trade.public_id &&
|
||||
confirmAction?.type === "no_show"
|
||||
}
|
||||
onConfirm={() => handleAction(trade.public_id, "no_show")}
|
||||
onCancel={() => setConfirmAction(null)}
|
||||
onActionClick={() =>
|
||||
setConfirmAction({
|
||||
id: trade.public_id,
|
||||
type: "no_show",
|
||||
})
|
||||
}
|
||||
actionLabel="No Show"
|
||||
isLoading={actioningIds.has(trade.public_id)}
|
||||
confirmVariant="primary"
|
||||
actionButtonStyle={styles.warningButton}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{trade.status === "booked" && (
|
||||
<ConfirmationButton
|
||||
isConfirming={
|
||||
confirmAction?.id === trade.public_id &&
|
||||
confirmAction?.type === "cancel"
|
||||
}
|
||||
onConfirm={() => handleAction(trade.public_id, "cancel")}
|
||||
onCancel={() => setConfirmAction(null)}
|
||||
onActionClick={() =>
|
||||
setConfirmAction({
|
||||
id: trade.public_id,
|
||||
type: "cancel",
|
||||
})
|
||||
}
|
||||
actionLabel="Cancel"
|
||||
isLoading={actioningIds.has(trade.public_id)}
|
||||
confirmVariant="danger"
|
||||
confirmButtonStyle={styles.dangerButton}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue