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
|
|
@ -6,15 +6,15 @@ import { Permission } from "../../auth-context";
|
|||
import { tradesApi } from "../../api";
|
||||
import { Header } from "../../components/Header";
|
||||
import { SatsDisplay } from "../../components/SatsDisplay";
|
||||
import { StatusBadge } from "../../components/StatusBadge";
|
||||
import { useRequireAuth } from "../../hooks/useRequireAuth";
|
||||
import { useAsyncData } from "../../hooks/useAsyncData";
|
||||
import { formatDateTime } from "../../utils/date";
|
||||
import { formatEur, getTradeStatusDisplay } from "../../utils/exchange";
|
||||
import { formatEur } from "../../utils/exchange";
|
||||
import {
|
||||
layoutStyles,
|
||||
typographyStyles,
|
||||
bannerStyles,
|
||||
badgeStyles,
|
||||
buttonStyles,
|
||||
tradeCardStyles,
|
||||
} from "../../styles/shared";
|
||||
|
|
@ -78,7 +78,6 @@ export default function TradeDetailPage() {
|
|||
);
|
||||
}
|
||||
|
||||
const status = getTradeStatusDisplay(trade.status);
|
||||
const isBuy = trade.direction === "buy";
|
||||
|
||||
return (
|
||||
|
|
@ -98,15 +97,7 @@ export default function TradeDetailPage() {
|
|||
<div style={styles.detailGrid}>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Status:</span>
|
||||
<span
|
||||
style={{
|
||||
...badgeStyles.badge,
|
||||
background: status.bgColor,
|
||||
color: status.textColor,
|
||||
}}
|
||||
>
|
||||
{status.text}
|
||||
</span>
|
||||
<StatusBadge tradeStatus={trade.status} />
|
||||
</div>
|
||||
<div style={styles.detailRow}>
|
||||
<span style={styles.detailLabel}>Time:</span>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,14 @@ import { Permission } from "../auth-context";
|
|||
import { tradesApi } from "../api";
|
||||
import { PageLayout } from "../components/PageLayout";
|
||||
import { SatsDisplay } from "../components/SatsDisplay";
|
||||
import { StatusBadge } from "../components/StatusBadge";
|
||||
import { EmptyState } from "../components/EmptyState";
|
||||
import { useRequireAuth } from "../hooks/useRequireAuth";
|
||||
import { useAsyncData } from "../hooks/useAsyncData";
|
||||
import { useMutation } from "../hooks/useMutation";
|
||||
import { formatDateTime } from "../utils/date";
|
||||
import { formatEur, getTradeStatusDisplay } from "../utils/exchange";
|
||||
import { typographyStyles, badgeStyles, buttonStyles, tradeCardStyles } from "../styles/shared";
|
||||
import { formatEur } from "../utils/exchange";
|
||||
import { typographyStyles, tradeCardStyles } from "../styles/shared";
|
||||
|
||||
export default function TradesPage() {
|
||||
const router = useRouter();
|
||||
|
|
@ -71,14 +73,16 @@ export default function TradesPage() {
|
|||
<p style={typographyStyles.pageSubtitle}>View and manage your Bitcoin trades</p>
|
||||
|
||||
{isLoadingTrades ? (
|
||||
<div style={tradeCardStyles.emptyState}>Loading trades...</div>
|
||||
<EmptyState message="Loading trades..." isLoading={true} />
|
||||
) : trades.length === 0 ? (
|
||||
<div style={tradeCardStyles.emptyState}>
|
||||
<p>You don't have any trades yet.</p>
|
||||
<a href="/exchange" style={styles.emptyStateLink}>
|
||||
Start trading
|
||||
</a>
|
||||
</div>
|
||||
<EmptyState
|
||||
message="You don't have any trades yet."
|
||||
action={
|
||||
<a href="/exchange" style={styles.emptyStateLink}>
|
||||
Start trading
|
||||
</a>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{/* Upcoming Trades */}
|
||||
|
|
@ -87,7 +91,6 @@ export default function TradesPage() {
|
|||
<h2 style={styles.sectionTitle}>Upcoming ({upcomingTrades.length})</h2>
|
||||
<div style={tradeCardStyles.tradeList}>
|
||||
{upcomingTrades.map((trade) => {
|
||||
const status = getTradeStatusDisplay(trade.status);
|
||||
const isBuy = trade.direction === "buy";
|
||||
return (
|
||||
<div key={trade.id} style={tradeCardStyles.tradeCard}>
|
||||
|
|
@ -137,55 +140,21 @@ export default function TradesPage() {
|
|||
/BTC
|
||||
</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>
|
||||
|
||||
<div style={tradeCardStyles.buttonGroup}>
|
||||
{trade.status === "booked" && (
|
||||
<>
|
||||
{confirmCancelId === trade.public_id ? (
|
||||
<>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleCancel(trade.public_id);
|
||||
}}
|
||||
disabled={cancellingId === trade.public_id}
|
||||
style={styles.confirmButton}
|
||||
>
|
||||
{cancellingId === trade.public_id ? "..." : "Confirm"}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setConfirmCancelId(null);
|
||||
}}
|
||||
style={buttonStyles.secondaryButton}
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setConfirmCancelId(trade.public_id);
|
||||
}}
|
||||
style={buttonStyles.secondaryButton}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
<ConfirmationButton
|
||||
isConfirming={confirmCancelId === trade.public_id}
|
||||
onConfirm={() => handleCancel(trade.public_id)}
|
||||
onCancel={() => setConfirmCancelId(null)}
|
||||
onActionClick={() => setConfirmCancelId(trade.public_id)}
|
||||
actionLabel="Cancel"
|
||||
isLoading={cancellingId === trade.public_id}
|
||||
confirmVariant="danger"
|
||||
confirmButtonStyle={styles.confirmButton}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
|
|
@ -213,7 +182,6 @@ export default function TradesPage() {
|
|||
</h2>
|
||||
<div style={tradeCardStyles.tradeList}>
|
||||
{pastOrFinalTrades.map((trade) => {
|
||||
const status = getTradeStatusDisplay(trade.status);
|
||||
const isBuy = trade.direction === "buy";
|
||||
return (
|
||||
<div
|
||||
|
|
@ -256,15 +224,7 @@ export default function TradesPage() {
|
|||
</span>
|
||||
</div>
|
||||
<div style={tradeCardStyles.buttonGroup}>
|
||||
<span
|
||||
style={{
|
||||
...badgeStyles.badge,
|
||||
background: status.bgColor,
|
||||
color: status.textColor,
|
||||
}}
|
||||
>
|
||||
{status.text}
|
||||
</span>
|
||||
<StatusBadge tradeStatus={trade.status} />
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue