Refactor frontend: Add reusable hooks and components
- Created useAsyncData hook: Eliminates repetitive data fetching boilerplate - Handles loading, error, and data state automatically - Supports enabled/disabled fetching - Provides refetch function - Created PageLayout component: Standardizes page structure - Handles loading state, authorization checks, header, error display - Reduces ~10 lines of boilerplate per page - Created useMutation hook: Simplifies action handling - Manages loading state and errors for mutations - Supports success/error callbacks - Used for cancel, create, revoke actions - Created ErrorDisplay component: Standardizes error UI - Consistent error banner styling across app - Integrated into PageLayout - Created useForm hook: Foundation for form state management - Handles form data, validation, dirty checking - Ready for future form migrations - Migrated pages to use new patterns: - invites/page.tsx: useAsyncData + PageLayout - trades/page.tsx: useAsyncData + PageLayout + useMutation - trades/[id]/page.tsx: useAsyncData - admin/price-history/page.tsx: useAsyncData + PageLayout - admin/invites/page.tsx: useMutation for create/revoke Benefits: - ~40% reduction in boilerplate code - Consistent patterns across pages - Easier to maintain and extend - Better type safety All tests passing (32 frontend, 33 e2e)
This commit is contained in:
parent
a6fa6a8012
commit
b86b506d72
GPG key ID:
883EDBAA726BD96C
10 changed files with 761 additions and 523 deletions
|
|
@ -1,19 +1,14 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useState } from "react";
|
||||
import { invitesApi } from "../api";
|
||||
import { Header } from "../components/Header";
|
||||
import { PageLayout } from "../components/PageLayout";
|
||||
import { useRequireAuth } from "../hooks/useRequireAuth";
|
||||
import { useAsyncData } from "../hooks/useAsyncData";
|
||||
import { components } from "../generated/api";
|
||||
import constants from "../../../shared/constants.json";
|
||||
import { Permission } from "../auth-context";
|
||||
import {
|
||||
layoutStyles,
|
||||
cardStyles,
|
||||
typographyStyles,
|
||||
badgeStyles,
|
||||
buttonStyles,
|
||||
} from "../styles/shared";
|
||||
import { cardStyles, typographyStyles, badgeStyles, buttonStyles } from "../styles/shared";
|
||||
|
||||
// Use generated type from OpenAPI schema
|
||||
type Invite = components["schemas"]["UserInviteResponse"];
|
||||
|
|
@ -23,27 +18,17 @@ export default function InvitesPage() {
|
|||
requiredPermission: Permission.VIEW_OWN_INVITES,
|
||||
fallbackRedirect: "/admin/trades",
|
||||
});
|
||||
const [invites, setInvites] = useState<Invite[]>([]);
|
||||
const [isLoadingInvites, setIsLoadingInvites] = useState(true);
|
||||
|
||||
const { data: invites = [], isLoading: isLoadingInvites } = useAsyncData(
|
||||
() => invitesApi.getInvites(),
|
||||
{
|
||||
enabled: !!user && isAuthorized,
|
||||
initialData: [],
|
||||
}
|
||||
);
|
||||
|
||||
const [copiedId, setCopiedId] = useState<number | null>(null);
|
||||
|
||||
const fetchInvites = useCallback(async () => {
|
||||
try {
|
||||
const data = await invitesApi.getInvites();
|
||||
setInvites(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load invites:", err);
|
||||
} finally {
|
||||
setIsLoadingInvites(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && isAuthorized) {
|
||||
fetchInvites();
|
||||
}
|
||||
}, [user, isAuthorized, fetchInvites]);
|
||||
|
||||
const getInviteUrl = (identifier: string) => {
|
||||
if (typeof window !== "undefined") {
|
||||
return `${window.location.origin}/signup/${identifier}`;
|
||||
|
|
@ -62,109 +47,97 @@ export default function InvitesPage() {
|
|||
}
|
||||
};
|
||||
|
||||
if (isLoading || isLoadingInvites) {
|
||||
return (
|
||||
<main style={layoutStyles.main}>
|
||||
<div style={layoutStyles.loader}>Loading...</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user || !isAuthorized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { READY, SPENT, REVOKED } = constants.inviteStatuses;
|
||||
const readyInvites = invites.filter((i) => i.status === READY);
|
||||
const spentInvites = invites.filter((i) => i.status === SPENT);
|
||||
const revokedInvites = invites.filter((i) => i.status === REVOKED);
|
||||
|
||||
return (
|
||||
<main style={layoutStyles.main}>
|
||||
<Header currentPage="invites" />
|
||||
|
||||
<div style={layoutStyles.contentCentered}>
|
||||
<div style={styles.pageCard}>
|
||||
<div style={cardStyles.cardHeader}>
|
||||
<h1 style={cardStyles.cardTitle}>My Invites</h1>
|
||||
<p style={cardStyles.cardSubtitle}>
|
||||
Share your invite codes with friends to let them join
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{invites.length === 0 ? (
|
||||
<div style={styles.emptyState}>
|
||||
<p style={styles.emptyText}>You don't have any invites yet.</p>
|
||||
<p style={styles.emptyHint}>Contact an admin if you need invite codes to share.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div style={styles.sections}>
|
||||
{/* Ready Invites */}
|
||||
{readyInvites.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={typographyStyles.sectionTitle}>Available ({readyInvites.length})</h2>
|
||||
<p style={typographyStyles.sectionHint}>
|
||||
Share these links with people you want to invite
|
||||
</p>
|
||||
<div style={styles.inviteList}>
|
||||
{readyInvites.map((invite) => (
|
||||
<div key={invite.id} style={styles.inviteCard}>
|
||||
<div style={styles.inviteCode}>{invite.identifier}</div>
|
||||
<div style={styles.inviteActions}>
|
||||
<button
|
||||
onClick={() => copyToClipboard(invite)}
|
||||
style={buttonStyles.accentButton}
|
||||
>
|
||||
{copiedId === invite.id ? "Copied!" : "Copy Link"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Spent Invites */}
|
||||
{spentInvites.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={typographyStyles.sectionTitle}>Used ({spentInvites.length})</h2>
|
||||
<div style={styles.inviteList}>
|
||||
{spentInvites.map((invite) => (
|
||||
<div key={invite.id} style={styles.inviteCardSpent}>
|
||||
<div style={styles.inviteCode}>{invite.identifier}</div>
|
||||
<div style={styles.inviteeMeta}>
|
||||
<span style={{ ...badgeStyles.badge, ...badgeStyles.badgeSuccess }}>
|
||||
Used
|
||||
</span>
|
||||
<span style={styles.inviteeEmail}>by {invite.used_by_email}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Revoked Invites */}
|
||||
{revokedInvites.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={typographyStyles.sectionTitle}>Revoked ({revokedInvites.length})</h2>
|
||||
<div style={styles.inviteList}>
|
||||
{revokedInvites.map((invite) => (
|
||||
<div key={invite.id} style={styles.inviteCardRevoked}>
|
||||
<div style={styles.inviteCode}>{invite.identifier}</div>
|
||||
<span style={{ ...badgeStyles.badge, ...badgeStyles.badgeError }}>
|
||||
Revoked
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<PageLayout
|
||||
currentPage="invites"
|
||||
isLoading={isLoading || isLoadingInvites}
|
||||
isAuthorized={!!user && isAuthorized}
|
||||
>
|
||||
<div style={styles.pageCard}>
|
||||
<div style={cardStyles.cardHeader}>
|
||||
<h1 style={cardStyles.cardTitle}>My Invites</h1>
|
||||
<p style={cardStyles.cardSubtitle}>
|
||||
Share your invite codes with friends to let them join
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{invites.length === 0 ? (
|
||||
<div style={styles.emptyState}>
|
||||
<p style={styles.emptyText}>You don't have any invites yet.</p>
|
||||
<p style={styles.emptyHint}>Contact an admin if you need invite codes to share.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div style={styles.sections}>
|
||||
{/* Ready Invites */}
|
||||
{readyInvites.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={typographyStyles.sectionTitle}>Available ({readyInvites.length})</h2>
|
||||
<p style={typographyStyles.sectionHint}>
|
||||
Share these links with people you want to invite
|
||||
</p>
|
||||
<div style={styles.inviteList}>
|
||||
{readyInvites.map((invite) => (
|
||||
<div key={invite.id} style={styles.inviteCard}>
|
||||
<div style={styles.inviteCode}>{invite.identifier}</div>
|
||||
<div style={styles.inviteActions}>
|
||||
<button
|
||||
onClick={() => copyToClipboard(invite)}
|
||||
style={buttonStyles.accentButton}
|
||||
>
|
||||
{copiedId === invite.id ? "Copied!" : "Copy Link"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Spent Invites */}
|
||||
{spentInvites.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={typographyStyles.sectionTitle}>Used ({spentInvites.length})</h2>
|
||||
<div style={styles.inviteList}>
|
||||
{spentInvites.map((invite) => (
|
||||
<div key={invite.id} style={styles.inviteCardSpent}>
|
||||
<div style={styles.inviteCode}>{invite.identifier}</div>
|
||||
<div style={styles.inviteeMeta}>
|
||||
<span style={{ ...badgeStyles.badge, ...badgeStyles.badgeSuccess }}>
|
||||
Used
|
||||
</span>
|
||||
<span style={styles.inviteeEmail}>by {invite.used_by_email}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Revoked Invites */}
|
||||
{revokedInvites.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={typographyStyles.sectionTitle}>Revoked ({revokedInvites.length})</h2>
|
||||
<div style={styles.inviteList}>
|
||||
{revokedInvites.map((invite) => (
|
||||
<div key={invite.id} style={styles.inviteCardRevoked}>
|
||||
<div style={styles.inviteCode}>{invite.identifier}</div>
|
||||
<span style={{ ...badgeStyles.badge, ...badgeStyles.badgeError }}>
|
||||
Revoked
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue