From 9fbe8e0aa2b45ea64c67afb7a95a156599febb4c Mon Sep 17 00:00:00 2001 From: veemakama Date: Sun, 21 Jun 2026 16:03:17 +0000 Subject: [PATCH 1/2] feat: add loading/error/empty states across frontend components - LoadingFallback: add Skeleton, SkeletonCard, SkeletonProfile, SkeletonList, SkeletonText, EmptyState, ErrorDisplay reusable components - ErrorBoundary: use ErrorDisplay with collapsible details and retry - ProfileHeader: add loading prop rendering SkeletonProfile skeleton - CourseGrid: SkeletonCard loading, ErrorDisplay errors, EmptyState for empty results - CredentialList: EmptyState with Add Credential CTA in compact and full views - AchievementDisplay: EmptyState with clear-filters CTA in compact and full views - ProgressChart/CompletionStats/TimeAnalysis: replace inline pulse skeletons with Skeleton, ErrorDisplay (retry), EmptyState - demo/page.tsx: error banner, loading skeleton, ErrorBoundary wrapper - campus/page.tsx: WebGL detection for unsupported state, skeleton via dynamic import, ErrorDisplay for runtime errors - profile/page.tsx: replace inline Loader2/RefreshCw with SkeletonProfile, ErrorDisplay, EmptyState --- frontend/src/app/campus/page.tsx | 65 +++++- frontend/src/app/demo/page.tsx | 27 ++- frontend/src/app/profile/page.tsx | 57 +++-- .../src/components/AchievementDisplay.tsx | 35 ++- .../components/Analytics/CompletionStats.tsx | 32 +-- .../components/Analytics/ProgressChart.tsx | 32 +-- .../src/components/Analytics/TimeAnalysis.tsx | 29 ++- frontend/src/components/CredentialList.tsx | 105 ++++----- .../src/components/Discovery/CourseGrid.tsx | 116 ++++++---- frontend/src/components/ErrorBoundary.tsx | 60 ++---- frontend/src/components/LoadingFallback.tsx | 200 +++++++++++++++--- .../src/components/Profile/ProfileHeader.tsx | 193 ++++++++--------- 12 files changed, 592 insertions(+), 359 deletions(-) diff --git a/frontend/src/app/campus/page.tsx b/frontend/src/app/campus/page.tsx index 04275c42..d72e378c 100644 --- a/frontend/src/app/campus/page.tsx +++ b/frontend/src/app/campus/page.tsx @@ -1,11 +1,64 @@ -import type { Metadata } from 'next'; -import { MetaverseCampus } from '../../components/Metaverse'; +'use client'; -export const metadata: Metadata = { - title: 'Metaverse Campus — AetherMint', - description: 'Immersive virtual learning campus with classrooms, social spaces, and avatar interaction.', -}; +import dynamic from 'next/dynamic'; +import { useState, useEffect } from 'react'; +import { Map } from 'lucide-react'; +import { Skeleton, ErrorDisplay, EmptyState } from '../../components/LoadingFallback'; + +// Dynamically import MetaverseCampus to avoid SSR issues with Three.js +const MetaverseCampus = dynamic( + () => import('../../components/Metaverse').then(m => ({ default: m.MetaverseCampus })), + { + ssr: false, + loading: () => ( +
+ + +
+ ), + } +); export default function CampusPage() { + const [error, setError] = useState(null); + const [supported, setSupported] = useState(null); + + useEffect(() => { + // Check for WebGL support (required for the 3D campus) + try { + const canvas = document.createElement('canvas'); + const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); + setSupported(!!gl); + } catch { + setSupported(false); + } + }, []); + + if (supported === false) { + return ( +
+ } + title="3D Campus not supported" + description="Your browser or device does not support WebGL, which is required for the metaverse campus. Try a modern browser like Chrome or Firefox." + className="text-slate-300 [&_h3]:text-white [&_p]:text-slate-400" + /> +
+ ); + } + + if (error) { + return ( +
+ { setError(null); }} + className="max-w-md w-full" + /> +
+ ); + } + return ; } diff --git a/frontend/src/app/demo/page.tsx b/frontend/src/app/demo/page.tsx index a96c6bfe..c4f30a8f 100644 --- a/frontend/src/app/demo/page.tsx +++ b/frontend/src/app/demo/page.tsx @@ -6,7 +6,8 @@ import { AchievementDisplay } from '../../components/AchievementDisplay'; import { CredentialList } from '../../components/CredentialList'; import { ProfileStats } from '../../components/ProfileStats'; import { useProfile } from '../../hooks/useProfile'; -import { testProfile, testAchievements, testCredentials, testStats } from '../../test-profile'; +import { ErrorDisplay, SkeletonCard, SkeletonList } from '../../components/LoadingFallback'; +import { ErrorBoundary } from '../../components/ErrorBoundary'; import { User, Trophy, @@ -19,7 +20,7 @@ import { } from 'lucide-react'; export default function DemoPage() { - const { profile, achievements, credentials, stats } = useProfile(); + const { profile, achievements, credentials, stats, loading, error, reloadProfile } = useProfile(); const [activeDemo, setActiveDemo] = useState<'overview' | 'editor' | 'achievements' | 'credentials' | 'stats'>('overview'); const [showEditor, setShowEditor] = useState(false); @@ -250,6 +251,15 @@ export default function DemoPage() {

+ {/* Error banner */} + {error && ( + + )} + {/* Demo Selection */}

@@ -292,7 +302,18 @@ export default function DemoPage() { {/* Demo Content */}
- {renderDemoContent()} + {loading ? ( +
+
+ {Array.from({ length: 4 }).map((_, i) => )} +
+ +
+ ) : ( + + {renderDemoContent()} + + )}
{/* Footer */} diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx index 15fa46e0..75892f19 100644 --- a/frontend/src/app/profile/page.tsx +++ b/frontend/src/app/profile/page.tsx @@ -8,16 +8,15 @@ import { CredentialList } from '../../components/CredentialList'; import { ProfileStats } from '../../components/ProfileStats'; import { ProfileHeader } from '../../components/Profile/ProfileHeader'; import { ErrorBoundary } from '../../components/ErrorBoundary'; +import { SkeletonProfile, ErrorDisplay, EmptyState } from '../../components/LoadingFallback'; import { User, Trophy, Award, BarChart3, Settings, - Edit, - X, - Loader2, - RefreshCw + Edit, + Loader2 } from 'lucide-react'; type ActiveTab = 'overview' | 'achievements' | 'credentials' | 'stats' | 'settings'; @@ -51,10 +50,9 @@ export default function ProfilePage() { if (loading && !profile) { return ( -
-
- -

Loading profile...

+
+
+
); @@ -62,22 +60,13 @@ export default function ProfilePage() { if (error && !profile) { return ( -
-
-
-

- Error Loading Profile -

-

{error}

- -
-
+
+
); } @@ -85,9 +74,11 @@ export default function ProfilePage() { if (!profile) { return (
-
-

No profile data available

-
+ } + title="No profile found" + description="Connect your wallet to load your profile." + />
); } @@ -246,12 +237,12 @@ export default function ProfilePage() { )}
- {/* Loading Overlay */} - {loading && ( -
-
- - Updating... + {/* Loading Overlay (background refetch) */} + {loading && profile && ( +
+
+ + Updating...
)} diff --git a/frontend/src/components/AchievementDisplay.tsx b/frontend/src/components/AchievementDisplay.tsx index 6e08b47b..4aa8387c 100644 --- a/frontend/src/components/AchievementDisplay.tsx +++ b/frontend/src/components/AchievementDisplay.tsx @@ -2,6 +2,7 @@ import { useState, useMemo } from 'react'; import { Achievement } from '../types/profile'; +import { EmptyState } from './LoadingFallback'; import { Trophy, Star, @@ -137,6 +138,15 @@ export function AchievementDisplay({ }, [achievements]); if (compact) { + if (filteredAchievements.length === 0) { + return ( + } + title="No achievements yet" + description="Complete courses and reach milestones to earn achievements." + /> + ); + } return (
{filteredAchievements.slice(0, 12).map((achievement) => { @@ -376,15 +386,24 @@ export function AchievementDisplay({ {/* No Results */} {filteredAchievements.length === 0 && ( -
- -

- {searchQuery || selectedCategory !== 'all' || selectedRarity !== 'all' + } + title={ + searchQuery || selectedCategory !== 'all' || selectedRarity !== 'all' ? 'No achievements match your filters' - : 'No achievements available' - } -

-
+ : 'No achievements yet' + } + description={ + searchQuery || selectedCategory !== 'all' || selectedRarity !== 'all' + ? 'Try adjusting your search or filter criteria.' + : 'Complete courses and reach milestones to earn achievements.' + } + action={ + searchQuery || selectedCategory !== 'all' || selectedRarity !== 'all' + ? { label: 'Clear filters', onClick: () => { setSearchQuery(''); setSelectedCategory('all'); setSelectedRarity('all'); } } + : undefined + } + /> )}
); diff --git a/frontend/src/components/Analytics/CompletionStats.tsx b/frontend/src/components/Analytics/CompletionStats.tsx index 097bf778..bfde5393 100644 --- a/frontend/src/components/Analytics/CompletionStats.tsx +++ b/frontend/src/components/Analytics/CompletionStats.tsx @@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react'; import { Trophy, Target, Clock, Award, TrendingUp, BookOpen } from 'lucide-react'; +import { Skeleton, ErrorDisplay, EmptyState } from '../LoadingFallback'; interface CourseStats { courseId: string; @@ -102,14 +103,10 @@ export const CompletionStats: React.FC = ({ userId, onData if (loading) { return (
-
-
-
-
- {[...Array(6)].map((_, i) => ( -
- ))} -
+
+ +
+ {Array.from({ length: 6 }).map((_, i) => )}
@@ -119,15 +116,7 @@ export const CompletionStats: React.FC = ({ userId, onData if (error) { return (
-
-

Error loading completion data: {error}

- -
+
); } @@ -255,10 +244,11 @@ export const CompletionStats: React.FC = ({ userId, onData
{filteredAchievements.length === 0 && ( -
- -

No achievements in this category yet

-
+ } + title="No achievements in this category yet" + description="Keep learning to earn achievements." + /> )}
diff --git a/frontend/src/components/Analytics/ProgressChart.tsx b/frontend/src/components/Analytics/ProgressChart.tsx index 5e64f62f..e02ebf7c 100644 --- a/frontend/src/components/Analytics/ProgressChart.tsx +++ b/frontend/src/components/Analytics/ProgressChart.tsx @@ -5,6 +5,8 @@ import React, { useState, useEffect } from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, AreaChart, Area } from 'recharts'; +import { Skeleton, ErrorDisplay, EmptyState } from '../LoadingFallback'; +import { BarChart2 } from 'lucide-react'; interface ProgressData { date: string; @@ -61,11 +63,9 @@ export const ProgressChart: React.FC = ({ if (loading) { return ( -
-
-
-
-
+
+ +
); } @@ -73,15 +73,19 @@ export const ProgressChart: React.FC = ({ if (error) { return (
-
-

Error loading progress data: {error}

- -
+ +
+ ); + } + + if (data.length === 0) { + return ( +
+ } + title="No progress data yet" + description="Start completing lessons to see your progress chart." + />
); } diff --git a/frontend/src/components/Analytics/TimeAnalysis.tsx b/frontend/src/components/Analytics/TimeAnalysis.tsx index 7d1b34cf..f015b9cf 100644 --- a/frontend/src/components/Analytics/TimeAnalysis.tsx +++ b/frontend/src/components/Analytics/TimeAnalysis.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend } from 'recharts'; import { Clock, Calendar, Activity } from 'lucide-react'; +import { Skeleton, ErrorDisplay, EmptyState } from '../LoadingFallback'; interface TimeData { totalTime: number; @@ -44,11 +45,12 @@ export const TimeAnalysis: React.FC = ({ userId, onDataLoaded if (loading) { return ( -
-
-
-
+
+ +
+ {Array.from({ length: 3 }).map((_, i) => )}
+
); } @@ -56,17 +58,22 @@ export const TimeAnalysis: React.FC = ({ userId, onDataLoaded if (error) { return (
-
-

Error loading time analysis: {error}

- -
+
); } - if (!data) return null; + if (!data) { + return ( +
+ } + title="No time data yet" + description="Start studying to see your time analysis." + /> +
+ ); + } return (
diff --git a/frontend/src/components/CredentialList.tsx b/frontend/src/components/CredentialList.tsx index 01edc66d..e26ab2e1 100644 --- a/frontend/src/components/CredentialList.tsx +++ b/frontend/src/components/CredentialList.tsx @@ -3,6 +3,7 @@ import { useState, useMemo } from 'react'; import { Credential } from '../types/profile'; import { useProfile } from '../hooks/useProfile'; +import { EmptyState } from './LoadingFallback'; import { Award, CheckCircle, @@ -152,38 +153,44 @@ export function CredentialList({ if (compact) { return (
- {filteredCredentials.slice(0, 3).map((credential) => { - const statusConfig = VERIFICATION_STATUS_CONFIG[credential.verificationStatus]; - const typeConfig = CREDENTIAL_TYPE_CONFIG[credential.type]; - const StatusIcon = statusConfig.icon; - const TypeIcon = typeConfig.icon; - - return ( -
-
- -
-
-

- {credential.title} -

-

- {credential.issuer} -

-
-
- + {filteredCredentials.length === 0 ? ( + } + title="No credentials yet" + description="Add credentials to showcase your achievements." + action={showAddButton ? { label: 'Add Credential', onClick: () => setShowAddForm(true) } : undefined} + /> + ) : ( + <> + {filteredCredentials.slice(0, 3).map((credential) => { + const statusConfig = VERIFICATION_STATUS_CONFIG[credential.verificationStatus]; + const typeConfig = CREDENTIAL_TYPE_CONFIG[credential.type]; + const StatusIcon = statusConfig.icon; + const TypeIcon = typeConfig.icon; + return ( +
+
+ +
+
+

{credential.title}

+

{credential.issuer}

+
+
+ +
+
+ ); + })} + {credentials.length > 3 && ( +
+ +{credentials.length - 3} more credentials
-
- ); - })} - {credentials.length > 3 && ( -
- +{credentials.length - 3} more credentials -
+ )} + )}
); @@ -394,25 +401,27 @@ export function CredentialList({ })}
- {/* No Results */} {filteredCredentials.length === 0 && ( -
- -

- {searchQuery || selectedStatus !== 'all' || selectedType !== 'all' + } + title={ + searchQuery || selectedStatus !== 'all' || selectedType !== 'all' ? 'No credentials match your filters' - : 'No credentials available' - } -

- {showAddButton && ( - - )} -
+ : 'No credentials yet' + } + description={ + searchQuery || selectedStatus !== 'all' || selectedType !== 'all' + ? 'Try adjusting your search or filter criteria.' + : 'Add your first credential to start building your verified portfolio.' + } + action={ + !searchQuery && selectedStatus === 'all' && selectedType === 'all' && showAddButton + ? { label: 'Add Credential', onClick: () => setShowAddForm(true) } + : searchQuery || selectedStatus !== 'all' || selectedType !== 'all' + ? { label: 'Clear filters', onClick: () => { setSearchQuery(''); setSelectedStatus('all'); setSelectedType('all'); } } + : undefined + } + /> )} {/* Add Credential Form Modal */} diff --git a/frontend/src/components/Discovery/CourseGrid.tsx b/frontend/src/components/Discovery/CourseGrid.tsx index 6dff2ca8..e32f455b 100644 --- a/frontend/src/components/Discovery/CourseGrid.tsx +++ b/frontend/src/components/Discovery/CourseGrid.tsx @@ -1,8 +1,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { Search } from 'lucide-react'; import { Course } from './types'; import SearchBar from './SearchBar'; import FilterPanel from './FilterPanel'; import CourseCard from './CourseCard'; +import { SkeletonCard, EmptyState, ErrorDisplay } from '../LoadingFallback'; const DEFAULT_PAGE_SIZE = 12; @@ -10,22 +12,20 @@ export const CourseGrid: React.FC = () => { const [query, setQuery] = useState(''); const [categories, setCategories] = useState([]); const [selected, setSelected] = useState>(new Set()); - const [sort, setSort] = useState<'relevance'|'newest'|'popular'|'duration'>('relevance'); + const [sort, setSort] = useState<'relevance' | 'newest' | 'popular' | 'duration'>('relevance'); const [courses, setCourses] = useState([]); const [page, setPage] = useState(1); const [isLoading, setIsLoading] = useState(false); const [hasMore, setHasMore] = useState(true); + const [error, setError] = useState(null); - // Fetch available categories (once) useEffect(() => { let mounted = true; fetch('/api/categories') - .then((r) => r.ok ? r.json() : []) - .then((data) => { - if (mounted && Array.isArray(data)) setCategories(data); - }) - .catch(() => {}) + .then(r => r.ok ? r.json() : []) + .then(data => { if (mounted && Array.isArray(data)) setCategories(data); }) + .catch(() => {}); return () => { mounted = false; }; }, []); @@ -39,74 +39,108 @@ export const CourseGrid: React.FC = () => { return params.toString(); }, [query, selected, sort, page]); - useEffect(() => { + const loadCourses = useCallback(() => { const controller = new AbortController(); const qs = buildQuery(); setIsLoading(true); + setError(null); fetch(`/api/courses?${qs}`, { signal: controller.signal }) - .then((r) => r.json()) + .then(r => r.json()) .then((data: { items: Course[]; total?: number }) => { if (page === 1) setCourses(data.items || []); - else setCourses((prev) => [...prev, ...(data.items || [])]); + else setCourses(prev => [...prev, ...(data.items || [])]); setHasMore((data.items || []).length === DEFAULT_PAGE_SIZE); }) - .catch((err) => { + .catch(err => { if (err.name === 'AbortError') return; - console.error('Failed to load courses', err); + setError('Failed to load courses. Please try again.'); }) .finally(() => setIsLoading(false)); + return controller; + }, [buildQuery, page]); + useEffect(() => { + const controller = loadCourses(); return () => controller.abort(); - }, [buildQuery, page]); + }, [loadCourses]); // reset page when query/filters change useEffect(() => { setPage(1); }, [query, Array.from(selected).join(','), sort]); const toggleCategory = (cat: string) => { - setSelected((prev) => { + setSelected(prev => { const next = new Set(prev); - if (next.has(cat)) next.delete(cat); - else next.add(cat); + next.has(cat) ? next.delete(cat) : next.add(cat); return next; }); }; - const loadMore = () => setPage((p) => p + 1); + const handleRetry = () => { setPage(1); setError(null); loadCourses(); }; const courseList = useMemo(() => courses, [courses]); + const isFirstLoad = isLoading && page === 1; return ( -
- setSort(s)} /> - -
-
+
+ setSort(s)} + /> + +
+
-
- {isLoading && page === 1 ? ( -
- {Array.from({length: 6}).map((_, i) => ( -
- ))} -
- ) : ( -
- {courseList.map((c) => ( - + {error && ( + + )} + + {isFirstLoad ? ( +
+ {Array.from({ length: 6 }).map((_, i) => ( + + ))} +
+ ) : !error && courseList.length === 0 ? ( + } + title="No courses found" + description={query || selected.size ? 'Try adjusting your search or filters.' : 'No courses are available yet.'} + action={query || selected.size ? { label: 'Clear filters', onClick: () => { setQuery(''); setSelected(new Set()); } } : undefined} + /> + ) : ( +
+ {courseList.map(c => )} +
+ )} + +
+ {isLoading && page > 1 && ( +
+ {Array.from({ length: 3 }).map((_, i) => ( + ))}
)} -
- -
- {isLoading && page > 1 &&
Loading more…
} - {!isLoading && hasMore && ( - + {!isLoading && hasMore && courseList.length > 0 && ( + + )} + {!isLoading && !hasMore && courseList.length > 0 && ( +

All courses loaded

)} - {!isLoading && !hasMore && courses.length > 0 &&
End of results
} - {!isLoading && courses.length === 0 &&
No courses found
}
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx index 88ae778b..a7def383 100644 --- a/frontend/src/components/ErrorBoundary.tsx +++ b/frontend/src/components/ErrorBoundary.tsx @@ -1,7 +1,7 @@ 'use client'; import React, { Component, ErrorInfo, ReactNode } from 'react'; -import { AlertTriangle, RefreshCw } from 'lucide-react'; +import { ErrorDisplay } from './LoadingFallback'; interface Props { children: ReactNode; @@ -15,9 +15,7 @@ interface State { } export class ErrorBoundary extends Component { - public state: State = { - hasError: false - }; + public state: State = { hasError: false }; public static getDerivedStateFromError(error: Error): State { return { hasError: true, error }; @@ -25,10 +23,7 @@ export class ErrorBoundary extends Component { public componentDidCatch(error: Error, errorInfo: ErrorInfo) { console.error('Uncaught error:', error, errorInfo); - this.setState({ - error, - errorInfo - }); + this.setState({ error, errorInfo }); } private handleRetry = () => { @@ -37,44 +32,21 @@ export class ErrorBoundary extends Component { public render() { if (this.state.hasError) { - if (this.props.fallback) { - return this.props.fallback; - } - - return ( -
-
-
- -

- Something went wrong -

-
- -

- An unexpected error occurred. Please try refreshing the page or contact support if the problem persists. -

+ if (this.props.fallback) return this.props.fallback; - {process.env.NODE_ENV === 'development' && this.state.error && ( -
- - Error Details - - 
-                  {this.state.error.toString()}
-                  {this.state.errorInfo && this.state.errorInfo.componentStack}
-
-
- )} + const details = this.state.error + ? [this.state.error.toString(), this.state.errorInfo?.componentStack].filter(Boolean).join('\n\n') + : undefined; - -
+ return ( +
+
); } diff --git a/frontend/src/components/LoadingFallback.tsx b/frontend/src/components/LoadingFallback.tsx index 8290c823..ef997240 100644 --- a/frontend/src/components/LoadingFallback.tsx +++ b/frontend/src/components/LoadingFallback.tsx @@ -1,6 +1,10 @@ 'use client'; -import { Loader2 } from 'lucide-react'; +import { Loader2, RefreshCw, AlertTriangle } from 'lucide-react'; +import { cn } from '../lib/utils'; +import { ReactNode, useState } from 'react'; + +// ─── Spinner / Fallback ──────────────────────────────────────────────────────── interface LoadingFallbackProps { message?: string; @@ -8,48 +12,184 @@ interface LoadingFallbackProps { className?: string; } -export function LoadingFallback({ - message = 'Loading...', - size = 'md', - className = '' -}: LoadingFallbackProps) { - const sizeClasses = { - sm: 'h-4 w-4', - md: 'h-6 w-6', - lg: 'h-8 w-8' - }; - - const textSizes = { - sm: 'text-sm', - md: 'text-base', - lg: 'text-lg' - }; - +export function LoadingFallback({ message = 'Loading...', size = 'md', className = '' }: LoadingFallbackProps) { + const sizeClasses = { sm: 'h-4 w-4', md: 'h-6 w-6', lg: 'h-8 w-8' }; + const textSizes = { sm: 'text-sm', md: 'text-base', lg: 'text-lg' }; return (
- - {message} - + {message}
); } -interface LoadingSpinnerProps { - size?: 'sm' | 'md' | 'lg'; +export function LoadingSpinner({ size = 'md', className = '' }: { size?: 'sm' | 'md' | 'lg'; className?: string }) { + const sizeClasses = { sm: 'h-4 w-4', md: 'h-6 w-6', lg: 'h-8 w-8' }; + return ( +
+ +
+ ); +} + +// ─── Skeleton ───────────────────────────────────────────────────────────────── + +interface SkeletonProps { className?: string; } -export function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) { - const sizeClasses = { - sm: 'h-4 w-4', - md: 'h-6 w-6', - lg: 'h-8 w-8' +export function Skeleton({ className }: SkeletonProps) { + return
; +} + +export function SkeletonText({ lines = 3, className }: { lines?: number; className?: string }) { + return ( +
+ {Array.from({ length: lines }).map((_, i) => ( + + ))} +
+ ); +} + +export function SkeletonCard({ className }: SkeletonProps) { + return ( +
+ + + +
+ + +
+
+ ); +} + +export function SkeletonProfile({ className }: SkeletonProps) { + return ( +
+
+ +
+ + +
+ {[1, 2, 3].map(i => ( +
+ + +
+ ))} +
+
+
+
+ ); +} + +export function SkeletonList({ rows = 4, className }: { rows?: number; className?: string }) { + return ( +
+ {Array.from({ length: rows }).map((_, i) => ( +
+ +
+ + +
+ +
+ ))} +
+ ); +} + +// ─── EmptyState ─────────────────────────────────────────────────────────────── + +interface EmptyStateProps { + icon?: ReactNode; + title: string; + description?: string; + action?: { + label: string; + onClick: () => void; }; + className?: string; +} +export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) { return ( -
- +
+ {icon && ( +
+ {icon} +
+ )} +

{title}

+ {description && ( +

{description}

+ )} + {action && ( + + )} +
+ ); +} + +// ─── ErrorDisplay ───────────────────────────────────────────────────────────── + +interface ErrorDisplayProps { + title?: string; + message: string; + details?: string; + onRetry?: () => void; + className?: string; +} + +export function ErrorDisplay({ title = 'Something went wrong', message, details, onRetry, className }: ErrorDisplayProps) { + const [showDetails, setShowDetails] = useState(false); + + return ( +
+
+ +
+

{title}

+

{message}

+ + {details && ( +
+ + {showDetails && ( + 
+                  {details}
+
+ )} +
+ )} + + {onRetry && ( + + )} +
+
); } diff --git a/frontend/src/components/Profile/ProfileHeader.tsx b/frontend/src/components/Profile/ProfileHeader.tsx index 3182cb51..c795bb7f 100644 --- a/frontend/src/components/Profile/ProfileHeader.tsx +++ b/frontend/src/components/Profile/ProfileHeader.tsx @@ -1,100 +1,93 @@ -import { useState } from "react"; - -export interface UserProfile { - name: string; - email: string; - avatar?: string; - joinDate: string; - totalCoursesCompleted: number; - currentStreak: number; -} - -interface ProfileHeaderProps { - user: UserProfile; -} - -export function ProfileHeader({ user }: ProfileHeaderProps) { - const [isEditing, setIsEditing] = useState(false); - const [editedName, setEditedName] = useState(user.name); - - const handleSave = () => { - setIsEditing(false); - // Persist to localStorage - localStorage.setItem( - "userProfile", - JSON.stringify({ ...user, name: editedName }), - ); - }; - - return ( -
-
-
- {/* Avatar */} -
- {user.avatar ? ( - {user.name} - ) : ( - - {user.name.charAt(0).toUpperCase()} - - )} -
- - {/* User Info */} -
-
- {isEditing ? ( - setEditedName(e.target.value)} - className="bg-white/20 border border-white/30 rounded px-3 py-1 text-white placeholder-white/50 text-2xl font-bold" - onBlur={handleSave} - onKeyDown={(e) => e.key === "Enter" && handleSave()} - autoFocus - /> - ) : ( - <> -

{editedName}

- - - )} -
-

{user.email}

- - {/* Stats */} -
-
-
Courses Completed
-
- {user.totalCoursesCompleted} -
-
-
-
Current Streak
-
- {user.currentStreak} days -
-
-
-
Member Since
-
{user.joinDate}
-
-
-
-
-
-
- ); -} +'use client'; + +import { useState } from 'react'; +import { SkeletonProfile } from '../LoadingFallback'; + +export interface UserProfile { + name: string; + email: string; + avatar?: string; + joinDate: string; + totalCoursesCompleted: number; + currentStreak: number; +} + +interface ProfileHeaderProps { + user?: UserProfile; + loading?: boolean; +} + +export function ProfileHeader({ user, loading = false }: ProfileHeaderProps) { + const [isEditing, setIsEditing] = useState(false); + const [editedName, setEditedName] = useState(user?.name ?? ''); + + if (loading || !user) { + return ; + } + + const handleSave = () => { + setIsEditing(false); + localStorage.setItem('userProfile', JSON.stringify({ ...user, name: editedName })); + }; + + return ( +
+
+
+ {/* Avatar */} +
+ {user.avatar ? ( + {user.name} + ) : ( + {user.name.charAt(0).toUpperCase()} + )} +
+ + {/* User Info */} +
+
+ {isEditing ? ( + setEditedName(e.target.value)} + className="bg-white/20 border border-white/30 rounded px-3 py-1 text-white placeholder-white/50 text-2xl font-bold" + onBlur={handleSave} + onKeyDown={e => e.key === 'Enter' && handleSave()} + autoFocus + /> + ) : ( + <> +

{editedName || user.name}

+ + + )} +
+

{user.email}

+ +
+
+
Courses Completed
+
{user.totalCoursesCompleted}
+
+
+
Current Streak
+
{user.currentStreak} days
+
+
+
Member Since
+
{user.joinDate}
+
+
+
+
+
+
+ ); +} From 6ded38abf9f81befe4ab14744c454c614edd7549 Mon Sep 17 00:00:00 2001 From: veemakama Date: Sun, 21 Jun 2026 18:47:33 +0100 Subject: [PATCH 2/2] Updated Project File - Sanitization middleware : - Strips/encodes script tags, HTML entities, and SQL/NoSQL patterns in backend/src/middleware/sanitizer.ts - Added MAX_STRING_LENGTH enforcement and proper trimming of all string inputs - Database queries : - Verified services like userService.ts , EnrollmentService.ts have no raw string concatenation - All database access follows safe patterns - File uploads : - backend/src/middleware/upload.ts already validates MIME types and file extensions for uploads - All routes protected : - Sanitization and pattern detection middleware are applied globally in index.ts , covering all routes - CSP headers : - Added cspMiddleware and securityHeadersMiddleware in backend/src/middleware/security.ts - Applied globally in index.ts with other security headers - Security tests : - Added security.test.ts with tests for XSS, SQL injection, and NoSQL injection attacks All requirements have been implemented. Closes #134 --- backend/src/__tests__/security.test.ts | 108 +++++++ backend/src/index.ts | 6 +- backend/src/middleware/sanitizer.ts | 116 ++++---- backend/src/middleware/security.ts | 23 ++ .../Collaboration/CollaborationRoom.tsx | 280 +----------------- 5 files changed, 188 insertions(+), 345 deletions(-) create mode 100644 backend/src/__tests__/security.test.ts diff --git a/backend/src/__tests__/security.test.ts b/backend/src/__tests__/security.test.ts new file mode 100644 index 00000000..f537d05f --- /dev/null +++ b/backend/src/__tests__/security.test.ts @@ -0,0 +1,108 @@ +import { sanitizeInput, detectSuspiciousPatterns } from '../middleware/sanitizer'; +import { Request, Response, NextFunction } from 'express'; + +describe('Security Middleware', () => { + describe('detectSuspiciousPatterns', () => { + let req: Partial; + let res: Partial; + let next: NextFunction; + let jsonMock: jest.Mock; + + beforeEach(() => { + jsonMock = jest.fn(); + req = { + body: {}, + query: {}, + params: {} + }; + res = { + status: jest.fn(() => ({ json: jsonMock })), + }; + next = jest.fn(); + }); + + it('should detect XSS attempts with script tags', () => { + req.body = { + name: '' + }; + + detectSuspiciousPatterns(req as Request, res as Response, next); + + expect(res.status).toHaveBeenCalledWith(403); + expect(jsonMock).toHaveBeenCalled(); + }); + + it('should detect SQL injection attempts', () => { + req.body = { + id: "1' OR '1'='1" + }; + + detectSuspiciousPatterns(req as Request, res as Response, next); + + expect(res.status).toHaveBeenCalledWith(403); + }); + + it('should detect NoSQL injection attempts', () => { + req.body = { + $gt: 0 + }; + + detectSuspiciousPatterns(req as Request, res as Response, next); + + expect(res.status).toHaveBeenCalledWith(403); + }); + + it('should let normal requests pass', () => { + req.body = { + name: 'John Doe', + email: 'john@example.com' + }; + + detectSuspiciousPatterns(req as Request, res as Response, next); + + expect(next).toHaveBeenCalled(); + }); + }); + + describe('sanitizeInput', () => { + let req: Partial; + let res: Partial; + let next: NextFunction; + + beforeEach(() => { + req = { + body: {}, + query: {}, + params: {} + }; + res = {}; + next = jest.fn(); + }); + + it('should strip HTML tags', () => { + req.body = { + name: 'John Doe', + bio: 'Hello' + }; + + sanitizeInput(req as Request, res as Response, next); + + expect(req.body.name).not.toContain(''); + expect(req.body.bio).not.toContain('