376 lines
15 KiB
TypeScript
376 lines
15 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { familyApi, userApi, authApi } from '../api/client';
|
||
import { useStore } from '../store/useStore';
|
||
import type { Theme } from '../types';
|
||
import {
|
||
User as UserIcon,
|
||
Users,
|
||
Settings,
|
||
AlertTriangle,
|
||
ArrowLeft,
|
||
Loader2,
|
||
Check,
|
||
Palette,
|
||
Languages,
|
||
LogOut,
|
||
Edit3,
|
||
Save,
|
||
X,
|
||
} from 'lucide-react';
|
||
|
||
const THEMES: { id: Theme; gradient: string }[] = [
|
||
{ id: 'light', gradient: 'bg-gradient-to-r from-gray-100 to-gray-200' },
|
||
{ id: 'dark', gradient: 'bg-gradient-to-r from-black to-gray-900' },
|
||
{ id: 'sunset', gradient: 'bg-gradient-to-r from-orange-400 to-pink-500' },
|
||
{ id: 'ocean', gradient: 'bg-gradient-to-r from-blue-400 to-cyan-500' },
|
||
{ id: 'forest', gradient: 'bg-gradient-to-r from-green-400 to-teal-500' },
|
||
{ id: 'purple', gradient: 'bg-gradient-to-r from-purple-500 to-pink-500' },
|
||
];
|
||
|
||
export default function Profile() {
|
||
const { t, i18n } = useTranslation();
|
||
const navigate = useNavigate();
|
||
const { user, selectedFamily, setSelectedFamily, setUser, preferences, setPreferences, familyMembers, setFamilyMembers } = useStore();
|
||
|
||
const [membersLoading, setMembersLoading] = useState(false);
|
||
const [leavingFamily, setLeavingFamily] = useState(false);
|
||
const [editingName, setEditingName] = useState(false);
|
||
const [newFamilyName, setNewFamilyName] = useState('');
|
||
const [savingName, setSavingName] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (user?.family_id) {
|
||
loadFamily();
|
||
}
|
||
}, [user?.family_id]);
|
||
|
||
useEffect(() => {
|
||
if (user?.family_id && selectedFamily) {
|
||
loadMembers();
|
||
}
|
||
}, [user?.family_id, selectedFamily]);
|
||
|
||
const loadFamily = async () => {
|
||
if (!user?.family_id) return;
|
||
try {
|
||
const response = await familyApi.getById(user.family_id);
|
||
setSelectedFamily(response.data);
|
||
} catch (err) {
|
||
console.error('Error loading family:', err);
|
||
}
|
||
};
|
||
|
||
const loadMembers = async () => {
|
||
if (!user?.family_id) return;
|
||
try {
|
||
setMembersLoading(true);
|
||
const response = await familyApi.getMembers(user.family_id);
|
||
console.log('Loaded members:', response.data);
|
||
setFamilyMembers(response.data);
|
||
} catch (err) {
|
||
console.error('Error loading members:', err);
|
||
} finally {
|
||
setMembersLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleLeaveFamily = async () => {
|
||
if (!confirm(t('profile.leaveConfirm'))) return;
|
||
|
||
try {
|
||
setLeavingFamily(true);
|
||
await userApi.leaveFamily();
|
||
|
||
const meResponse = await authApi.me();
|
||
setUser(meResponse.data);
|
||
setSelectedFamily(null);
|
||
setFamilyMembers([]);
|
||
|
||
navigate('/');
|
||
} catch (err) {
|
||
console.error('Error leaving family:', err);
|
||
alert(t('profile.leaveError'));
|
||
} finally {
|
||
setLeavingFamily(false);
|
||
}
|
||
};
|
||
|
||
const handleThemeChange = (theme: Theme) => {
|
||
setPreferences({ theme });
|
||
document.documentElement.setAttribute('data-theme', theme);
|
||
};
|
||
|
||
const handleLocaleChange = (locale: 'ru' | 'en') => {
|
||
setPreferences({ locale });
|
||
i18n.changeLanguage(locale);
|
||
};
|
||
|
||
const handleStartEditName = () => {
|
||
setNewFamilyName(selectedFamily?.name || '');
|
||
setEditingName(true);
|
||
};
|
||
|
||
const handleSaveName = async () => {
|
||
if (!selectedFamily || !newFamilyName.trim()) return;
|
||
|
||
try {
|
||
setSavingName(true);
|
||
const response = await familyApi.update(selectedFamily.id, { name: newFamilyName.trim() });
|
||
setSelectedFamily(response.data);
|
||
setEditingName(false);
|
||
} catch (err) {
|
||
console.error('Error updating family name:', err);
|
||
alert(t('profile.renameError'));
|
||
} finally {
|
||
setSavingName(false);
|
||
}
|
||
};
|
||
|
||
const handleBack = () => {
|
||
if (user?.family_id) {
|
||
navigate(`/family/${user.family_id}`);
|
||
} else {
|
||
navigate('/');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen gradient-bg py-8 sm:py-12 px-4">
|
||
<div className="max-w-2xl mx-auto">
|
||
<button
|
||
onClick={handleBack}
|
||
className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-2xl backdrop-blur-md mb-6 transition-all duration-300"
|
||
>
|
||
<ArrowLeft className="w-5 h-5" />
|
||
<span className="font-medium">{t('common.back')}</span>
|
||
</button>
|
||
|
||
<div className="text-center mb-8">
|
||
<div className="inline-flex p-4 bg-white/20 backdrop-blur-md rounded-2xl mb-4">
|
||
<UserIcon className="w-12 h-12 text-white" />
|
||
</div>
|
||
<h1 className="text-4xl font-bold text-white mb-2">{t('profile.title')}</h1>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<div className="glass-effect rounded-2xl shadow-lg p-6">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="p-2 category-icon text-white rounded-xl">
|
||
<UserIcon className="w-6 h-6" />
|
||
</div>
|
||
<h2 className="text-xl font-bold text-gray-800">{t('profile.info')}</h2>
|
||
</div>
|
||
<div className="space-y-3">
|
||
<div className="flex justify-between items-center py-2 border-b border-gray-200">
|
||
<span className="text-gray-600">{t('profile.username')}</span>
|
||
<span className="font-medium text-gray-900">{user?.username || '-'}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2 border-b border-gray-200">
|
||
<span className="text-gray-600">{t('profile.email')}</span>
|
||
<span className="font-medium text-gray-900">{user?.email || '-'}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{selectedFamily && (
|
||
<div className="glass-effect rounded-2xl shadow-lg p-6">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="p-2 btn-success text-white rounded-xl">
|
||
<Users className="w-6 h-6" />
|
||
</div>
|
||
<h2 className="text-xl font-bold text-gray-800">{t('profile.family')}</h2>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<div className="flex justify-between items-center py-2 border-b border-gray-200">
|
||
<span className="text-gray-600">{t('profile.familyName')}</span>
|
||
{editingName ? (
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
type="text"
|
||
value={newFamilyName}
|
||
onChange={(e) => setNewFamilyName(e.target.value)}
|
||
className="px-3 py-1 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-1 focus:ring-purple-200"
|
||
autoFocus
|
||
/>
|
||
<button
|
||
onClick={handleSaveName}
|
||
disabled={savingName}
|
||
className="p-1.5 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
|
||
>
|
||
{savingName ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
|
||
</button>
|
||
<button
|
||
onClick={() => setEditingName(false)}
|
||
className="p-1.5 bg-gray-200 text-gray-600 rounded-lg hover:bg-gray-300 transition-colors"
|
||
>
|
||
<X className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-medium text-gray-900">{selectedFamily.name}</span>
|
||
<button
|
||
onClick={handleStartEditName}
|
||
className="p-1.5 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
|
||
>
|
||
<Edit3 className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb-2">
|
||
<h3 className="text-sm font-medium text-gray-600 mb-3">{t('profile.members')}</h3>
|
||
{membersLoading ? (
|
||
<div className="flex items-center justify-center py-4">
|
||
<Loader2 className="w-5 h-5 animate-spin text-gray-400" />
|
||
</div>
|
||
) : familyMembers.length === 0 ? (
|
||
<div className="text-center py-4 text-gray-500 text-sm">
|
||
{t('profile.noMembers') || 'Нет участников'}
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{familyMembers.map((member) => (
|
||
<div
|
||
key={member.id}
|
||
className={`flex items-center justify-between p-3 rounded-xl ${member.id === user?.id ? 'member-current border' : 'bg-gray-50'}`}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-8 h-8 category-icon rounded-full flex items-center justify-center text-white text-sm font-medium">
|
||
{(member.username || member.email || '?')[0].toUpperCase()}
|
||
</div>
|
||
<span className="font-medium text-gray-800">
|
||
{member.username || member.email || t('profile.unknownUser')}
|
||
</span>
|
||
{member.id === user?.id && (
|
||
<span className="text-xs bg-purple-200 text-purple-700 px-2 py-0.5 rounded-full">
|
||
{t('profile.you')}
|
||
</span>
|
||
)}
|
||
</div>
|
||
{member.is_admin && (
|
||
<span className="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full">
|
||
Admin
|
||
</span>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="glass-effect rounded-2xl shadow-lg p-6">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="p-2 btn-primary text-white rounded-xl">
|
||
<Settings className="w-6 h-6" />
|
||
</div>
|
||
<h2 className="text-xl font-bold text-gray-800">{t('profile.settings')}</h2>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<div>
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<Languages className="w-4 h-4 text-gray-600" />
|
||
<h3 className="text-sm font-medium text-gray-600">{t('profile.language')}</h3>
|
||
</div>
|
||
<div className="flex gap-3">
|
||
<button
|
||
onClick={() => handleLocaleChange('ru')}
|
||
className={`flex-1 py-3 px-4 rounded-xl font-medium transition-all ${
|
||
preferences.locale === 'ru'
|
||
? 'btn-primary text-white shadow-lg'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
<span className="mr-2">🇷🇺</span>
|
||
Русский
|
||
{preferences.locale === 'ru' && <Check className="w-4 h-4 inline ml-2" />}
|
||
</button>
|
||
<button
|
||
onClick={() => handleLocaleChange('en')}
|
||
className={`flex-1 py-3 px-4 rounded-xl font-medium transition-all ${
|
||
preferences.locale === 'en'
|
||
? 'btn-primary text-white shadow-lg'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
<span className="mr-2">🇬🇧</span>
|
||
English
|
||
{preferences.locale === 'en' && <Check className="w-4 h-4 inline ml-2" />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<Palette className="w-4 h-4 text-gray-600" />
|
||
<h3 className="text-sm font-medium text-gray-600">{t('profile.theme')}</h3>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-3">
|
||
{THEMES.map((theme) => (
|
||
<button
|
||
key={theme.id}
|
||
onClick={() => handleThemeChange(theme.id)}
|
||
className={`relative p-1 rounded-xl transition-all ${
|
||
preferences.theme === theme.id
|
||
? 'ring-2 ring-purple-500 ring-offset-2'
|
||
: 'hover:scale-105'
|
||
}`}
|
||
>
|
||
<div className={`h-12 rounded-lg ${theme.gradient}`} />
|
||
<span className="text-xs text-gray-600 mt-1 block">{t(`profile.themes.${theme.id}`)}</span>
|
||
{preferences.theme === theme.id && (
|
||
<div className="absolute top-2 right-2 w-5 h-5 bg-white rounded-full flex items-center justify-center shadow">
|
||
<Check className="w-3 h-3 text-purple-600" />
|
||
</div>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{selectedFamily && (
|
||
<div className="glass-effect rounded-2xl shadow-lg p-6 border-2 border-red-200">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="p-2 btn-danger text-white rounded-xl">
|
||
<AlertTriangle className="w-6 h-6" />
|
||
</div>
|
||
<h2 className="text-xl font-bold text-gray-800">{t('profile.dangerZone')}</h2>
|
||
</div>
|
||
|
||
<p className="text-gray-600 mb-4">{t('profile.leaveDescription')}</p>
|
||
|
||
<button
|
||
onClick={handleLeaveFamily}
|
||
disabled={leavingFamily}
|
||
className="w-full flex items-center justify-center gap-2 px-6 py-3 btn-danger text-white rounded-xl transition-all font-semibold disabled:opacity-50"
|
||
>
|
||
{leavingFamily ? (
|
||
<>
|
||
<Loader2 className="w-5 h-5 animate-spin" />
|
||
{t('profile.leaving')}
|
||
</>
|
||
) : (
|
||
<>
|
||
<LogOut className="w-5 h-5" />
|
||
{t('profile.leaveFamily')}
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|