Enhance auction page with theme options and login functionality
Updated the Auctions page to include theme selection (light/dark) via localStorage, language selection, and integrated a login modal. Replaced direct logout navigation with a modal trigger and added a dropdown menu for user actions. Imported additional lucide-react icons and UI components for theme/language dropdowns. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/yHCvWBg
This commit is contained in:
kimjaehyeon0101
@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { queryClient } from "@/lib/queryClient";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@ -12,9 +12,18 @@ import { apiRequest } from "@/lib/queryClient";
|
||||
import { isUnauthorizedError } from "@/lib/authUtils";
|
||||
import AuctionCard from "@/components/AuctionCard";
|
||||
import type { Auction, MediaOutlet } from "@shared/schema";
|
||||
import { BookOpen } from "lucide-react";
|
||||
import { BookOpen, Settings, User, LogOut, Sun, Moon, Monitor, Globe } from "lucide-react";
|
||||
import { Link } from "wouter";
|
||||
import Footer from "@/components/Footer";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import LoginModal from "@/components/LoginModal";
|
||||
|
||||
export default function Auctions() {
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
@ -25,6 +34,68 @@ export default function Auctions() {
|
||||
amount: "",
|
||||
qualityScore: ""
|
||||
});
|
||||
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
|
||||
|
||||
const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
|
||||
const [language, setLanguage] = useState(() => localStorage.getItem('language') || 'en');
|
||||
|
||||
useEffect(() => {
|
||||
if (theme === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
localStorage.setItem('theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('language', language);
|
||||
}, [language]);
|
||||
|
||||
const handleThemeChange = (newTheme: string) => {
|
||||
setTheme(newTheme);
|
||||
};
|
||||
|
||||
const handleLanguageChange = (newLanguage: string) => {
|
||||
setLanguage(newLanguage);
|
||||
};
|
||||
|
||||
const languages = [
|
||||
{ code: 'en', name: 'English' },
|
||||
{ code: 'fr', name: 'Français' },
|
||||
{ code: 'de', name: 'Deutsch' },
|
||||
{ code: 'it', name: 'Italiano' },
|
||||
{ code: 'hi', name: 'हिन्दी' },
|
||||
{ code: 'ar', name: 'العربية' },
|
||||
{ code: 'ja', name: '日本語' },
|
||||
{ code: 'ko', name: '한국어' },
|
||||
{ code: 'zh-TW', name: '繁體中文' },
|
||||
{ code: 'zh-CN', name: '简体中文' },
|
||||
];
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/logout", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
toast({
|
||||
title: "Logged Out",
|
||||
description: "You have been successfully logged out.",
|
||||
});
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/auth/user"] });
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Logout Error",
|
||||
description: "An error occurred while logging out.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const { data: auctions = [], isLoading: auctionsLoading } = useQuery<Auction[]>({
|
||||
queryKey: ["/api/auctions"],
|
||||
@ -77,9 +148,7 @@ export default function Auctions() {
|
||||
description: "Please log in to place a bid.",
|
||||
variant: "destructive"
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.location.href = "/api/login";
|
||||
}, 1000);
|
||||
setIsLoginModalOpen(true);
|
||||
return;
|
||||
}
|
||||
setSelectedAuction(auction);
|
||||
@ -186,17 +255,149 @@ export default function Auctions() {
|
||||
</Link>
|
||||
|
||||
{isAuthenticated && user ? (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => window.location.href = "/api/logout"}
|
||||
data-testid="button-settings"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel>Theme</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleThemeChange('light')}
|
||||
className="cursor-pointer"
|
||||
data-testid="theme-light"
|
||||
>
|
||||
<Sun className="h-4 w-4 mr-2" />
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleThemeChange('dark')}
|
||||
className="cursor-pointer"
|
||||
data-testid="theme-dark"
|
||||
>
|
||||
<Moon className="h-4 w-4 mr-2" />
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleThemeChange('system')}
|
||||
className="cursor-pointer"
|
||||
data-testid="theme-system"
|
||||
>
|
||||
<Monitor className="h-4 w-4 mr-2" />
|
||||
System
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuLabel>Language</DropdownMenuLabel>
|
||||
{languages.map((lang) => (
|
||||
<DropdownMenuItem
|
||||
key={lang.code}
|
||||
onClick={() => handleLanguageChange(lang.code)}
|
||||
className="cursor-pointer"
|
||||
data-testid={`language-${lang.code}`}
|
||||
>
|
||||
<Globe className="h-4 w-4 mr-2" />
|
||||
{lang.name}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className="flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-md cursor-pointer hover:bg-gray-200 transition-colors" data-testid="user-profile-chip">
|
||||
<User className="h-4 w-4 text-gray-600" />
|
||||
<span className="text-sm font-medium text-gray-700" data-testid="user-name">
|
||||
{user.firstName} {user.lastName}
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={handleLogout}
|
||||
className="cursor-pointer text-red-600"
|
||||
data-testid="button-logout"
|
||||
>
|
||||
<LogOut className="h-4 w-4 mr-2" />
|
||||
Logout
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
) : (
|
||||
<Button size="sm" onClick={() => window.location.href = "/api/login"}>
|
||||
Login
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
data-testid="button-settings"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel>Theme</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleThemeChange('light')}
|
||||
className="cursor-pointer"
|
||||
data-testid="theme-light"
|
||||
>
|
||||
<Sun className="h-4 w-4 mr-2" />
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleThemeChange('dark')}
|
||||
className="cursor-pointer"
|
||||
data-testid="theme-dark"
|
||||
>
|
||||
<Moon className="h-4 w-4 mr-2" />
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleThemeChange('system')}
|
||||
className="cursor-pointer"
|
||||
data-testid="theme-system"
|
||||
>
|
||||
<Monitor className="h-4 w-4 mr-2" />
|
||||
System
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuLabel>Language</DropdownMenuLabel>
|
||||
{languages.map((lang) => (
|
||||
<DropdownMenuItem
|
||||
key={lang.code}
|
||||
onClick={() => handleLanguageChange(lang.code)}
|
||||
className="cursor-pointer"
|
||||
data-testid={`language-${lang.code}`}
|
||||
>
|
||||
<Globe className="h-4 w-4 mr-2" />
|
||||
{lang.name}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsLoginModalOpen(true)}
|
||||
data-testid="button-login"
|
||||
>
|
||||
<User className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -275,7 +476,7 @@ export default function Auctions() {
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Quality Score:</span>
|
||||
<span className="font-semibold text-chart-2">{auction.qualityScore || 0}/100</span>
|
||||
<span className="font-semibold text-gray-900">{auction.qualityScore || 0}/100</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Duration:</span>
|
||||
@ -290,7 +491,7 @@ export default function Auctions() {
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full"
|
||||
className="w-full bg-gray-900 hover:bg-gray-800 text-white"
|
||||
onClick={() => handleBidClick(auction)}
|
||||
disabled={getTimeRemaining(auction.endDate) === "Ended"}
|
||||
data-testid={`button-bid-${auction.id}`}
|
||||
@ -373,6 +574,7 @@ export default function Auctions() {
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={bidMutation.isPending}
|
||||
className="bg-gray-900 hover:bg-gray-800 text-white"
|
||||
data-testid="button-submit-bid"
|
||||
>
|
||||
{bidMutation.isPending ? "Placing Bid..." : "Place Bid"}
|
||||
@ -391,6 +593,13 @@ export default function Auctions() {
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Login Modal */}
|
||||
<LoginModal
|
||||
isOpen={isLoginModalOpen}
|
||||
onClose={() => setIsLoginModalOpen(false)}
|
||||
/>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user