Merge pull request #19 from Mra1k3r0/master

feat: invites just dropped, stats finally make sense

Author: mrepol742

.gitignore

@@ -40,3 +40,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+

app/(auth)/login/page.tsx

@@ -9,7 +9,15 @@ export const metadata: Metadata = {
     "Log in to your DevPulse account to monitor your coding activity and compete on leaderboards.",
 };
 
-export default async function Login() {
+export default async function Login(props: {
+  searchParams?: Promise<{ redirect?: string }>;
+}) {
+  const redirectParam = (await props.searchParams)?.redirect;
+  const redirectTo =
+    redirectParam && redirectParam.startsWith("/") && !redirectParam.startsWith("//")
+      ? redirectParam
+      : undefined;
+
   return (
     <div className="min-h-screen flex bg-[#0a0a1a] text-white">
       {/* Left Side - Visual / Branding */}
@@ -88,7 +96,7 @@ export default async function Login() {
           <p className="mt-8 text-center text-sm text-gray-400">
             Don&apos;t have an account?{" "}
             <Link
-              href="/signup"
+              href={redirectTo ? `/signup?redirect=${encodeURIComponent(redirectTo)}` : "/signup"}
               className="text-indigo-400 hover:text-indigo-300 font-semibold transition-colors underline-offset-4 hover:underline"
             >
               Sign up

app/(auth)/signup/page.tsx

@@ -9,7 +9,15 @@ export const metadata: Metadata = {
     "Create a DevPulse account to monitor your coding activity and compete on leaderboards.",
 };
 
-export default async function Signup() {
+export default async function Signup(props: {
+  searchParams?: Promise<{ redirect?: string }>;
+}) {
+  const redirectParam = (await props.searchParams)?.redirect;
+  const redirectTo =
+    redirectParam && redirectParam.startsWith("/") && !redirectParam.startsWith("//")
+      ? redirectParam
+      : undefined;
+
   return (
     <div className="min-h-screen flex bg-[#0a0a1a] text-white">
       {/* Left Side - Visual / Branding */}
@@ -90,7 +98,7 @@ export default async function Signup() {
           <p className="mt-8 text-center text-sm text-gray-400">
             Already have an account?{" "}
             <Link
-              href="/login"
+              href={redirectTo ? `/login?redirect=${encodeURIComponent(redirectTo)}` : "/login"}
               className="text-indigo-400 hover:text-indigo-300 font-semibold transition-colors underline-offset-4 hover:underline"
             >
               Log in

app/(public)/join/[code]/JoinButton.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useState } from "react";
+import { createClient } from "../../../lib/supabase/client";
+import { useRouter } from "next/navigation";
+import { toast } from "react-toastify";
+import Link from "next/link";
+
+export default function JoinButton({
+  code,
+  leaderboardSlug,
+  isLoggedIn,
+  alreadyMember,
+}: {
+  code: string;
+  leaderboardSlug: string;
+  isLoggedIn: boolean;
+  alreadyMember: boolean;
+}) {
+  const router = useRouter();
+  const [joining, setJoining] = useState(false);
+
+  if (alreadyMember) {
+    return (
+      <Link
+        href={`/leaderboard/${leaderboardSlug}`}
+        className="btn-primary inline-flex items-center justify-center gap-2 w-full py-4 text-sm font-bold rounded-xl shadow-lg shadow-indigo-500/20"
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+        </svg>
+        Already a Member &mdash; View Leaderboard
+      </Link>
+    );
+  }
+
+  if (!isLoggedIn) {
+    return (
+      <div className="space-y-3">
+        <Link
+          href={`/login?redirect=${encodeURIComponent(`/join?id=${code}`)}`}
+          className="btn-primary inline-flex items-center justify-center gap-2 w-full py-4 text-sm font-bold rounded-xl shadow-lg shadow-indigo-500/20"
+        >
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+          </svg>
+          Log In to Join
+        </Link>
+        <p className="text-xs text-gray-500">
+          Don&apos;t have an account?{" "}
+          <Link href={`/signup?redirect=${encodeURIComponent(`/join?id=${code}`)}`} className="text-indigo-400 hover:text-indigo-300 transition-colors">
+            Sign up free
+          </Link>
+        </p>
+      </div>
+    );
+  }
+
+  const handleJoin = async () => {
+    setJoining(true);
+    const supabase = createClient();
+
+    const joinPromise = (async () => {
+      const { data: userData } = await supabase.auth.getUser();
+      const user = userData.user;
+      if (!user) throw new Error("Not authenticated");
+
+      const { data: board } = await supabase
+        .from("leaderboards")
+        .select("id")
+        .eq("join_code", code)
+        .single();
+
+      if (!board) throw new Error("Invalid invite code");
+
+      const { error } = await supabase.from("leaderboard_members").insert({
+        leaderboard_id: board.id,
+        user_id: user.id,
+      });
+
+      if (error) throw error;
+      return board;
+    })();
+
+    try {
+      await toast.promise(joinPromise, {
+        pending: "Joining leaderboard...",
+        success: "You're in! Welcome to the leaderboard.",
+        error: {
+          render({ data }) {
+            const err = data as Error;
+            if (err?.code === "23505") {
+              return "You are already a member of this leaderboard.";
+            }
+            return err?.message || "Failed to join. Please try again.";
+          },
+        },
+      });
+
+      router.push(`/leaderboard/${leaderboardSlug}`);
+    } finally {
+      setJoining(false);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleJoin}
+      disabled={joining}
+      className="btn-primary inline-flex items-center justify-center gap-2 w-full py-4 text-sm font-bold rounded-xl shadow-lg shadow-indigo-500/20 hover:shadow-indigo-500/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+    >
+      {joining ? (
+        <>
+          <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          Joining...
+        </>
+      ) : (
+        <>
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
+          </svg>
+          Accept Invite &amp; Join
+        </>
+      )}
+    </button>
+  );
+}

app/(public)/join/[code]/page.tsx

@@ -0,0 +1,66 @@
+import { Metadata } from "next";
+import { createClient } from "../../../lib/supabase/server";
+import { redirect } from "next/navigation";
+
+type Props = {
+  params: Promise<{ code: string }>;
+};
+
+async function getLeaderboard(code: string) {
+  const supabase = await createClient();
+  const { data } = await supabase
+    .from("leaderboards")
+    .select("id, name, description, slug, owner_id, created_at")
+    .eq("join_code", code)
+    .single();
+  return data;
+}
+
+async function getMemberCount(leaderboardId: string) {
+  const supabase = await createClient();
+  const { count } = await supabase
+    .from("leaderboard_members")
+    .select("*", { count: "exact", head: true })
+    .eq("leaderboard_id", leaderboardId);
+  return count ?? 0;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { code } = await params;
+  const leaderboard = await getLeaderboard(code);
+
+  if (!leaderboard) {
+    return {
+      title: "Invite Not Found - DevPulse",
+      description: "This invite link is invalid or has expired.",
+    };
+  }
+
+  const title = `You're invited to join ${leaderboard.name}!`;
+  const description =
+    leaderboard.description?.length > 0
+      ? leaderboard.description
+      : `Join the ${leaderboard.name} leaderboard on DevPulse and compete with other developers. Track your coding activity and climb the ranks!`;
+
+  return {
+    title: `${title} - DevPulse`,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: "website",
+      siteName: "DevPulse",
+      url: `/join?id=${encodeURIComponent(code)}`,
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+    },
+  };
+}
+
+export default async function JoinPage({ params }: Props) {
+  const { code } = await params;
+  redirect(`/join?id=${encodeURIComponent(code)}`);
+}