comparative analysis share

Author: chetisha28

app/(root)/dashboard/[username]/page.tsx

@@ -60,22 +60,27 @@ export default async function DashboardPage({
   searchParams,
 }: {
   params: Promise<{ username: string }>;
-  searchParams: Promise<{ refresh?: string }>;
+  searchParams: Promise<{
+    refresh?: string;
+    compare?: string;
+  }>;
 }) {
   const { username } = await params;
-  const refreshParams = await searchParams;
-  const bypassCache = refreshParams?.refresh === 'true';
+  const resolvedSearchParams = await searchParams;
+  const bypassCache = resolvedSearchParams?.refresh === 'true';
+  const compareUsername = resolvedSearchParams?.compare;
 
   let data;
 
   try {
     data = await getFullDashboardData(username, { bypassCache });
   } catch (error) {
     if (error instanceof Error && error.message.includes('not found')) {
-      // Smart Redirect: If the GraphQL "user" query fails, check if it's actually an Organization
       let fallbackProfile;
       try {
-        fallbackProfile = await fetchUserProfile(username, { bypassCache });
+        fallbackProfile = await fetchUserProfile(username, {
+          bypassCache,
+        });
       } catch {
         return notFound();
       }
@@ -87,5 +92,26 @@ export default async function DashboardPage({
     throw error;
   }
 
-  return <DashboardClient initialData={data} username={username} />;
-}
+  let compareData = null;
+
+  if (
+    compareUsername &&
+    compareUsername.toLowerCase() !== username.toLowerCase()
+  ) {
+    try {
+      compareData = await getFullDashboardData(compareUsername, {
+        bypassCache,
+      });
+    } catch {
+      compareData = null;
+    }
+  }
+
+  return (
+    <DashboardClient
+      initialData={data}
+      username={username}
+      compareData={compareData}
+    />
+  );
+}

components/dashboard/DashboardClient.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { X, RefreshCw } from 'lucide-react';
+import { X, RefreshCw, Share2 } from 'lucide-react';
 import Link from 'next/link';
 import { toast } from 'sonner';
 import type { Achievement } from '@/types/dashboard';
@@ -19,6 +19,7 @@ import StatsCard from './StatsCard';
 import ComparisonStatsCard from './ComparisonStatsCard';
 import RadarChart from './RadarChart';
 import GrowthTrendChart from './GrowthTrendChart';
+import { useRouter } from 'next/navigation';
 
 // Define the dashboard data structure
 interface DashboardData {
@@ -68,6 +69,7 @@ interface DashboardData {
 interface DashboardClientProps {
   initialData: DashboardData;
   username: string;
+  compareData?: DashboardData | null;
 }
 
 export interface ProfileMetrics {
@@ -311,13 +313,14 @@ function getPersonalityTags(
 // DashboardClient Component
 // ------------------------------------------------------------
 
-export default function DashboardClient({ initialData, username }: DashboardClientProps) {
-  const [secondUserData, setSecondUserData] = useState<DashboardData | null>(null);
-  const [isCompareMode, setIsCompareMode] = useState(false);
+export default function DashboardClient({ initialData, username, compareData = null, }: DashboardClientProps) {
+  const [secondUserData, setSecondUserData] = useState<DashboardData | null>(compareData);
+  const [isCompareMode, setIsCompareMode] = useState(Boolean(compareData));
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [secondUsernameInput, setSecondUsernameInput] = useState('');
   const [isLoadingSecond, setIsLoadingSecond] = useState(false);
   const [compareError, setCompareError] = useState<string | null>(null);
+  const router = useRouter();
 
   // Close modal on escape key
   useEffect(() => {
@@ -362,6 +365,11 @@ export default function DashboardClient({ initialData, username }: DashboardClie
       const data = await res.json();
       setSecondUserData(data);
       setIsCompareMode(true);
+
+      router.replace(
+        `/dashboard/${username}?compare=${data.profile.username}`
+      );
+
       setIsModalOpen(false);
       toast.success(`Comparing ${username} vs ${data.profile.username}`);
     } catch (err: unknown) {
@@ -376,9 +384,33 @@ export default function DashboardClient({ initialData, username }: DashboardClie
   const handleExitCompare = () => {
     setIsCompareMode(false);
     setSecondUserData(null);
+
+    router.replace(`/dashboard/${username}`);
+
     toast.info('Returned to single profile view');
   };
 
+  const handleShareComparison = async () => {
+  if (!secondUserData) return;
+
+  const compareUrl = `${window.location.origin}/dashboard/${username}?compare=${secondUserData.profile.username}`;
+
+  try {
+    if (navigator.share) {
+      await navigator.share({
+        title: `${username} vs ${secondUserData.profile.username}`,
+        text: 'Check out this GitHub profile comparison',
+        url: compareUrl,
+      });
+    } else {
+      await navigator.clipboard.writeText(compareUrl);
+      toast.success('Comparison link copied!');
+    }
+  } catch {
+    // user cancelled share dialog
+  }
+};
+
   // ------------------------------------------------------------
   // Compare Mode Statistics Calculations
   // ------------------------------------------------------------
@@ -477,6 +509,17 @@ export default function DashboardClient({ initialData, username }: DashboardClie
               Compare Profile
             </button>
           )}
+          {isCompareMode && secondUserData && (
+            <button
+              onClick={handleShareComparison}
+              className="flex items-center gap-2 rounded-xl border border-black/10 dark:border-[rgba(255,255,255,0.15)] bg-blue-600 hover:bg-blue-700 px-4 py-2 text-sm font-semibold text-white transition-all duration-200 active:scale-[0.98]"
+            >
+            <Share2 size={16} />
+                   Share Comparison
+            </button>
+          )}
+
+
           <RefreshButton username={username} />
           <Link
             href="/"