Add react hooks & components to split up the profile page. Learning how to separate hooks

2025-05-20 15:41:32 -05:00
parent 3dffa71a89
commit 408bb140ba
21 changed files with 679 additions and 269 deletions
--- a/src/components/default/profile/AvatarUpload.tsx
+++ b/src/components/default/profile/AvatarUpload.tsx
@ -0,0 +1,71 @@
+import { useFileUpload } from '@/lib/hooks/useFileUpload';
+import { useAvatar } from '@/lib/hooks/useAvatar';
+import type { Profile } from '@/utils/supabase';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui';
+import { Pencil, User, Loader2 } from 'lucide-react';
+
+type AvatarUploadProps = {
+  profile?: Profile;
+  onAvatarUploaded: (path: string) => Promise<void>;
+};
+
+export const AvatarUpload = ({ profile, onAvatarUploaded }: AvatarUploadProps) => {
+  const { avatarUrl } = useAvatar(profile);
+  const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();
+
+  const handleAvatarClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    
+    const result = await uploadToStorage(file, 'avatars');
+    if (result.success && result.path) {
+      await onAvatarUploaded(result.path);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative group cursor-pointer mb-4" onClick={handleAvatarClick}>
+        <Avatar className="h-32 w-32">
+          {avatarUrl ? (
+            <AvatarImage src={avatarUrl} alt={profile?.full_name ?? 'User'} />
+          ) : (
+            <AvatarFallback className="text-2xl">
+              {profile?.full_name 
+                ? profile.full_name.split(' ').map(n => n[0]).join('').toUpperCase() 
+                : <User size={32} />}
+            </AvatarFallback>
+          )}
+        </Avatar>
+        <div className="absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
+          transition-all flex items-center justify-center"
+        >
+          <Pencil className="text-white opacity-0 group-hover:opacity-100
+            transition-opacity" size={24}
+          />
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleFileChange}
+          disabled={isUploading}
+        />
+      </div>
+      {isUploading && (
+        <div className="flex items-center text-sm text-gray-500 mt-2">
+          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+          Uploading...
+        </div>
+      )}
+      <p className="text-sm text-gray-500 mt-2">
+        Click on the avatar to upload a new image
+      </p>
+    </div>
+  );
+}