feat: Update avatar upload logic

src/components/settings/AccountProfileTab.tsx

@@ -15,7 +15,7 @@ import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
 import { supabase } from '@/integrations/supabase/client';
 import { User, Upload, Trash2 } from 'lucide-react';
-import { SimplePhotoUpload } from './SimplePhotoUpload';
+import { PhotoUpload } from '@/components/upload/PhotoUpload';
 
 const profileSchema = z.object({
   username: z.string().min(3).max(30).regex(/^[a-zA-Z0-9_-]+$/),
@@ -34,6 +34,8 @@ export function AccountProfileTab() {
   const [loading, setLoading] = useState(false);
   const [avatarLoading, setAvatarLoading] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [avatarUrl, setAvatarUrl] = useState<string>(profile?.avatar_url || '');
+  const [avatarImageId, setAvatarImageId] = useState<string>(profile?.avatar_image_id || '');
 
   const form = useForm<ProfileFormData>({
     resolver: zodResolver(profileSchema),
@@ -83,16 +85,22 @@ export function AccountProfileTab() {
     }
   };
 
-  const handleAvatarUpload = async (imageId: string, imageUrl: string) => {
-    if (!user) return;
+  const handleAvatarUpload = async (urls: string[], imageId?: string) => {
+    if (!user || !urls[0]) return;
     
-    setAvatarLoading(true);
+    const newAvatarUrl = urls[0];
+    const newImageId = imageId || '';
+
+    // Update local state immediately
+    setAvatarUrl(newAvatarUrl);
+    setAvatarImageId(newImageId);
+
     try {
       const { error } = await supabase
         .from('profiles')
         .update({
-          avatar_image_id: imageId,
-          avatar_url: imageUrl,
+          avatar_url: newAvatarUrl,
+          avatar_image_id: newImageId,
           updated_at: new Date().toISOString()
         })
         .eq('user_id', user.id);
@@ -105,13 +113,14 @@ export function AccountProfileTab() {
         description: 'Your avatar has been successfully updated.'
       });
     } catch (error: any) {
+      // Revert local state on error
+      setAvatarUrl(profile?.avatar_url || '');
+      setAvatarImageId(profile?.avatar_image_id || '');
       toast({
         title: 'Error',
         description: error.message || 'Failed to update avatar',
         variant: 'destructive'
       });
-    } finally {
-      setAvatarLoading(false);
     }
   };
 
@@ -142,28 +151,20 @@ export function AccountProfileTab() {
       {/* Profile Picture */}
       <div className="space-y-4">
         <h3 className="text-lg font-medium">Profile Picture</h3>
-        <div className="flex items-center gap-6">
-          <Avatar className="w-20 h-20">
-            <AvatarImage src={profile?.avatar_url || undefined} />
-            <AvatarFallback className="text-lg">
-              {profile?.display_name?.[0] || profile?.username?.[0] || <User className="w-8 h-8" />}
-            </AvatarFallback>
-          </Avatar>
-          <div className="space-y-2">
-            <SimplePhotoUpload
-              onUpload={handleAvatarUpload}
-              disabled={avatarLoading}
-            >
-              <Button variant="outline" disabled={avatarLoading}>
-                <Upload className="w-4 h-4 mr-2" />
-                {avatarLoading ? 'Uploading...' : 'Change Avatar'}
-              </Button>
-            </SimplePhotoUpload>
-            <p className="text-sm text-muted-foreground">
-              JPG, PNG or GIF. Max size 5MB.
-            </p>
-          </div>
-        </div>
+        <PhotoUpload
+          variant="avatar"
+          maxFiles={1}
+          existingPhotos={avatarUrl ? [avatarUrl] : []}
+          onUploadComplete={handleAvatarUpload}
+          currentImageId={avatarImageId}
+          onError={(error) => {
+            toast({
+              title: "Upload Error",
+              description: error,
+              variant: "destructive"
+            });
+          }}
+        />
       </div>
 
       <Separator />