fix: if not find developer languages, disable programming languages view

zhang-wenchao · zhang-wenchao · commit 2a9b6688cee2 · 2025-11-21T15:08:37.000+08:00
diff --git a/src/app/developers/[id]/DeveloperDetailClient.tsx b/src/app/developers/[id]/DeveloperDetailClient.tsx
@@ -19,6 +19,7 @@ import ProfileCardWidget from "~/developer/widgets/profile-card";
 import ActivityListViewWidget from "~/developer/views/activity-list";
 import { ProgrammingLanguagesBar } from "../../../components/event/ProgrammingLanguagesBar";
 import { ProgrammingLanguagesPie } from "../../../components/event/ProgrammingLanguagesPie";
+import { useGitHubStats } from "../../../hooks/useGitHubStats";
 
 import { resolveChartOptions } from "./helper";
 
@@ -35,6 +36,10 @@ export default function DeveloperDetailClient({
   repositories,
   recentActivity,
 }: DeveloperDetailProps) {
+  const { data: githubStats, loading: githubStatsLoading } = useGitHubStats(developer?.username || null);
+  const githubLanguages = githubStats?.languages ?? [];
+  const shouldShowGitHubLanguages = githubStatsLoading || githubLanguages.length > 0;
+
   // Show loading skeleton while data is being fetched
   if (!developer) {
     return (
@@ -78,17 +83,25 @@ export default function DeveloperDetailClient({
         <div className="animate-fade-in">
           <ProfileCardWidget className="mb-4" developer={developer} />
         </div>
-        <div className="animate-slide-up" style={{ animationDelay: "50ms" }}>
-          <div className="mb-4">
-            <h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
-              Programming Languages
-            </h5>
-            <div className="grid gap-4 lg:grid-cols-2">
-              <ProgrammingLanguagesBar username={developer.username} />
-              <ProgrammingLanguagesPie username={developer.username} />
+        {shouldShowGitHubLanguages && (
+          <div className="animate-slide-up" style={{ animationDelay: "50ms" }}>
+            <div className="mb-4">
+              <h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
+                Programming Languages
+              </h5>
+              <div className="grid gap-4 lg:grid-cols-2">
+                <ProgrammingLanguagesBar
+                  languages={githubLanguages}
+                  loading={githubStatsLoading}
+                />
+                <ProgrammingLanguagesPie
+                  languages={githubLanguages}
+                  loading={githubStatsLoading}
+                />
+              </div>
             </div>
           </div>
-        </div>
+        )}
         <div
           className="animate-slide-up mb-4"
           style={{ animationDelay: "200ms" }}
diff --git a/src/components/event/ProgrammingLanguagesBar.tsx b/src/components/event/ProgrammingLanguagesBar.tsx
@@ -1,29 +1,44 @@
 import { Code2, Cpu } from "lucide-react";
-import { useGitHubStats } from "../../hooks/useGitHubStats";
+import { useGitHubStats, type GitHubLanguage } from "../../hooks/useGitHubStats";
 
 interface ProgrammingLanguagesBarProps {
-  username: string;
+  username?: string | null;
   className?: string;
+  languages?: GitHubLanguage[];
+  loading?: boolean;
 }
 
-export function ProgrammingLanguagesBar({ username, className = "" }: ProgrammingLanguagesBarProps) {
-  const { data: githubData } = useGitHubStats(username);
+export function ProgrammingLanguagesBar({
+  username,
+  className = "",
+  languages: providedLanguages,
+  loading: forcedLoading,
+}: ProgrammingLanguagesBarProps) {
+  const shouldFetch = !providedLanguages && !!username;
+  const { data: githubData, loading } = useGitHubStats(shouldFetch ? (username ?? null) : null);
+  const languages = providedLanguages ?? githubData?.languages ?? [];
+  const isLoading = typeof forcedLoading === "boolean" ? forcedLoading : (shouldFetch ? loading : false);
+  const hasLanguages = languages.length > 0;
+
+  if (!isLoading && !hasLanguages) {
+    return null;
+  }
 
   return (
     <div className={`border border-border dark:border-border-dark rounded-xl p-4 bg-white dark:bg-surface-dark shadow-subtle ${className}`}>
       <div className="flex items-center gap-2 mb-4">
         <Code2 size={14} className="text-gray-600 dark:text-gray-400" />
         <h4 className="text-sm font-medium text-gray-900 dark:text-white">Programming Languages</h4>
-        {githubData?.languages && (
+        {hasLanguages && (
           <span className="text-xs text-gray-500 dark:text-gray-400 ml-auto">
-            {githubData.languages.length}
+            {languages.length}
           </span>
         )}
       </div>
 
-      {githubData?.languages && githubData.languages.length > 0 ? (
+      {hasLanguages ? (
         <div className="space-y-3">
-          {githubData.languages.slice(0, 5).map((language, index) => {
+          {languages.slice(0, 5).map((language, index) => {
             const percentage = parseFloat(language.percentage.replace('%', ''));
             const skillLevel = percentage >= 80 ? "Expert" : percentage >= 65 ? "Proficient" : "Familiar";
 
diff --git a/src/components/event/ProgrammingLanguagesPie.tsx b/src/components/event/ProgrammingLanguagesPie.tsx
@@ -1,10 +1,12 @@
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
 import { Code2 } from "lucide-react";
-import { useGitHubStats } from "../../hooks/useGitHubStats";
+import { useGitHubStats, type GitHubLanguage } from "../../hooks/useGitHubStats";
 
 interface ProgrammingLanguagesPieProps {
-  username: string;
+  username?: string | null;
   className?: string;
+  languages?: GitHubLanguage[];
+  loading?: boolean;
 }
 
 // Balanced teal/green theme colors - not too bright, not too dark
@@ -17,14 +19,28 @@ const COLORS = [
   "#10b981", // emerald-500
 ];
 
-export function ProgrammingLanguagesPie({ username, className = "" }: ProgrammingLanguagesPieProps) {
-  const { data: githubData } = useGitHubStats(username);
+export function ProgrammingLanguagesPie({
+  username,
+  className = "",
+  languages: providedLanguages,
+  loading: forcedLoading,
+}: ProgrammingLanguagesPieProps) {
+  const shouldFetch = !providedLanguages && !!username;
+  const { data: githubData, loading } = useGitHubStats(shouldFetch ? (username ?? null) : null);
+  const languages = providedLanguages ?? githubData?.languages ?? [];
+  const isLoading = typeof forcedLoading === "boolean" ? forcedLoading : (shouldFetch ? loading : false);
+  const hasLanguages = languages.length > 0;
+  const chartData = hasLanguages
+    ? languages.slice(0, 6).map(lang => ({
+      name: lang.name,
+      value: parseFloat(lang.percentage.replace('%', '')),
+      percentage: lang.percentage,
+    }))
+    : [];
 
-  const chartData = githubData?.languages?.slice(0, 6).map(lang => ({
-    name: lang.name,
-    value: parseFloat(lang.percentage.replace('%', '')),
-    percentage: lang.percentage,
-  })) || [];
+  if (!isLoading && !hasLanguages) {
+    return null;
+  }
 
   const CustomTooltip = ({ active, payload }: { active?: boolean; payload?: Array<{ payload: { name: string; percentage: string } }> }) => {
     if (active && payload && payload.length) {
@@ -48,14 +64,14 @@ export function ProgrammingLanguagesPie({ username, className = "" }: Programmin
       <div className="flex items-center gap-2 mb-4">
         <Code2 size={14} className="text-gray-600 dark:text-gray-400" />
         <h4 className="text-sm font-medium text-gray-900 dark:text-white">Language Distribution</h4>
-        {githubData?.languages && (
+        {hasLanguages && (
           <span className="text-xs text-gray-500 dark:text-gray-400 ml-auto">
-            Top {Math.min(6, githubData.languages.length)}
+            Top {Math.min(6, languages.length)}
           </span>
         )}
       </div>
 
-      {githubData?.languages && githubData.languages.length > 0 ? (
+      {hasLanguages ? (
         <div className="space-y-4">
           {/* Compact Chart */}
           <div className="h-32 flex items-center justify-center">
diff --git a/src/hooks/useGitHubStats.ts b/src/hooks/useGitHubStats.ts
@@ -11,15 +11,15 @@ interface GitHubStats {
   contributedTo: string;
 }
 
-interface Language {
+export interface GitHubLanguage {
   name: string;
   percentage: string;
 }
 
 interface GitHubStatsData {
   username: string;
   stats: GitHubStats | null;
-  languages: Language[];
+  languages?: GitHubLanguage[];
 }
 
 interface UseGitHubStatsResult {
diff --git a/src/services/event/views/event-detail/EventDetail.tsx b/src/services/event/views/event-detail/EventDetail.tsx
@@ -13,6 +13,7 @@ import ContributionStatsChart from "../../../../components/ContributionStatsChar
 import EcosystemRankingChart from "../../../../components/EcosystemRankingChart";
 import EventAnalyticsOverview from "../../../../components/EventAnalyticsOverview";
 import EventAnalyticsSkeleton from "../../../../components/loading/EventAnalyticsSkeleton";
+import { useGitHubStats } from "../../../../hooks/useGitHubStats";
 
 import type { EventReport } from "../../typing";
 import { fetchOne, fetchPublicEventDetail } from "../../repository/client";
@@ -29,6 +30,34 @@ interface EventAnalysisData {
   users_without_contributions: number;
 }
 
+function ContestantProgrammingLanguages({ username }: { username: string }) {
+  const { data, loading } = useGitHubStats(username || null);
+  const languages = data?.languages ?? [];
+  const shouldRender = loading || languages.length > 0;
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
+        Programming Languages
+      </h5>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <ProgrammingLanguagesBar
+          languages={languages}
+          loading={loading}
+        />
+        <ProgrammingLanguagesPie
+          languages={languages}
+          loading={loading}
+        />
+      </div>
+    </div>
+  );
+}
+
 function EventDetailView({ id, mode = 'admin', showParticipants }: EventDetailViewWidgetProps) {
   const isAdminMode = mode === 'admin';
   const shouldShowParticipants = showParticipants ?? isAdminMode;
@@ -420,15 +449,7 @@ function EventDetailView({ id, mode = 'admin', showParticipants }: EventDetailVi
                         </div>
 
                         {/* Programming Languages Section - Two Column Layout */}
-                        <div>
-                          <h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
-                          Programming Languages
-                          </h5>
-                          <div className="grid gap-4 lg:grid-cols-2">
-                            <ProgrammingLanguagesBar username={contestant.username} />
-                            <ProgrammingLanguagesPie username={contestant.username} />
-                          </div>
-                        </div>
+                        <ContestantProgrammingLanguages username={contestant.username} />
 
                         {/* Ecosystem Scores Chart - Full Width */}
                         <div>
diff --git a/src/services/profile-analysis/views/technical-breakdown/TechnicalBreakdown.tsx b/src/services/profile-analysis/views/technical-breakdown/TechnicalBreakdown.tsx

Original file line number	Diff line number	Diff line change
`@@ -11,15 +11,15 @@ interface GitHubStats {`
`11`	`11`	`contributedTo: string;`
`12`	`12`	`}`
`13`	`13`
`14`		`-interface Language {`
	`14`	`+export interface GitHubLanguage {`
`15`	`15`	`name: string;`
`16`	`16`	`percentage: string;`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`interface GitHubStatsData {`
`20`	`20`	`username: string;`
`21`	`21`	`stats: GitHubStats \| null;`
`22`		`- languages: Language[];`
	`22`	`+ languages?: GitHubLanguage[];`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`interface UseGitHubStatsResult {`