refactor: remove useAuthenticatedImage hook and update avatar image handling across components

Author: eWloYW8

app/(main)/contests/page.tsx

@@ -20,7 +20,6 @@ import { ResponsiveContainer, LineChart as RechartsLineChart, CartesianGrid, XAx
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
 import { UserProfileCard } from '@/components/shared/user-profile-card';
-import { useAuthenticatedImage } from '@/hooks/use-authenticated-image';
 import { getInitials } from '@/lib/utils';
 
 const fetcher = (url: string) => api.get(url).then(res => res.data.data);
@@ -174,7 +173,6 @@ function ContestTrend({ contestId }: { contestId: string }) {
 }
 
 function LeaderboardRow({ entry, rank, problemIds }: { entry: LeaderboardEntry, rank: number, problemIds: string[] }) {
-    const authenticatedAvatarUrl = useAuthenticatedImage(entry.avatar_url);
 
     const getRankColor = (rank: number) => {
         if (rank === 1) return 'text-yellow-400';
@@ -196,7 +194,7 @@ function LeaderboardRow({ entry, rank, problemIds }: { entry: LeaderboardEntry,
                     <HoverCardTrigger asChild>
                         <div className="flex items-center gap-3 cursor-pointer">
                             <Avatar className="h-8 w-8">
-                                <AvatarImage src={authenticatedAvatarUrl || undefined} alt={entry.nickname} />
+                                <AvatarImage src={entry.avatar_url} alt={entry.nickname} />
                                 <AvatarFallback>{getInitials(entry.nickname)}</AvatarFallback>
                             </Avatar>
                             <span className="font-medium">{entry.nickname}</span>

app/(main)/profile/page.tsx

@@ -15,7 +15,6 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { getInitials } from '@/lib/utils';
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useAuthenticatedImage } from '@/hooks/use-authenticated-image'; // 1. Import the hook
 
 const profileSchema = z.object({
   nickname: z.string().min(1, 'Nickname is required').max(50),
@@ -28,9 +27,6 @@ export default function ProfilePage() {
     const router = useRouter();
     const [isUploading, setIsUploading] = useState(false);
 
-    // 2. Use the hook here as well
-    const authenticatedAvatarUrl = useAuthenticatedImage(user?.avatar_url);
-
     const form = useForm<z.infer<typeof profileSchema>>({
         resolver: zodResolver(profileSchema),
         values: {
@@ -98,7 +94,7 @@ export default function ProfilePage() {
                 </CardHeader>
                 <CardContent className="flex flex-col items-center gap-4">
                     <Avatar className="h-32 w-32">
-                        <AvatarImage key={authenticatedAvatarUrl} src={authenticatedAvatarUrl || undefined} alt={user.nickname} />
+                        <AvatarImage src={user.avatar_url} alt={user.nickname} />
                         <AvatarFallback>{getInitials(user.nickname)}</AvatarFallback>
                     </Avatar>
                     <Input id="avatar-upload" type="file" accept="image/*" onChange={handleAvatarUpload} className="hidden" />

components/layout/user-nav.tsx

@@ -14,13 +14,10 @@ import { useAuth } from "@/hooks/use-auth";
 import { getInitials } from "@/lib/utils";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useAuthenticatedImage } from "@/hooks/use-authenticated-image"; // 1. Import the hook
 
 export function UserNav() {
   const { user, logout } = useAuth();
   const router = useRouter();
-  
-  const authenticatedAvatarUrl = useAuthenticatedImage(user?.avatar_url);
 
   const handleLogout = () => {
     logout();
@@ -36,7 +33,7 @@ export function UserNav() {
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
           <Avatar className="h-9 w-9">
-            <AvatarImage key={authenticatedAvatarUrl} src={authenticatedAvatarUrl || undefined} alt={user.nickname} />
+            <AvatarImage src={user.avatar_url} alt={user.nickname} />
             <AvatarFallback>{getInitials(user.nickname)}</AvatarFallback>
           </Avatar>
         </Button>

components/shared/user-profile-card.tsx

@@ -3,7 +3,6 @@
 import useSWR from 'swr';
 import api from '@/lib/api';
 import { User } from '@/lib/types';
-import { useAuthenticatedImage } from '@/hooks/use-authenticated-image';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { getInitials } from '@/lib/utils';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -17,7 +16,6 @@ interface UserProfileCardProps {
 
 export function UserProfileCard({ userId }: UserProfileCardProps) {
     const { data: user, error, isLoading } = useSWR<User>(`/users/${userId}`, fetcher);
-    const authenticatedAvatarUrl = useAuthenticatedImage(user?.avatar_url);
 
     if (isLoading) return <UserProfileCardSkeleton />;
     if (error || !user) return <div className="text-sm text-destructive">Could not load user profile.</div>;
@@ -26,7 +24,7 @@ export function UserProfileCard({ userId }: UserProfileCardProps) {
         <div className="flex flex-col gap-4">
             <div className="flex items-center gap-4">
                 <Avatar className="h-16 w-16">
-                    <AvatarImage src={authenticatedAvatarUrl || undefined} alt={user.nickname} />
+                    <AvatarImage src={user.avatar_url} alt={user.nickname} />
                     <AvatarFallback>{getInitials(user.nickname)}</AvatarFallback>
                 </Avatar>
                 <div className="flex flex-col">