491 lines
19 KiB
JavaScript
491 lines
19 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import api from '../../utils/api';
|
|
import Navbar from '../../components/Navbar';
|
|
import MemberFooter from '../../components/MemberFooter';
|
|
import { Card } from '../../components/ui/card';
|
|
import { Button } from '../../components/ui/button';
|
|
import { Input } from '../../components/ui/input';
|
|
import { Textarea } from '../../components/ui/textarea';
|
|
import { Label } from '../../components/ui/label';
|
|
import { Switch } from '../../components/ui/switch';
|
|
import { User, Upload, X, Facebook, Instagram, Twitter, Linkedin, Camera, Save, Eye } from 'lucide-react';
|
|
import { useToast } from '../../hooks/use-toast';
|
|
|
|
const MemberProfile = () => {
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [profile, setProfile] = useState(null);
|
|
const [formData, setFormData] = useState({
|
|
social_media_facebook: '',
|
|
social_media_instagram: '',
|
|
social_media_twitter: '',
|
|
social_media_linkedin: '',
|
|
show_in_directory: false,
|
|
directory_email: '',
|
|
directory_bio: '',
|
|
directory_address: '',
|
|
directory_phone: '',
|
|
directory_partner_name: ''
|
|
});
|
|
const [previewImage, setPreviewImage] = useState(null);
|
|
const fileInputRef = useRef(null);
|
|
const { toast } = useToast();
|
|
|
|
useEffect(() => {
|
|
fetchProfile();
|
|
}, []);
|
|
|
|
const fetchProfile = async () => {
|
|
try {
|
|
const response = await api.get('/members/profile');
|
|
setProfile(response.data);
|
|
|
|
// Populate form with existing data
|
|
setFormData({
|
|
social_media_facebook: response.data.social_media_facebook || '',
|
|
social_media_instagram: response.data.social_media_instagram || '',
|
|
social_media_twitter: response.data.social_media_twitter || '',
|
|
social_media_linkedin: response.data.social_media_linkedin || '',
|
|
show_in_directory: response.data.show_in_directory || false,
|
|
directory_email: response.data.directory_email || '',
|
|
directory_bio: response.data.directory_bio || '',
|
|
directory_address: response.data.directory_address || '',
|
|
directory_phone: response.data.directory_phone || '',
|
|
directory_partner_name: response.data.directory_partner_name || ''
|
|
});
|
|
|
|
if (response.data.profile_photo_url) {
|
|
setPreviewImage(response.data.profile_photo_url);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch profile:', error);
|
|
toast({
|
|
title: "Error",
|
|
description: "Failed to load profile. Please try again.",
|
|
variant: "destructive"
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleInputChange = (e) => {
|
|
const { name, value, type, checked } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: type === 'checkbox' ? checked : value
|
|
}));
|
|
};
|
|
|
|
const handleSwitchChange = (checked) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
show_in_directory: checked
|
|
}));
|
|
};
|
|
|
|
const handlePhotoUpload = async (e) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
// Validate file type
|
|
if (!file.type.startsWith('image/')) {
|
|
toast({
|
|
title: "Invalid File",
|
|
description: "Please upload an image file (JPG, PNG, WebP, or GIF).",
|
|
variant: "destructive"
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Validate file size (50MB max)
|
|
if (file.size > 52428800) {
|
|
toast({
|
|
title: "File Too Large",
|
|
description: "Image must be smaller than 50MB.",
|
|
variant: "destructive"
|
|
});
|
|
return;
|
|
}
|
|
|
|
setUploading(true);
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const response = await api.post('/members/profile/upload-photo', formData, {
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data'
|
|
}
|
|
});
|
|
|
|
setPreviewImage(response.data.profile_photo_url);
|
|
toast({
|
|
title: "Success",
|
|
description: "Profile photo uploaded successfully!"
|
|
});
|
|
|
|
// Refresh profile
|
|
await fetchProfile();
|
|
} catch (error) {
|
|
console.error('Failed to upload photo:', error);
|
|
toast({
|
|
title: "Upload Failed",
|
|
description: error.response?.data?.detail || "Failed to upload photo. Please try again.",
|
|
variant: "destructive"
|
|
});
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
const handleDeletePhoto = async () => {
|
|
if (!window.confirm('Are you sure you want to delete your profile photo?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await api.delete('/members/profile/delete-photo');
|
|
setPreviewImage(null);
|
|
toast({
|
|
title: "Success",
|
|
description: "Profile photo deleted successfully."
|
|
});
|
|
|
|
await fetchProfile();
|
|
} catch (error) {
|
|
console.error('Failed to delete photo:', error);
|
|
toast({
|
|
title: "Error",
|
|
description: "Failed to delete photo. Please try again.",
|
|
variant: "destructive"
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
|
|
try {
|
|
await api.put('/members/profile', formData);
|
|
toast({
|
|
title: "Success",
|
|
description: "Profile updated successfully!"
|
|
});
|
|
|
|
await fetchProfile();
|
|
} catch (error) {
|
|
console.error('Failed to update profile:', error);
|
|
toast({
|
|
title: "Error",
|
|
description: "Failed to update profile. Please try again.",
|
|
variant: "destructive"
|
|
});
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Navbar />
|
|
<div className="max-w-4xl mx-auto px-6 py-12">
|
|
<div className="text-center py-20">
|
|
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Navbar />
|
|
|
|
<div className="max-w-4xl mx-auto px-6 py-12">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Member Profile
|
|
</h1>
|
|
<p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Enhance your profile with a photo and social media links.
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-8">
|
|
{/* Profile Photo Section */}
|
|
<Card className="p-8 bg-background border-[var(--neutral-800)] rounded-2xl">
|
|
<h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Profile Photo
|
|
</h2>
|
|
|
|
<div className="flex flex-col md:flex-row items-center gap-8">
|
|
<div className="relative">
|
|
{previewImage ? (
|
|
<div className="relative">
|
|
<img
|
|
src={previewImage}
|
|
alt="Profile"
|
|
className="w-40 h-40 rounded-full object-cover border-4 border-[var(--neutral-800)]"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
onClick={handleDeletePhoto}
|
|
className="absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full p-2 w-8 h-8"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="w-40 h-40 rounded-full bg-[var(--lavender-500)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
|
|
<User className="h-20 w-20 text-[var(--neutral-800)]" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
onChange={handlePhotoUpload}
|
|
accept="image/*"
|
|
className="hidden"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
disabled={uploading}
|
|
className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl px-6 py-3 flex items-center gap-2"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
{uploading ? (
|
|
<>
|
|
<Upload className="h-5 w-5 animate-spin" />
|
|
Uploading...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Camera className="h-5 w-5" />
|
|
{previewImage ? 'Change Photo' : 'Upload Photo'}
|
|
</>
|
|
)}
|
|
</Button>
|
|
<p className="text-sm text-[var(--purple-lavender)] mt-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
JPG, PNG, WebP, or GIF. Max 50MB.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Social Media Section */}
|
|
<Card className="p-8 bg-background border-[var(--neutral-800)] rounded-2xl">
|
|
<h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Social Media Links
|
|
</h2>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<Label className="flex items-center gap-2 text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
<Facebook className="h-4 w-4 text-[var(--blue-facebook)]" />
|
|
Facebook Profile URL
|
|
</Label>
|
|
<Input
|
|
type="url"
|
|
name="social_media_facebook"
|
|
value={formData.social_media_facebook}
|
|
onChange={handleInputChange}
|
|
placeholder="https://facebook.com/yourprofile"
|
|
className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="flex items-center gap-2 text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
<Instagram className="h-4 w-4 text-[var(--red-instagram)]" />
|
|
Instagram Profile URL
|
|
</Label>
|
|
<Input
|
|
type="url"
|
|
name="social_media_instagram"
|
|
value={formData.social_media_instagram}
|
|
onChange={handleInputChange}
|
|
placeholder="https://instagram.com/yourprofile"
|
|
className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="flex items-center gap-2 text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
<Twitter className="h-4 w-4 text-[var(--blue-twitter)]" />
|
|
Twitter/X Profile URL
|
|
</Label>
|
|
<Input
|
|
type="url"
|
|
name="social_media_twitter"
|
|
value={formData.social_media_twitter}
|
|
onChange={handleInputChange}
|
|
placeholder="https://twitter.com/yourprofile"
|
|
className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="flex items-center gap-2 text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
<Linkedin className="h-4 w-4 text-[var(--blue-linkedin)]" />
|
|
LinkedIn Profile URL
|
|
</Label>
|
|
<Input
|
|
type="url"
|
|
name="social_media_linkedin"
|
|
value={formData.social_media_linkedin}
|
|
onChange={handleInputChange}
|
|
placeholder="https://linkedin.com/in/yourprofile"
|
|
className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Directory Settings Section */}
|
|
<Card className="p-8 bg-background border-[var(--neutral-800)] rounded-2xl">
|
|
<h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Directory Settings
|
|
</h2>
|
|
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between p-4 bg-[var(--lavender-500)] rounded-xl">
|
|
<div className="flex-1">
|
|
<Label className="text-[var(--purple-ink)] font-medium flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
<Eye className="h-4 w-4 text-[var(--purple-lavender)]" />
|
|
Show in Members Directory
|
|
</Label>
|
|
<p className="text-sm text-[var(--purple-lavender)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Allow other members to see your profile in the directory
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={formData.show_in_directory}
|
|
onCheckedChange={handleSwitchChange}
|
|
className="data-[state=checked]:bg-[var(--purple-lavender)]"
|
|
/>
|
|
</div>
|
|
|
|
{formData.show_in_directory && (
|
|
<>
|
|
<div>
|
|
<Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Directory Email (visible to members)
|
|
</Label>
|
|
<Input
|
|
type="email"
|
|
name="directory_email"
|
|
value={formData.directory_email}
|
|
onChange={handleInputChange}
|
|
placeholder="public.email@example.com"
|
|
className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Bio (visible to members)
|
|
</Label>
|
|
<Textarea
|
|
name="directory_bio"
|
|
value={formData.directory_bio}
|
|
onChange={handleInputChange}
|
|
placeholder="Tell other members about yourself..."
|
|
rows={4}
|
|
className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Directory Address (optional)
|
|
</Label>
|
|
<Input
|
|
type="text"
|
|
name="directory_address"
|
|
value={formData.directory_address}
|
|
onChange={handleInputChange}
|
|
placeholder="123 Main St, City, State"
|
|
className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Directory Phone (optional)
|
|
</Label>
|
|
<Input
|
|
type="tel"
|
|
name="directory_phone"
|
|
value={formData.directory_phone}
|
|
onChange={handleInputChange}
|
|
placeholder="(555) 123-4567"
|
|
className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Partner Name (if applicable)
|
|
</Label>
|
|
<Input
|
|
type="text"
|
|
name="directory_partner_name"
|
|
value={formData.directory_partner_name}
|
|
onChange={handleInputChange}
|
|
placeholder="Partner's name"
|
|
className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Submit Button */}
|
|
<div className="flex justify-end">
|
|
<Button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="bg-[var(--orange-light)] hover:bg-[var(--orange-apricot)] text-white rounded-xl px-8 py-3 text-lg"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
{saving ? (
|
|
'Saving...'
|
|
) : (
|
|
<>
|
|
<Save className="h-5 w-5 mr-2" />
|
|
Save Profile
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<MemberFooter />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MemberProfile;
|