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,41 +44,49 @@ 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) => {
-            const remainingTime = Math.max(
+            {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()
-            );
-  
-            const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
-            const hours = Math.floor(
+              );
+
+              const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
+              const hours = Math.floor(
               (remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
-            );
-            const minutes = Math.floor(
+              );
+              const minutes = Math.floor(
               (remainingTime % (1000 * 60 * 60)) / (1000 * 60)
-            );
-  
-            const countdownText =
+              );
+
+              const countdownText =
               days > 0
                 ? `${days}d ${hours}h ${minutes}m left`
                 : hours > 0
                 ? `${hours}h ${minutes}m left`
                 : `${minutes}m left`;
-  
-            return (
+
+              return (
               <div
                 key={giveaway.id}
                 className="bg-white rounded-2xl shadow-lg border-2 border-pink-200 hover:shadow-xl transition-shadow duration-300"
               >
                 <GiveawayCard
-                  title={giveaway.title}
-                  description={`${giveaway.description} — 🕒 ${countdownText}`}
-                  imageUrl={giveaway.prize}
-                  value={giveaway.value}
+                id={giveaway.id}
+                title={giveaway.title}
+                description={`${giveaway.description} — 🕒 ${countdownText}`}
+                imageUrl={giveaway.prize}
+                value={giveaway.value}
+                userId={user?.id ?? ""}
                 />
               </div>
-            );
-          })}
+              );
+            })}
         </div>
       </div>
     </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;