Initial Entry logic

src/app/giveaways/page.tsx

@@ -23,6 +23,17 @@ export default async function GiveawaysPage() {
     },
   });
 
+  const user = await db.user.findUnique({
+    where: { email: session.user.email },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+      coins: true,
+      youtubeHandle: true,
+    },
+  });
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-yellow-50 to-pink-100 py-12 px-4 sm:px-6 lg:px-8 font-sans">
       <div className="max-w-7xl mx-auto">
@@ -33,7 +44,13 @@ export default async function GiveawaysPage() {
   
         {/* Grid of Cards */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 text-black">
-          {giveaways.map((giveaway) => {
+            {giveaways
+            .filter((giveaway) => {
+              const remainingTime =
+              new Date(giveaway.endsAt ?? 0).getTime() - Date.now();
+              return remainingTime > 0;
+            })
+            .map((giveaway) => {
               const remainingTime = Math.max(
               0,
               new Date(giveaway.endsAt ?? 0).getTime() - Date.now()
@@ -60,10 +77,12 @@ export default async function GiveawaysPage() {
                 className="bg-white rounded-2xl shadow-lg border-2 border-pink-200 hover:shadow-xl transition-shadow duration-300"
               >
                 <GiveawayCard
+                id={giveaway.id}
                 title={giveaway.title}
                 description={`${giveaway.description} — 🕒 ${countdownText}`}
                 imageUrl={giveaway.prize}
                 value={giveaway.value}
+                userId={user?.id ?? ""}
                 />
               </div>
               );

src/components/GiveawayCard.tsx

@@ -1,14 +1,17 @@
 "use client"
 import React, { useState } from 'react';
+import handleEnterGiveawayClick from './GiveawayCardServer';
 
 interface GiveawayCardProps {
+    id: string;
     title: string;
     description: string;
     imageUrl: string;
     value: number;
+    userId: string;
 }
 
-const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUrl, value }) => {
+const GiveawayCard: React.FC<GiveawayCardProps> = ({ id, title, description, imageUrl, value, userId}) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
     const handleEnterClick = () => {
@@ -58,7 +61,16 @@ const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUr
                         </button>
                         <button
                             className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
-                            onClick={handleEnterClick}
+                            onClick={() => {
+                                handleEnterGiveawayClick(id, Math.ceil(value * 0.01), userId)
+                                    .then(() => {
+                                        alert(`You have entered the giveaway with ID: ${id} and value: ${Math.ceil(value * 0.01)}`);
+                                    })
+                                    .catch((error) => {
+                                        console.error("Error entering giveaway:", error);
+                                        alert("Failed to enter the giveaway. Please try again.");
+                                    });
+                            }}
                         >
                             Enter: {Math.ceil(value * 0.01)}
                         </button>

src/components/GiveawayCardServer.tsx

@@ -0,0 +1,22 @@
+"use server"
+import { db } from "@/lib/db";
+
+async function handleEnterGiveawayClick(giveawayId: string, entryValue: number, userId: string) {
+    
+    await db.entry.create({
+        data: {
+            userId: userId, 
+            giveawayId: giveawayId, 
+            weight: 1, 
+        },
+    });
+
+    await db.user.update({
+        where: { id: userId },
+        data: {
+            coins: { decrement: entryValue },
+        },
+    });
+}
+
+export default handleEnterGiveawayClick;