From 5a0d86328570677a9fc160bbb4bf1b37a7e8697c Mon Sep 17 00:00:00 2001
From: Paul Brissaud <pbrissaud.pro@gmail.com>
Date: Mon, 9 Mar 2026 16:53:36 +0100
Subject: [PATCH] fix: remove user stats from challenge list page (#241)

Remove UserStats component and its ErrorBoundary/Suspense wrapper from
the challenges page. Stats are already shown on the dashboard and were
causing unnecessary complexity with the page's static generation cache.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/(main)/challenges/page.tsx | 18 -------
 components/user-stats.tsx      | 92 ----------------------------------
 2 files changed, 110 deletions(-)
 delete mode 100644 components/user-stats.tsx

diff --git a/app/(main)/challenges/page.tsx b/app/(main)/challenges/page.tsx
index 0d65d58a..48cf35fa 100644
--- a/app/(main)/challenges/page.tsx
+++ b/app/(main)/challenges/page.tsx
@@ -2,11 +2,8 @@ import { all } from "better-all";
 import { Trophy } from "lucide-react";
 import type { Metadata } from "next";
 import { cacheLife, cacheTag } from "next/cache";
-import { Suspense } from "react";
-import { ErrorBoundary } from "react-error-boundary";
 import { ChallengesQuickStartCTA } from "@/components/challenges-quick-start-cta";
 import { ChallengesView } from "@/components/challenges-view";
-import { UserStats } from "@/components/user-stats";
 import { generateMetadata as generateSEOMetadata } from "@/lib/seo";
 import { getChallenges } from "@/server/db/queries";
 import { HydrateClient, prefetch, trpc } from "@/trpc/server";
@@ -72,21 +69,6 @@ async function ChallengesPageContent() {
         </p>
       </div>
 
-      {/* Stats Cards - Client-side component handles auth check */}
-      <ErrorBoundary fallback={<div>Error loading user statistics.</div>}>
-        <Suspense
-          fallback={
-            <div className="grid grid-cols-3 gap-6 mb-8">
-              <div className="p-6 bg-secondary neo-border-thick animate-pulse h-32" />
-              <div className="p-6 bg-primary neo-border-thick animate-pulse h-32" />
-              <div className="p-6 bg-[#FF6B6B] neo-border-thick animate-pulse h-32" />
-            </div>
-          }
-        >
-          <UserStats />
-        </Suspense>
-      </ErrorBoundary>
-
       {/* Quick Start CTA - Only shown to unauthenticated users */}
       <ChallengesQuickStartCTA />
 
diff --git a/components/user-stats.tsx b/components/user-stats.tsx
deleted file mode 100644
index 47d998c7..00000000
--- a/components/user-stats.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { Award, Flame, Star } from "lucide-react";
-import { authClient } from "@/lib/auth-client";
-import { useTRPC } from "@/trpc/client";
-
-export function UserStats() {
-  const trpc = useTRPC();
-  const { data: session, isPending } = authClient.useSession();
-
-  // Only fetch stats if user is authenticated
-  const { data: completionData } = useQuery({
-    ...trpc.userProgress.getCompletionPercentage.queryOptions(),
-    enabled: !!session,
-  });
-  const { data: xpAndRank } = useQuery({
-    ...trpc.userProgress.getXpAndRank.queryOptions(),
-    enabled: !!session,
-  });
-  const { data: streak } = useQuery({
-    ...trpc.userProgress.getStreak.queryOptions(),
-    enabled: !!session,
-  });
-
-  // Don't render if not authenticated or still loading
-  if (
-    isPending ||
-    !session ||
-    !completionData ||
-    !xpAndRank ||
-    streak === undefined
-  ) {
-    return null;
-  }
-
-  return (
-    <div className="grid grid-cols-3 gap-6 mb-8">
-      {/* Challenges Completed Card */}
-      <div className="p-6 bg-secondary neo-border-thick neo-shadow-lg hover:neo-shadow-xl transition-shadow">
-        <div className="flex items-center gap-3 mb-2">
-          <div className="p-2 bg-primary neo-border">
-            <Award className="h-6 w-6 text-white" />
-          </div>
-          <div className="text-4xl font-black text-foreground">
-            {completionData.completedCount}
-          </div>
-        </div>
-        <div className="text-sm font-bold text-foreground uppercase tracking-wide">
-          Challenges completed
-        </div>
-        <div className="mt-1 text-xs font-bold text-foreground">
-          {completionData.percentageCompleted}% done
-        </div>
-      </div>
-
-      {/* Rank Card */}
-      <div className="p-6 bg-primary neo-border-thick neo-shadow-lg hover:neo-shadow-xl transition-shadow">
-        <div className="flex items-center gap-3 mb-2">
-          <div className="p-2 bg-white neo-border">
-            <Star className="h-6 w-6 text-accent" />
-          </div>
-          <div className="text-2xl font-black text-white leading-tight">
-            {xpAndRank.rank}
-          </div>
-        </div>
-        <div className="text-sm font-bold text-white uppercase tracking-wide">
-          Rank
-        </div>
-        <div className="mt-1 text-xs font-bold text-white/80">
-          {xpAndRank.xpEarned} xp earned
-        </div>
-      </div>
-
-      {/* Streak Card */}
-      <div className="p-6 bg-[#FF6B6B] neo-border-thick neo-shadow-lg hover:neo-shadow-xl transition-shadow">
-        <div className="flex items-center gap-3 mb-2">
-          <div className="p-2 bg-white neo-border">
-            <Flame className="h-6 w-6 text-[#FF6B6B]" />
-          </div>
-          <div className="text-4xl font-black text-white">{streak}</div>
-        </div>
-        <div className="text-sm font-bold text-white uppercase tracking-wide">
-          Day Streak
-        </div>
-        <div className="mt-1 text-xs font-bold text-white/80">
-          {streak === 0 ? "Start your journey! 🔥" : "Keep it up! 🔥"}
-        </div>
-      </div>
-    </div>
-  );
-}