fix: resolve OG image always showing zero stats (JhaSourav07#257)

* fix: resolve OG image always showing zero stats

fix: resolve OG image always showing zero stats

style: fix prettier formatting in stats route

fix: move ImageResponse JSX outside try/catch to satisfy eslint rule

fix: restore Cache-Control headers and emoji icons in OG image

chore: trigger CI after conflict resolution

* fix: resolve OG image always showing zero stats

Author: Gopikrishnan20

app/api/og/route.tsx

@@ -1,38 +1,27 @@
 import { ImageResponse } from 'next/og';
 import { NextRequest } from 'next/server';
 import { ogParamsSchema } from '../../../lib/validations';
-
-export const runtime = 'edge';
+import { fetchGitHubContributions } from '../../../lib/github';
+import { calculateStreak } from '../../../lib/calculate';
 
 export async function GET(req: NextRequest) {
   const { searchParams } = new URL(req.url);
-
   const { user } = ogParamsSchema.parse(Object.fromEntries(searchParams.entries()));
 
   let totalCommits = 0;
   let longestStreak = 0;
   let currentStreak = 0;
 
+  // Only the data fetching is wrapped in try/catch — not the JSX rendering.
   try {
-    const baseUrl = req.nextUrl.origin;
-
-    const res = await fetch(`${baseUrl}/api/streak?user=${user}`, {
-      cache: 'no-store',
-    });
-
-    if (res.ok) {
-      const data = (await res.json()) as {
-        totalContributions?: number;
-        longestStreak?: number;
-        currentStreak?: number;
-      };
-
-      totalCommits = data.totalContributions ?? 0;
-      longestStreak = data.longestStreak ?? 0;
-      currentStreak = data.currentStreak ?? 0;
-    }
-  } catch {
-    // fallback
+    const calendar = await fetchGitHubContributions(user, { bypassCache: true });
+    const stats = calculateStreak(calendar);
+    totalCommits = stats.totalContributions;
+    longestStreak = stats.longestStreak;
+    currentStreak = stats.currentStreak;
+  } catch (err) {
+    console.error('[OG] stats fetch failed:', err);
+    // fallback to zeros if GitHub is unreachable
   }
 
   return new ImageResponse(
@@ -57,6 +46,7 @@ export async function GET(req: NextRequest) {
           background: 'radial-gradient(ellipse, #58a6ff22 0%, transparent 70%)',
           top: '50px',
           left: '300px',
+          display: 'flex',
         }}
       />
       <div
@@ -68,12 +58,20 @@ export async function GET(req: NextRequest) {
           marginBottom: '24px',
         }}
       >
-        ⚡ CommitPulse
+        {'⚡ CommitPulse'}
       </div>
       <div
-        style={{ display: 'flex', fontSize: '32px', color: '#c9d1d9', marginBottom: '48px' }}
-      >{`@${user}`}</div>
+        style={{
+          display: 'flex',
+          fontSize: '32px',
+          color: '#c9d1d9',
+          marginBottom: '48px',
+        }}
+      >
+        {`@${user}`}
+      </div>
       <div style={{ display: 'flex', gap: '48px' }}>
+        {/* Total Commits */}
         <div
           style={{
             display: 'flex',
@@ -85,11 +83,14 @@ export async function GET(req: NextRequest) {
             padding: '32px 48px',
           }}
         >
-          <div style={{ fontSize: '56px', fontWeight: 'bold', color: '#58a6ff' }}>
-            {totalCommits}
+          <div style={{ display: 'flex', fontSize: '56px', fontWeight: 'bold', color: '#58a6ff' }}>
+            {String(totalCommits)}
+          </div>
+          <div style={{ display: 'flex', fontSize: '18px', color: '#8b949e', marginTop: '8px' }}>
+            Total Commits
           </div>
-          <div style={{ fontSize: '18px', color: '#8b949e', marginTop: '8px' }}>Total Commits</div>
         </div>
+        {/* Longest Streak */}
         <div
           style={{
             display: 'flex',
@@ -101,13 +102,14 @@ export async function GET(req: NextRequest) {
             padding: '32px 48px',
           }}
         >
-          <div style={{ fontSize: '56px', fontWeight: 'bold', color: '#f78166' }}>
-            {longestStreak}
+          <div style={{ display: 'flex', fontSize: '56px', fontWeight: 'bold', color: '#f78166' }}>
+            {String(longestStreak)}
           </div>
-          <div style={{ fontSize: '18px', color: '#8b949e', marginTop: '8px' }}>
-            Longest Streak 🔥
+          <div style={{ display: 'flex', fontSize: '18px', color: '#8b949e', marginTop: '8px' }}>
+            {'Longest Streak 🔥'}
           </div>
         </div>
+        {/* Current Streak */}
         <div
           style={{
             display: 'flex',
@@ -119,11 +121,11 @@ export async function GET(req: NextRequest) {
             padding: '32px 48px',
           }}
         >
-          <div style={{ fontSize: '56px', fontWeight: 'bold', color: '#3fb950' }}>
-            {currentStreak}
+          <div style={{ display: 'flex', fontSize: '56px', fontWeight: 'bold', color: '#3fb950' }}>
+            {String(currentStreak)}
           </div>
-          <div style={{ fontSize: '18px', color: '#8b949e', marginTop: '8px' }}>
-            Current Streak ⚡
+          <div style={{ display: 'flex', fontSize: '18px', color: '#8b949e', marginTop: '8px' }}>
+            {'Current Streak ⚡'}
           </div>
         </div>
       </div>

app/api/stats/route.test.ts

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { GET } from './route';
+
+vi.mock('../../../lib/github', () => ({
+  fetchGitHubContributions: vi.fn(),
+}));
+
+import { fetchGitHubContributions } from '../../../lib/github';
+import type { ContributionCalendar } from '../../../types';
+
+// Calendar with a known, predictable streak so assertions are deterministic.
+// Last day (2024-06-16) has commits; "today" in tests is set to that date.
+const mockCalendar: ContributionCalendar = {
+  totalContributions: 10,
+  weeks: [
+    {
+      contributionDays: [
+        { contributionCount: 1, date: '2024-06-10' },
+        { contributionCount: 2, date: '2024-06-11' },
+        { contributionCount: 0, date: '2024-06-12' },
+        { contributionCount: 3, date: '2024-06-13' },
+        { contributionCount: 1, date: '2024-06-14' },
+        { contributionCount: 0, date: '2024-06-15' },
+        { contributionCount: 3, date: '2024-06-16' },
+      ],
+    },
+  ],
+};
+
+function makeRequest(params: Record<string, string> = {}): Request {
+  const url = new URL('http://localhost/api/stats');
+  for (const [key, value] of Object.entries(params)) {
+    url.searchParams.set(key, value);
+  }
+  return new Request(url.toString());
+}
+
+describe('GET /api/stats', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(fetchGitHubContributions).mockResolvedValue(mockCalendar);
+  });
+
+  // ─── Parameter validation ──────────────────────────────────────────────────
+
+  it('returns 400 when the user parameter is missing', async () => {
+    const response = await GET(makeRequest());
+    expect(response.status).toBe(400);
+    const body = await response.json();
+    expect(body.error).toBe('Invalid parameters');
+  });
+
+  it('does not call the GitHub API when user is missing', async () => {
+    await GET(makeRequest());
+    expect(fetchGitHubContributions).not.toHaveBeenCalled();
+  });
+
+  it('returns 400 for an unknown timezone', async () => {
+    const response = await GET(makeRequest({ user: 'testuser', tz: 'Not/ATimezone' }));
+    expect(response.status).toBe(400);
+    const body = await response.json();
+    expect(body.error).toMatch(/Invalid "tz" parameter/);
+  });
+
+  // ─── Successful responses ──────────────────────────────────────────────────
+
+  it('returns JSON with the three expected fields', async () => {
+    const response = await GET(makeRequest({ user: 'testuser' }));
+    expect(response.status).toBe(200);
+
+    const body = await response.json();
+    expect(body).toHaveProperty('totalContributions');
+    expect(body).toHaveProperty('longestStreak');
+    expect(body).toHaveProperty('currentStreak');
+  });
+
+  it('returns Content-Type: application/json', async () => {
+    const response = await GET(makeRequest({ user: 'testuser' }));
+    expect(response.headers.get('content-type')).toMatch(/application\/json/);
+  });
+
+  it('returns correct totalContributions from the calendar', async () => {
+    const response = await GET(makeRequest({ user: 'testuser' }));
+    const body = await response.json();
+    expect(body.totalContributions).toBe(10);
+  });
+
+  it('returns numeric values (not strings) for all stat fields', async () => {
+    const response = await GET(makeRequest({ user: 'testuser' }));
+    const body = await response.json();
+    expect(typeof body.totalContributions).toBe('number');
+    expect(typeof body.longestStreak).toBe('number');
+    expect(typeof body.currentStreak).toBe('number');
+  });
+
+  it('passes bypassCache=true to GitHub when refresh=true', async () => {
+    await GET(makeRequest({ user: 'testuser', refresh: 'true' }));
+    expect(fetchGitHubContributions).toHaveBeenCalledWith('testuser', { bypassCache: true });
+  });
+
+  it('passes bypassCache=false to GitHub when refresh is omitted', async () => {
+    await GET(makeRequest({ user: 'testuser' }));
+    expect(fetchGitHubContributions).toHaveBeenCalledWith('testuser', { bypassCache: false });
+  });
+
+  it('accepts a valid IANA timezone without error', async () => {
+    const response = await GET(makeRequest({ user: 'testuser', tz: 'America/New_York' }));
+    expect(response.status).toBe(200);
+  });
+
+  // ─── Error handling ────────────────────────────────────────────────────────
+
+  it('returns 500 when the GitHub API throws', async () => {
+    vi.mocked(fetchGitHubContributions).mockRejectedValue(new Error('GitHub API error'));
+    const response = await GET(makeRequest({ user: 'testuser' }));
+    expect(response.status).toBe(500);
+    const body = await response.json();
+    expect(body.error).toBe('GitHub API error');
+  });
+
+  it('returns 500 with a generic message for non-Error throws', async () => {
+    vi.mocked(fetchGitHubContributions).mockRejectedValue('something went wrong');
+    const response = await GET(makeRequest({ user: 'testuser' }));
+    expect(response.status).toBe(500);
+    const body = await response.json();
+    expect(body.error).toBe('Unknown error');
+  });
+});

app/api/stats/route.ts

@@ -0,0 +1,70 @@
+// app/api/stats/route.ts
+import { NextResponse } from 'next/server';
+import { fetchGitHubContributions } from '../../../lib/github';
+import { calculateStreak } from '../../../lib/calculate';
+import { statsParamsSchema } from '../../../lib/validations';
+
+/**
+ * GET /api/stats?user=<username>[&refresh=true][&tz=<IANA timezone>]
+ *
+ * Returns JSON contribution stats for a GitHub user. Used by the OG image
+ * endpoint (/api/og) and any other consumer that needs numeric stats rather
+ * than the SVG badge returned by /api/streak.
+ *
+ * Response shape:
+ * {
+ *   "totalContributions": number,
+ *   "longestStreak":       number,
+ *   "currentStreak":       number
+ * }
+ */
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+
+  const parseResult = statsParamsSchema.safeParse(Object.fromEntries(searchParams.entries()));
+
+  if (!parseResult.success) {
+    return NextResponse.json(
+      {
+        error: 'Invalid parameters',
+        details: parseResult.error.flatten(),
+      },
+      { status: 400 }
+    );
+  }
+
+  const { user, refresh, tz } = parseResult.data;
+
+  // Validate the optional IANA timezone early so callers get a clear 400
+  // rather than a silent fallback or a 500.
+  let timezone = 'UTC';
+  if (tz) {
+    try {
+      timezone = new Intl.DateTimeFormat(undefined, { timeZone: tz }).resolvedOptions().timeZone;
+    } catch {
+      return NextResponse.json({ error: `Invalid "tz" parameter: "${tz}"` }, { status: 400 });
+    }
+  }
+
+  try {
+    const calendar = await fetchGitHubContributions(user, { bypassCache: refresh });
+    const stats = calculateStreak(calendar, timezone);
+
+    return NextResponse.json(
+      {
+        totalContributions: stats.totalContributions,
+        longestStreak: stats.longestStreak,
+        currentStreak: stats.currentStreak,
+      },
+      {
+        headers: {
+          // Cache until next UTC midnight; clients can bust with ?refresh=true
+          'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
+        },
+      }
+    );
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

lib/validations.ts

@@ -91,6 +91,16 @@ export const ogParamsSchema = z.object({
   user: z.string().optional().default('unknown'),
 });
 
+export const statsParamsSchema = z.object({
+  user: z.string({ error: 'Missing user parameter' }).min(1, { message: 'Missing user parameter' }),
+  refresh: z
+    .string()
+    .optional()
+    .transform((val) => val === 'true'),
+  tz: z.string().optional(),
+});
+
 export type StreakParams = z.infer<typeof streakParamsSchema>;
 export type GithubParams = z.infer<typeof githubParamsSchema>;
 export type OgParams = z.infer<typeof ogParamsSchema>;
+export type StatsParams = z.infer<typeof statsParamsSchema>;