counterweight
a5a1a2c1ad
- Translate LoadingState and EmptyState components (common namespace) - Translate Header navigation labels (navigation namespace) - Translate StatusBadge trade status labels (exchange namespace) - Create navigation.json translation files for es, en, ca - Create exchange.json translation files for status/direction/transfer labels - Update IntlProvider to load navigation and exchange namespaces - Update frontend tests to expect Spanish translations (default language) - Configure Playwright to use English language for e2e tests via storageState - Fix test expectations to match translated strings All frontend and e2e tests passing.
99 lines
3 KiB
TypeScript
99 lines
3 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "../auth-context";
|
|
import { sharedStyles } from "../styles/shared";
|
|
import constants from "../../../shared/constants.json";
|
|
import { LanguageSelector } from "./LanguageSelector";
|
|
import { useTranslation } from "../hooks/useTranslation";
|
|
|
|
const { ADMIN, REGULAR } = constants.roles;
|
|
|
|
type PageId =
|
|
| "profile"
|
|
| "invites"
|
|
| "exchange"
|
|
| "trades"
|
|
| "admin-invites"
|
|
| "admin-availability"
|
|
| "admin-trades"
|
|
| "admin-price-history";
|
|
|
|
interface HeaderProps {
|
|
currentPage: PageId;
|
|
}
|
|
|
|
interface NavItem {
|
|
id: PageId;
|
|
labelKey: string;
|
|
href: string;
|
|
regularOnly?: boolean;
|
|
adminOnly?: boolean;
|
|
}
|
|
|
|
const REGULAR_NAV_ITEMS: NavItem[] = [
|
|
{ id: "exchange", labelKey: "exchange", href: "/exchange", regularOnly: true },
|
|
{ id: "trades", labelKey: "myTrades", href: "/trades", regularOnly: true },
|
|
{ id: "invites", labelKey: "myInvites", href: "/invites", regularOnly: true },
|
|
{ id: "profile", labelKey: "myProfile", href: "/profile", regularOnly: true },
|
|
];
|
|
|
|
const ADMIN_NAV_ITEMS: NavItem[] = [
|
|
{ id: "admin-trades", labelKey: "trades", href: "/admin/trades", adminOnly: true },
|
|
{
|
|
id: "admin-availability",
|
|
labelKey: "availability",
|
|
href: "/admin/availability",
|
|
adminOnly: true,
|
|
},
|
|
{ id: "admin-invites", labelKey: "invites", href: "/admin/invites", adminOnly: true },
|
|
{ id: "admin-price-history", labelKey: "prices", href: "/admin/price-history", adminOnly: true },
|
|
];
|
|
|
|
export function Header({ currentPage }: HeaderProps) {
|
|
const { user, logout, hasRole } = useAuth();
|
|
const router = useRouter();
|
|
const t = useTranslation("navigation");
|
|
const isRegularUser = hasRole(REGULAR);
|
|
const isAdminUser = hasRole(ADMIN);
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
router.push("/login");
|
|
};
|
|
|
|
if (!user) return null;
|
|
|
|
// Build nav items based on user role
|
|
// Admin users see admin nav items, regular users see regular nav items
|
|
const navItems = isAdminUser ? ADMIN_NAV_ITEMS : REGULAR_NAV_ITEMS;
|
|
const visibleItems = navItems.filter(
|
|
(item) => (!item.regularOnly || isRegularUser) && (!item.adminOnly || isAdminUser)
|
|
);
|
|
|
|
return (
|
|
<div style={sharedStyles.header}>
|
|
<div style={sharedStyles.nav}>
|
|
{visibleItems.map((item, index) => (
|
|
<span key={item.id}>
|
|
{index > 0 && <span style={sharedStyles.navDivider}>•</span>}
|
|
{item.id === currentPage ? (
|
|
<span style={sharedStyles.navCurrent}>{t(item.labelKey)}</span>
|
|
) : (
|
|
<a href={item.href} style={sharedStyles.navLink}>
|
|
{t(item.labelKey)}
|
|
</a>
|
|
)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div style={sharedStyles.userInfo}>
|
|
<LanguageSelector />
|
|
<span style={sharedStyles.userEmail}>{user.email}</span>
|
|
<button onClick={handleLogout} style={sharedStyles.logoutBtn}>
|
|
{t("signOut")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|