diff --git a/src/components/account/RCardManagement.tsx b/src/components/account/RCardManagement.tsx index 02e3328..ae7f921 100644 --- a/src/components/account/RCardManagement.tsx +++ b/src/components/account/RCardManagement.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { Dialog, DialogTitle, @@ -83,15 +83,39 @@ const RCardManagement = ({ const [errors, setErrors] = useState>({}); + // Sync form data when editingRCard changes + useEffect(() => { + if (editingRCard) { + setFormData({ + name: editingRCard.name, + description: editingRCard.description || '', + color: editingRCard.color || AVAILABLE_COLORS[0], + icon: editingRCard.icon || 'PersonOutline', + }); + } else { + setFormData({ + name: '', + description: '', + color: AVAILABLE_COLORS[0], + icon: 'PersonOutline', + }); + } + setErrors({}); + }, [editingRCard]); + const handleSubmit = () => { const newErrors: Record = {}; if (!formData.name.trim()) { newErrors.name = 'Name is required'; + } else if (formData.name.length > 50) { + newErrors.name = 'Name must be 50 characters or less'; } if (!formData.description.trim()) { newErrors.description = 'Description is required'; + } else if (formData.description.length > 200) { + newErrors.description = 'Description must be 200 characters or less'; } if (Object.keys(newErrors).length > 0) { diff --git a/src/components/account/RCardPrivacySettings.tsx b/src/components/account/RCardPrivacySettings.tsx index 9489b3f..7a9e212 100644 --- a/src/components/account/RCardPrivacySettings.tsx +++ b/src/components/account/RCardPrivacySettings.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { Card, CardContent, @@ -23,6 +23,7 @@ import { VpnKey, } from '@mui/icons-material'; import type { RCardWithPrivacy, PrivacyLevel, LocationSharingLevel } from '../../types/notification'; +import { DEFAULT_PRIVACY_SETTINGS } from '../../types/notification'; interface RCardPrivacySettingsProps { rCard: RCardWithPrivacy; @@ -30,7 +31,12 @@ interface RCardPrivacySettingsProps { } const RCardPrivacySettings = ({ rCard, onUpdate }: RCardPrivacySettingsProps) => { - const [settings, setSettings] = useState(rCard.privacySettings); + const [settings, setSettings] = useState(rCard?.privacySettings || DEFAULT_PRIVACY_SETTINGS); + + // Sync settings when rCard changes + useEffect(() => { + setSettings(rCard?.privacySettings || DEFAULT_PRIVACY_SETTINGS); + }, [rCard]); const handleSettingChange = ( category: string, @@ -39,12 +45,23 @@ const RCardPrivacySettings = ({ rCard, onUpdate }: RCardPrivacySettingsProps) => ) => { const newSettings = { ...settings }; - if (category === 'dataSharing') { - (newSettings.dataSharing as any)[field] = value; - } else if (category === 'reSharing') { - (newSettings.reSharing as any)[field] = value; - } else { - (newSettings as any)[field] = value; + if (category === 'dataSharing' && newSettings.dataSharing && field in newSettings.dataSharing) { + newSettings.dataSharing = { + ...newSettings.dataSharing, + [field]: value + }; + } else if (category === 'reSharing' && newSettings.reSharing && field in newSettings.reSharing) { + newSettings.reSharing = { + ...newSettings.reSharing, + [field]: value + }; + } else if (category === 'general') { + // Handle root level properties + if (field === 'keyRecoveryBuddy' || field === 'circlesTrustedConnection') { + (newSettings as any)[field] = value; + } else if (field === 'locationSharing' || field === 'locationDeletionHours') { + (newSettings as any)[field] = value; + } } setSettings(newSettings); diff --git a/src/pages/AccountPage.tsx b/src/pages/AccountPage.tsx index 0bb9ef3..dddac62 100644 --- a/src/pages/AccountPage.tsx +++ b/src/pages/AccountPage.tsx @@ -126,10 +126,13 @@ const AccountPage = () => { }; const handleRCardDelete = (rCardId: string) => { - setRCards(prev => prev.filter(card => card.id !== rCardId)); - if (selectedRCard?.id === rCardId) { - setSelectedRCard(rCards[0] || null); - } + setRCards(prev => { + const newRCards = prev.filter(card => card.id !== rCardId); + if (selectedRCard?.id === rCardId) { + setSelectedRCard(newRCards[0] || null); + } + return newRCards; + }); }; const getRCardIcon = (iconName: string) => {