Skip to content

feat(events,hackathons): Display user registration status on event and hackathon cards #365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
codeunia-dev merged 1 commit into from
Nov 24, 2025
Merged

feat(events,hackathons): Display user registration status on event and hackathon cards #365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 33 additions & 10 deletions app/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import { cn } from "@/lib/utils";
import { useEvents } from "@/hooks/useEvents"
import { CompanyBadge } from "@/components/companies/CompanyBadge"
import type { Company } from "@/types/company"
import { useMasterRegistrations } from "@/hooks/useMasterRegistrations"
import { CheckCircle } from "lucide-react"

// Event categories for dropdown
const eventCategories = [
Expand Down Expand Up @@ -63,6 +65,9 @@ export default function EventsPage() {
// const { loading: featuredLoading } = useFeaturedEvents(5)
const featuredLoading = false

// Fetch user registrations to check registration status
const { registrations } = useMasterRegistrations({ activity_type: 'event' })

// Fetch companies for filter
useEffect(() => {
const fetchCompanies = async () => {
Expand All @@ -89,6 +94,11 @@ export default function EventsPage() {
const events = eventsData?.events || []
const isLoading = eventsLoading || featuredLoading

// Helper function to check if user is registered for an event
const isUserRegistered = (eventId: string | number) => {
return registrations.some(reg => reg.activity_id === String(eventId))
}

// Debug logging
console.log('Events Page Debug:', {
eventsLoading,
Expand Down Expand Up @@ -589,16 +599,29 @@ export default function EventsPage() {
</div>
{/* Action Button */}
<div className="mt-auto pt-2 flex justify-end">
<Button
variant="default"
size="lg"
className="font-semibold px-6 py-2 rounded-full text-base bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg transition-transform duration-200 transform-gpu hover:scale-105 focus:ring-2 focus:ring-primary/40"
asChild
>
<Link href={`/events/${event.slug}`}>
Join Now <ArrowRight className="ml-1 h-5 w-5" />
</Link>
</Button>
{isUserRegistered(event.id) ? (
<Button
variant="outline"
size="lg"
className="font-semibold px-6 py-2 rounded-full text-base border-2 border-green-500 text-green-600 hover:bg-green-50 shadow-lg transition-transform duration-200 transform-gpu hover:scale-105"
asChild
>
<Link href={`/events/${event.slug}`}>
<CheckCircle className="mr-1 h-5 w-5" /> Registered
</Link>
</Button>
) : (
<Button
variant="default"
size="lg"
className="font-semibold px-6 py-2 rounded-full text-base bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg transition-transform duration-200 transform-gpu hover:scale-105 focus:ring-2 focus:ring-primary/40"
asChild
>
<Link href={`/events/${event.slug}`}>
Join Now <ArrowRight className="ml-1 h-5 w-5" />
</Link>
</Button>
)}
</div>
</div>
</Card>
Expand Down
123 changes: 87 additions & 36 deletions app/hackathons/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import { cn } from "@/lib/utils";
import { useHackathons, useFeaturedHackathons } from "@/hooks/useHackathons"
import { CompanyBadge } from "@/components/companies/CompanyBadge"
import type { Company } from "@/types/company"
import { useMasterRegistrations } from "@/hooks/useMasterRegistrations"
import { CheckCircle } from "lucide-react"

// Hackathon categories for dropdown
const hackathonCategories = [
Expand Down Expand Up @@ -72,6 +74,14 @@ export default function HackathonsPage() {
const hackathons = hackathonsData?.hackathons || []
const isLoading = hackathonsLoading || featuredLoading

// Fetch user registrations to check registration status
const { registrations } = useMasterRegistrations({ activity_type: 'hackathon' })

// Helper function to check if user is registered for a hackathon
const isUserRegistered = (hackathonId: string | number) => {
return registrations.some(reg => reg.activity_id === String(hackathonId))
}

// Fetch companies for filter
useEffect(() => {
const fetchCompanies = async () => {
Expand Down Expand Up @@ -790,33 +800,61 @@ export default function HackathonsPage() {
<span className="text-sm font-medium">{hackathon.price}</span>
</div>
</div>
<Button
variant="default"
size="lg"
className="
font-semibold
px-4 py-2
text-sm
rounded-full
bg-gradient-to-r from-primary to-purple-600
hover:from-primary/90 hover:to-purple-600/90
shadow-lg
transition-transform duration-200
transform-gpu hover:scale-105
focus:ring-2 focus:ring-primary/40
w-full sm:w-fit
text-center
max-w-full
"
asChild
>
<Link
href={`/hackathons/${hackathon.slug}`}
className="flex items-center justify-center whitespace-nowrap"
{isUserRegistered(hackathon.id) ? (
<Button
variant="outline"
size="lg"
className="
font-semibold
px-4 py-2
text-sm
rounded-full
border-2 border-green-500 text-green-600 hover:bg-green-50
shadow-lg
transition-transform duration-200
transform-gpu hover:scale-105
w-full sm:w-fit
text-center
max-w-full
"
asChild
>
Join Now <ArrowRight className="ml-1 h-4 w-4 flex-shrink-0" />
</Link>
</Button>
<Link
href={`/hackathons/${hackathon.slug}`}
className="flex items-center justify-center whitespace-nowrap"
>
<CheckCircle className="mr-1 h-4 w-4 flex-shrink-0" /> Registered
</Link>
</Button>
) : (
<Button
variant="default"
size="lg"
className="
font-semibold
px-4 py-2
text-sm
rounded-full
bg-gradient-to-r from-primary to-purple-600
hover:from-primary/90 hover:to-purple-600/90
shadow-lg
transition-transform duration-200
transform-gpu hover:scale-105
focus:ring-2 focus:ring-primary/40
w-full sm:w-fit
text-center
max-w-full
"
asChild
>
<Link
href={`/hackathons/${hackathon.slug}`}
className="flex items-center justify-center whitespace-nowrap"
>
Join Now <ArrowRight className="ml-1 h-4 w-4 flex-shrink-0" />
</Link>
</Button>
)}
</div>
</CardContent>
</Card>
Expand Down Expand Up @@ -961,16 +999,29 @@ export default function HackathonsPage() {
</div>
{/* Action Button */}
<div className="mt-auto pt-2 flex justify-end">
<Button
variant="default"
size="lg"
className="font-semibold px-6 py-2 rounded-full text-base bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg transition-transform duration-200 transform-gpu hover:scale-105 focus:ring-2 focus:ring-primary/40"
asChild
>
<Link href={`/hackathons/${hackathon.slug}`}>
Join Now <ArrowRight className="ml-1 h-5 w-5" />
</Link>
</Button>
{isUserRegistered(hackathon.id) ? (
<Button
variant="outline"
size="lg"
className="font-semibold px-6 py-2 rounded-full text-base border-2 border-green-500 text-green-600 hover:bg-green-50 shadow-lg transition-transform duration-200 transform-gpu hover:scale-105"
asChild
>
<Link href={`/hackathons/${hackathon.slug}`}>
<CheckCircle className="mr-1 h-5 w-5" /> Registered
</Link>
</Button>
) : (
<Button
variant="default"
size="lg"
className="font-semibold px-6 py-2 rounded-full text-base bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg transition-transform duration-200 transform-gpu hover:scale-105 focus:ring-2 focus:ring-primary/40"
asChild
>
<Link href={`/hackathons/${hackathon.slug}`}>
Join Now <ArrowRight className="ml-1 h-5 w-5" />
</Link>
</Button>
)}
</div>
</div>
</Card>
Expand Down
Loading