bug- goaltracker , new route for user added

Author: kanishka-2007-tech

app/api/user/goals/route.ts

@@ -0,0 +1,152 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import { validateCSRF } from '@/lib/security/csrf';
+import dbConnect from '@/lib/mongodb';
+import { User } from '@/models/User';
+import { getClientIp } from '@/utils/getClientIp';
+import { getRateLimitHeaders, RateLimiter } from '@/lib/rate-limit';
+import { githubUsernameSchema } from '@/lib/validations';
+import { sanitizeMongoPayload } from '@/utils/sanitize';
+import logger from '@/lib/logger';
+
+// GET  — 20 req / min per IP (read-heavy, cheap)
+const goalsReadLimiter = new RateLimiter(20, 60_000, 1);
+
+// PATCH — 10 req / min per IP (write-side, slightly stricter)
+const goalsWriteLimiter = new RateLimiter(10, 60_000, 1);
+
+const DEFAULT_GOALS = { monthly: 100, yearly: 1000 };
+
+const patchBodySchema = z.object({
+  username: githubUsernameSchema,
+  monthly: z.number().int().min(1).max(99_999),
+  yearly: z.number().int().min(1).max(9_999_999),
+});
+
+// ---------------------------------------------------------------------------
+// GET /api/user/goals?username=<user>
+// Returns the stored goals for the user, or defaults when none are saved yet.
+// ---------------------------------------------------------------------------
+export async function GET(request: Request) {
+  const ip = getClientIp(request);
+  const rateLimitKey =
+    ip && ip !== 'unknown' ? ip : `unknown:${request.headers.get('user-agent') ?? 'no-agent'}`;
+
+  const rateLimitResult = await goalsReadLimiter.checkWithResult(rateLimitKey);
+  if (!rateLimitResult.success) {
+    return NextResponse.json(
+      { error: 'Too many requests. Please try again later.' },
+      { status: 429, headers: getRateLimitHeaders(rateLimitResult) }
+    );
+  }
+
+  const { searchParams } = new URL(request.url);
+  const rawUsername = searchParams.get('username')?.trim();
+
+  if (!rawUsername) {
+    return NextResponse.json({ error: 'Username is required' }, { status: 400 });
+  }
+
+  const parsed = githubUsernameSchema.safeParse(rawUsername);
+  if (!parsed.success) {
+    return NextResponse.json({ error: 'Invalid GitHub username' }, { status: 400 });
+  }
+
+  const username = parsed.data.toLowerCase();
+
+  // When DB is not configured, return defaults so the client degrades gracefully.
+  if (!process.env.MONGODB_URI) {
+    return NextResponse.json({ goals: DEFAULT_GOALS, source: 'default' });
+  }
+
+  try {
+    await dbConnect();
+    const user = await User.findOne({ username }).select('goals').lean();
+
+    if (!user || !user.goals) {
+      return NextResponse.json({ goals: DEFAULT_GOALS, source: 'default' });
+    }
+
+    return NextResponse.json({
+      goals: {
+        monthly: user.goals.monthly ?? DEFAULT_GOALS.monthly,
+        yearly: user.goals.yearly ?? DEFAULT_GOALS.yearly,
+      },
+      source: 'db',
+    });
+  } catch (error) {
+    logger.error('Failed to fetch user goals', { route: '/api/user/goals', error });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+// ---------------------------------------------------------------------------
+// PATCH /api/user/goals
+// Body: { username, monthly, yearly }
+// Upserts the goals sub-document on the user record.
+// ---------------------------------------------------------------------------
+export async function PATCH(request: Request) {
+  const ip = getClientIp(request);
+  const rateLimitKey =
+    ip && ip !== 'unknown' ? ip : `unknown:${request.headers.get('user-agent') ?? 'no-agent'}`;
+
+  const rateLimitResult = await goalsWriteLimiter.checkWithResult(rateLimitKey);
+  if (!rateLimitResult.success) {
+    return NextResponse.json(
+      { error: 'Too many requests. Please try again later.' },
+      { status: 429, headers: getRateLimitHeaders(rateLimitResult) }
+    );
+  }
+
+  // CSRF validation — mirrors track-user route
+  const csrfError = validateCSRF(request);
+  if (csrfError) {
+    return NextResponse.json({ error: 'Origin not allowed' }, { status: 403 });
+  }
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: 'Malformed JSON request body' }, { status: 400 });
+  }
+
+  // Sanitize MongoDB operators from body
+  sanitizeMongoPayload(body);
+
+  const parsed = patchBodySchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: 'Invalid request body', details: parsed.error.flatten().fieldErrors },
+      { status: 400 }
+    );
+  }
+
+  const { username, monthly, yearly } = parsed.data;
+  const trimmedUsername = username.toLowerCase();
+
+  // Graceful bypass when DB is not configured (dev / CI without MongoDB)
+  if (!process.env.MONGODB_URI) {
+    logger.warn('Goals save bypassed: MONGODB_URI is not set', {
+      environment: process.env.NODE_ENV,
+    });
+    return NextResponse.json({ success: true, bypassed: true });
+  }
+
+  try {
+    await dbConnect();
+    await User.updateOne(
+      { username: trimmedUsername },
+      {
+        $setOnInsert: { username: trimmedUsername },
+        $set: { 'goals.monthly': monthly, 'goals.yearly': yearly },
+      },
+      { upsert: true }
+    );
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    logger.error('Failed to save user goals', { route: '/api/user/goals', error });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

components/dashboard/GoalTracker.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { motion, AnimatePresence } from 'framer-motion';
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Target, Edit2, Check, X } from 'lucide-react';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useTranslation } from '@/context/TranslationContext';
@@ -21,16 +21,58 @@ const DEFAULT_GOALS: UserGoals = {
   yearly: 1000,
 };
 
+const GOALS_API = '/api/user/goals';
+
 export default function GoalTracker({ username, activity = [] }: GoalTrackerProps) {
   const { t } = useTranslation();
   const [isEditing, setIsEditing] = useState(false);
 
-  // Load and save goals using standard local storage key keyed by username
+  // localStorage acts as an instant cache so the UI renders immediately.
   const [goals, setGoals] = useLocalStorage<UserGoals>(
     `commitpulse:goals:${username.toLowerCase()}`,
     DEFAULT_GOALS
   );
 
+  // Track whether the server has returned a value yet (to show a loading hint
+  // only when localStorage had no prior value for this user).
+  const [serverSynced, setServerSynced] = useState(false);
+  const saveControllerRef = useRef<AbortController | null>(null);
+
+  // On mount, fetch goals from the server. The server value is authoritative
+  // and overwrites localStorage so all devices stay in sync.
+  useEffect(() => {
+    let cancelled = false;
+
+    async function fetchServerGoals() {
+      try {
+        const res = await fetch(
+          `${GOALS_API}?username=${encodeURIComponent(username.toLowerCase())}`,
+          { cache: 'no-store' }
+        );
+        if (!res.ok || cancelled) return;
+
+        const data = await res.json();
+        if (
+          data?.goals &&
+          typeof data.goals.monthly === 'number' &&
+          typeof data.goals.yearly === 'number'
+        ) {
+          setGoals(data.goals);
+        }
+      } catch {
+        // Network failure — silently keep local value
+      } finally {
+        if (!cancelled) setServerSynced(true);
+      }
+    }
+
+    fetchServerGoals();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [username]);
+
   const [editMonthly, setEditMonthly] = useState(goals.monthly.toString());
   const [editYearly, setEditYearly] = useState(goals.yearly.toString());
 
@@ -65,18 +107,46 @@ export default function GoalTracker({ username, activity = [] }: GoalTrackerProp
     e.preventDefault();
     const newMonthly = Math.max(1, parseInt(editMonthly, 10) || DEFAULT_GOALS.monthly);
     const newYearly = Math.max(1, parseInt(editYearly, 10) || DEFAULT_GOALS.yearly);
+    const newGoals: UserGoals = { monthly: newMonthly, yearly: newYearly };
 
-    setGoals({
-      monthly: newMonthly,
-      yearly: newYearly,
-    });
+    // Optimistic local update — instant feedback regardless of network
+    setGoals(newGoals);
     setIsEditing(false);
+
+    // Abort any in-flight previous save
+    saveControllerRef.current?.abort();
+    const controller = new AbortController();
+    saveControllerRef.current = controller;
+
+    // Persist to server in the background
+    fetch(GOALS_API, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        username: username.toLowerCase(),
+        monthly: newMonthly,
+        yearly: newYearly,
+      }),
+      signal: controller.signal,
+    }).catch((err) => {
+      // AbortError is expected when navigating away — swallow silently
+      if (err?.name !== 'AbortError') {
+        console.warn('[GoalTracker] Failed to persist goals to server:', err);
+      }
+    });
   };
 
   const handleCancel = () => {
     setIsEditing(false);
   };
 
+  // Show a subtle loading state only when: (a) no localStorage value existed
+  // AND (b) the server hasn't responded yet. This avoids any flash for returning users.
+  const isInitialLoad =
+    !serverSynced &&
+    goals.monthly === DEFAULT_GOALS.monthly &&
+    goals.yearly === DEFAULT_GOALS.yearly;
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 12 }}
@@ -187,28 +257,38 @@ export default function GoalTracker({ username, activity = [] }: GoalTrackerProp
                   {t('dashboard.goals.monthly') || 'Monthly Target'}
                 </span>
                 <span className="text-xs font-bold text-zinc-900 dark:text-white">
-                  {monthlyContributions} / {goals.monthly}
+                  {isInitialLoad ? (
+                    <span className="inline-block w-14 h-3 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                  ) : (
+                    <>
+                      {monthlyContributions} / {goals.monthly}
+                    </>
+                  )}
                 </span>
               </div>
               <div className="w-full h-2 rounded-full bg-gray-100 dark:bg-zinc-900 overflow-hidden relative border border-black/5 dark:border-[rgba(255,255,255,0.03)]">
                 <motion.div
                   initial={{ width: 0 }}
-                  animate={{ width: `${monthlyPercent}%` }}
+                  animate={{ width: isInitialLoad ? '0%' : `${monthlyPercent}%` }}
                   transition={{ duration: 0.8, ease: 'easeOut' }}
                   className="h-full bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full"
                 />
               </div>
               <div className="flex justify-between items-center text-[10px]">
                 <span className="text-zinc-400 dark:text-[#777]">
-                  {monthlyRemaining > 0
-                    ? (t('dashboard.goals.remaining') || '{{count}} commits remaining').replace(
-                        '{{count}}',
-                        monthlyRemaining.toString()
-                      )
-                    : t('dashboard.goals.completed') || 'Goal Achieved! 🎉'}
+                  {isInitialLoad ? (
+                    <span className="inline-block w-24 h-2.5 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                  ) : monthlyRemaining > 0 ? (
+                    (t('dashboard.goals.remaining') || '{{count}} commits remaining').replace(
+                      '{{count}}',
+                      monthlyRemaining.toString()
+                    )
+                  ) : (
+                    t('dashboard.goals.completed') || 'Goal Achieved! 🎉'
+                  )}
                 </span>
                 <span className="font-semibold text-emerald-500 dark:text-emerald-400">
-                  {monthlyPercent}%
+                  {isInitialLoad ? '—' : `${monthlyPercent}%`}
                 </span>
               </div>
             </div>
@@ -220,28 +300,38 @@ export default function GoalTracker({ username, activity = [] }: GoalTrackerProp
                   {t('dashboard.goals.yearly') || 'Yearly Target'}
                 </span>
                 <span className="text-xs font-bold text-zinc-900 dark:text-white">
-                  {yearlyContributions} / {goals.yearly}
+                  {isInitialLoad ? (
+                    <span className="inline-block w-14 h-3 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                  ) : (
+                    <>
+                      {yearlyContributions} / {goals.yearly}
+                    </>
+                  )}
                 </span>
               </div>
               <div className="w-full h-2 rounded-full bg-gray-100 dark:bg-zinc-900 overflow-hidden relative border border-black/5 dark:border-[rgba(255,255,255,0.03)]">
                 <motion.div
                   initial={{ width: 0 }}
-                  animate={{ width: `${yearlyPercent}%` }}
+                  animate={{ width: isInitialLoad ? '0%' : `${yearlyPercent}%` }}
                   transition={{ duration: 0.8, ease: 'easeOut' }}
                   className="h-full bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full"
                 />
               </div>
               <div className="flex justify-between items-center text-[10px]">
                 <span className="text-zinc-400 dark:text-[#777]">
-                  {yearlyRemaining > 0
-                    ? (t('dashboard.goals.remaining') || '{{count}} commits remaining').replace(
-                        '{{count}}',
-                        yearlyRemaining.toString()
-                      )
-                    : t('dashboard.goals.completed') || 'Goal Achieved! 🎉'}
+                  {isInitialLoad ? (
+                    <span className="inline-block w-24 h-2.5 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                  ) : yearlyRemaining > 0 ? (
+                    (t('dashboard.goals.remaining') || '{{count}} commits remaining').replace(
+                      '{{count}}',
+                      yearlyRemaining.toString()
+                    )
+                  ) : (
+                    t('dashboard.goals.completed') || 'Goal Achieved! 🎉'
+                  )}
                 </span>
                 <span className="font-semibold text-emerald-500 dark:text-emerald-400">
-                  {yearlyPercent}%
+                  {isInitialLoad ? '—' : `${yearlyPercent}%`}
                 </span>
               </div>
             </div>

models/User.ts

@@ -1,11 +1,17 @@
 import mongoose, { Document, Model, Schema } from 'mongoose';
 
+export interface IUserGoals {
+  monthly: number;
+  yearly: number;
+}
+
 export interface IUser extends Document {
   username: string;
   githubToken?: string;
   createdAt: Date;
   lastSeen?: Date;
   visitCount: number;
+  goals?: IUserGoals;
 }
 
 const UserSchema: Schema<IUser> = new Schema<IUser>({
@@ -33,6 +39,10 @@ const UserSchema: Schema<IUser> = new Schema<IUser>({
     type: Number,
     default: 0,
   },
+  goals: {
+    monthly: { type: Number, min: 1 },
+    yearly: { type: Number, min: 1 },
+  },
 });
 
 export const User: Model<IUser> = mongoose.models.User || mongoose.model<IUser>('User', UserSchema);