mirror of
https://github.com/0xShay/ticketchain.git
synced 2026-01-11 13:13:25 +00:00
Merge pull request #57 from Ayush272002/Polishing&Glazing
Polishing&glazing
This commit is contained in:
@@ -152,7 +152,11 @@ const EventsPage: React.FC = () => {
|
|||||||
<br></br>
|
<br></br>
|
||||||
|
|
||||||
<div className="relative z-20 container mx-auto p-4 pt-16">
|
<div className="relative z-20 container mx-auto p-4 pt-16">
|
||||||
<Suspense fallback={<div className="mt-4 text-2xl text-white">Loading...</div>}>
|
<Suspense
|
||||||
|
fallback={
|
||||||
|
<div className="mt-4 text-2xl text-white">Loading...</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search events..."
|
placeholder="Search events..."
|
||||||
@@ -171,16 +175,28 @@ const EventsPage: React.FC = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
{showSortMenu && (
|
{showSortMenu && (
|
||||||
<div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30">
|
<div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30">
|
||||||
<Button variant="ghost" onClick={() => setSortOption('price-asc')}>
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => setSortOption('price-asc')}
|
||||||
|
>
|
||||||
Price Ascending
|
Price Ascending
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" onClick={() => setSortOption('price-desc')}>
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => setSortOption('price-desc')}
|
||||||
|
>
|
||||||
Price Descending
|
Price Descending
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" onClick={() => setSortOption('date-asc')}>
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => setSortOption('date-asc')}
|
||||||
|
>
|
||||||
Date Ascending
|
Date Ascending
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" onClick={() => setSortOption('date-desc')}>
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => setSortOption('date-desc')}
|
||||||
|
>
|
||||||
Date Descending
|
Date Descending
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@@ -238,6 +254,22 @@ const EventsPage: React.FC = () => {
|
|||||||
/>
|
/>
|
||||||
<span className="ml-2">Past Events</span>
|
<span className="ml-2">Past Events</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
{/* Filter by Host */}
|
||||||
|
<select
|
||||||
|
value={selectedHost}
|
||||||
|
onChange={(e) => setSelectedHost(e.target.value)}
|
||||||
|
className="mt-1 block w-full border-gray-300 rounded"
|
||||||
|
>
|
||||||
|
<option value="">All Hosts</option>
|
||||||
|
{Array.from(
|
||||||
|
new Set(events.map((event) => event.eventHost))
|
||||||
|
).map((host) => (
|
||||||
|
<option key={host} value={host}>
|
||||||
|
{host}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -246,7 +278,7 @@ const EventsPage: React.FC = () => {
|
|||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
<h2 className="text-2xl font-semibold text-white mb-4">
|
<h2 className="text-2xl font-semibold text-white mb-4">
|
||||||
<br></br>
|
<br />
|
||||||
Available Events
|
Available Events
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid grid-cols-1 gap-6">
|
<div className="grid grid-cols-1 gap-6">
|
||||||
|
|||||||
@@ -74,7 +74,7 @@ const Page = () => {
|
|||||||
loop
|
loop
|
||||||
muted
|
muted
|
||||||
className="absolute inset-0 w-full h-full object-cover z-0"
|
className="absolute inset-0 w-full h-full object-cover z-0"
|
||||||
src="BGVid2.mp4"
|
src="BGVid3.mp4"
|
||||||
>
|
>
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
|
|||||||
@@ -23,9 +23,17 @@ if (!RPC_URL || !CONTRACT_ADDRESS) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface TicketDetails {
|
||||||
|
ticketId: number;
|
||||||
|
eventName: string;
|
||||||
|
eventLocation: string;
|
||||||
|
eventDate: string;
|
||||||
|
imageUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfilePage() {
|
||||||
const [isClient, setIsClient] = useState(false);
|
const [isClient, setIsClient] = useState(false);
|
||||||
const [userTickets, setUserTickets] = useState<number[]>([]);
|
const [userTickets, setUserTickets] = useState<TicketDetails[]>([]);
|
||||||
const [userAddress, setUserAddress] = useState('');
|
const [userAddress, setUserAddress] = useState('');
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
@@ -86,17 +94,27 @@ export default function ProfilePage() {
|
|||||||
|
|
||||||
console.log('Fetching tickets for address:', address);
|
console.log('Fetching tickets for address:', address);
|
||||||
|
|
||||||
const tickets = await contract.getUserTickets(address);
|
const ticketIds = await contract.getUserTickets(address);
|
||||||
console.log('Raw tickets data:', tickets);
|
console.log('Raw tickets data:', ticketIds);
|
||||||
|
|
||||||
if (Array.isArray(tickets)) {
|
if (Array.isArray(ticketIds)) {
|
||||||
const ticketNumbers = tickets.map((ticket: ethers.BigNumber) =>
|
const ticketDetailsPromises = ticketIds.map(async (ticketId) => {
|
||||||
ticket.toNumber()
|
const ticketNumber = ticketId.toNumber();
|
||||||
);
|
// Simulate fetching event details with dummy data
|
||||||
console.log('Processed ticket numbers:', ticketNumbers);
|
const eventDetails: TicketDetails = {
|
||||||
setUserTickets(ticketNumbers);
|
ticketId: ticketNumber,
|
||||||
|
eventName: `Event #${ticketNumber}`,
|
||||||
|
eventLocation: 'Location XYZ',
|
||||||
|
eventDate: '2023-12-01',
|
||||||
|
imageUrl: 'https://via.placeholder.com/150',
|
||||||
|
};
|
||||||
|
return eventDetails;
|
||||||
|
});
|
||||||
|
|
||||||
|
const details = await Promise.all(ticketDetailsPromises);
|
||||||
|
setUserTickets(details);
|
||||||
} else {
|
} else {
|
||||||
console.error('Unexpected response from getUserTickets:', tickets);
|
console.error('Unexpected response from getUserTickets:', ticketIds);
|
||||||
setError('Unexpected response from contract. Please try again.');
|
setError('Unexpected response from contract. Please try again.');
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -108,69 +126,73 @@ export default function ProfilePage() {
|
|||||||
return (
|
return (
|
||||||
<div className="relative min-h-screen overflow-hidden bg-black">
|
<div className="relative min-h-screen overflow-hidden bg-black">
|
||||||
<Header />
|
<Header />
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
{isClient && (
|
||||||
|
<video
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
className="absolute inset-0 w-full h-full object-cover z-0"
|
||||||
|
src="/BGVid3.mp4"
|
||||||
|
>
|
||||||
|
Your browser does not support the video tag.
|
||||||
|
</video>
|
||||||
|
)}
|
||||||
|
<div className="absolute inset-0 bg-black opacity-50 z-10"></div>
|
||||||
|
</div>
|
||||||
<div className="relative z-20 container mx-auto p-4 pt-16">
|
<div className="relative z-20 container mx-auto p-4 pt-16">
|
||||||
<div className="relative min-h-screen overflow-hidden">
|
<div className="relative text-white">
|
||||||
{isClient && (
|
<h1 className="text-4xl font-bold mb-4">Your Profile</h1>
|
||||||
<video
|
{userAddress ? (
|
||||||
autoPlay
|
<p className="mb-4">Connected Address: {userAddress}</p>
|
||||||
loop
|
) : (
|
||||||
muted
|
<p className="mb-4">Not connected</p>
|
||||||
className="absolute inset-0 w-full h-full object-cover z-0"
|
|
||||||
src="/BGVid2.mp4"
|
|
||||||
>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="absolute inset-0 bg-black opacity-50 z-10"></div>
|
{error && (
|
||||||
|
<div className="bg-red-500 text-white p-2 rounded mb-4">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="relative z-20 text-white">
|
{loading ? (
|
||||||
<h1 className="text-4xl font-bold mb-4">Your Profile</h1>
|
<p>Loading...</p>
|
||||||
{userAddress ? (
|
) : (
|
||||||
<p className="mb-4">Connected Address: {userAddress}</p>
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
) : (
|
{userTickets.length > 0 ? (
|
||||||
<p className="mb-4">Not connected</p>
|
userTickets.map((details) => (
|
||||||
)}
|
<Card
|
||||||
<p className="mb-4">Current Network: {networkName}</p>
|
key={details.ticketId}
|
||||||
|
className="bg-gray-800 text-white"
|
||||||
|
>
|
||||||
|
<CardHeader>
|
||||||
|
<img
|
||||||
|
src={details.imageUrl}
|
||||||
|
alt={details.eventName}
|
||||||
|
className="w-full h-36 object-cover rounded-t-lg"
|
||||||
|
/>
|
||||||
|
<CardTitle>{details.eventName}</CardTitle>
|
||||||
|
<CardDescription>{details.eventLocation}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p>Ticket ID: {details.ticketId}</p>
|
||||||
|
<p>Date: {details.eventDate}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p>You don't have any tickets yet.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{error && (
|
<Button className="mt-4" onClick={connectWallet} disabled={loading}>
|
||||||
<div className="bg-red-500 text-white p-2 rounded mb-4">
|
{loading
|
||||||
{error}
|
? 'Connecting...'
|
||||||
</div>
|
: userAddress
|
||||||
)}
|
? 'Refresh Tickets'
|
||||||
|
: 'Connect Wallet'}
|
||||||
<Card className="bg-gray-800 text-white">
|
</Button>
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Your Tickets</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Here are the tickets associated with your wallet
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{loading ? (
|
|
||||||
<p>Loading...</p>
|
|
||||||
) : userTickets.length > 0 ? (
|
|
||||||
<ul>
|
|
||||||
{userTickets.map((ticketId) => (
|
|
||||||
<li key={ticketId} className="mb-2">
|
|
||||||
Ticket ID: {ticketId}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
) : (
|
|
||||||
<p>You don't have any tickets yet.</p>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Button className="mt-4" onClick={connectWallet} disabled={loading}>
|
|
||||||
{loading
|
|
||||||
? 'Connecting...'
|
|
||||||
: userAddress
|
|
||||||
? 'Refresh Tickets'
|
|
||||||
: 'Connect Wallet'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|||||||
Reference in New Issue
Block a user