From e1488115fae01fe1741a579c0034e3fd5c329799 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Mon, 24 Nov 2025 13:36:26 +0530
Subject: [PATCH] feat(events,hackathons): Display user registration status on
 event and hackathon cards

- Add registration status check using useMasterRegistrations hook to both events and hackathons pages
- Display "Registered" button with CheckCircle icon for users already registered to an activity
- Replace "Join Now" button with green-styled "Registered" button when user has active registration
- Import CheckCircle icon from lucide-react for visual registration indicator
- Add isUserRegistered helper function to check if user is registered for specific activity
- Fetch user registrations filtered by activity_type (event/hackathon) on page load
- Improve user experience by providing clear visual feedback on registration status
---
 app/events/page.tsx     |  43 ++++++++++----
 app/hackathons/page.tsx | 123 ++++++++++++++++++++++++++++------------
 2 files changed, 120 insertions(+), 46 deletions(-)

diff --git a/app/events/page.tsx b/app/events/page.tsx
index f2262a15..70d513c1 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -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 = [
@@ -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 () => {
@@ -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,
@@ -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>
diff --git a/app/hackathons/page.tsx b/app/hackathons/page.tsx
index b366ca8d..25b703ed 100644
--- a/app/hackathons/page.tsx
+++ b/app/hackathons/page.tsx
@@ -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 = [
@@ -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 () => {
@@ -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>
@@ -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>