@oxyhq/services 5.6.0 → 5.6.1

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -19,6 +19,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { fontFamilies } from '../styles/fonts';
 import { confirmAction } from '../utils/confirmAction';
+import { useAuthStore } from '../stores/authStore';
 
 const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -27,6 +28,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     navigate,
 }) => {
     const { user, oxyServices, isLoading: authLoading, isAuthenticated } = useOxy();
+    const updateUser = useAuthStore((state) => state.updateUser);
     const [isLoading, setIsLoading] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
 
@@ -35,11 +37,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
     // Form state
     const [displayName, setDisplayName] = useState('');
+    const [lastName, setLastName] = useState('');
     const [username, setUsername] = useState('');
     const [email, setEmail] = useState('');
     const [bio, setBio] = useState('');
     const [location, setLocation] = useState('');
-    const [website, setWebsite] = useState('');
+    const [links, setLinks] = useState<string[]>([]);
     const [avatarUrl, setAvatarUrl] = useState('');
 
     // Editing states
@@ -47,11 +50,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
     // Temporary input states for inline editing
     const [tempDisplayName, setTempDisplayName] = useState('');
+    const [tempLastName, setTempLastName] = useState('');
     const [tempUsername, setTempUsername] = useState('');
     const [tempEmail, setTempEmail] = useState('');
     const [tempBio, setTempBio] = useState('');
     const [tempLocation, setTempLocation] = useState('');
-    const [tempWebsite, setTempWebsite] = useState('');
+    const [tempLinks, setTempLinks] = useState<string[]>([]);
 
     // Memoize theme-related calculations to prevent unnecessary recalculations
     const themeStyles = useMemo(() => {
@@ -78,14 +82,19 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         if (user) {
             const userDisplayName = typeof user.name === 'string'
                 ? user.name
-                : user.name?.full || user.name?.first || '';
-
+                : user.name?.first || user.name?.full || '';
+            const userLastName = typeof user.name === 'object' ? user.name?.last || '' : '';
             setDisplayName(userDisplayName);
+            setLastName(userLastName);
             setUsername(user.username || '');
             setEmail(user.email || '');
             setBio(user.bio || '');
             setLocation(user.location || '');
-            setWebsite(user.website || '');
+            setLinks(
+                Array.isArray(user.links)
+                    ? user.links.map(l => typeof l === 'string' ? l : l.link).filter(Boolean)
+                    : user.website ? [user.website] : []
+            );
             setAvatarUrl(user.avatar?.url || '');
         }
     }, [user]);
@@ -102,12 +111,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 email,
                 bio,
                 location,
-                website,
+                links,
             };
 
             // Handle name field
-            if (displayName) {
-                updates.name = displayName;
+            if (displayName || lastName) {
+                updates.name = { first: displayName, last: lastName };
             }
 
             // Handle avatar
@@ -115,7 +124,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 updates.avatar = { url: avatarUrl };
             }
 
-            await oxyServices.updateProfile(updates);
+            await updateUser(updates, oxyServices);
             toast.success('Profile updated successfully');
 
             animateSaveButton(1); // Scale back to normal
@@ -144,7 +153,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     const startEditing = (type: string, currentValue: string) => {
         switch (type) {
             case 'displayName':
-                setTempDisplayName(currentValue);
+                setTempDisplayName(displayName);
+                setTempLastName(lastName);
                 break;
             case 'username':
                 setTempUsername(currentValue);
@@ -158,8 +168,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             case 'location':
                 setTempLocation(currentValue);
                 break;
-            case 'website':
-                setTempWebsite(currentValue);
+            case 'links':
+                setTempLinks([...links]);
                 break;
         }
         setEditingField(type);
@@ -171,6 +181,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         switch (type) {
             case 'displayName':
                 setDisplayName(tempDisplayName);
+                setLastName(tempLastName);
                 break;
             case 'username':
                 setUsername(tempUsername);
@@ -184,8 +195,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             case 'location':
                 setLocation(tempLocation);
                 break;
-            case 'website':
-                setWebsite(tempWebsite);
+            case 'links':
+                setLinks(tempLinks);
                 break;
         }
 
@@ -207,7 +218,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             email: 'Email',
             bio: 'Bio',
             location: 'Location',
-            website: 'Website'
+            links: 'Links'
         };
         return labels[type as keyof typeof labels] || 'Field';
     };
@@ -219,19 +230,52 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             email: { name: 'mail', color: '#FF9500' },
             bio: { name: 'document-text', color: '#34C759' },
             location: { name: 'location', color: '#FF3B30' },
-            website: { name: 'link', color: '#32D74B' }
+            links: { name: 'link', color: '#32D74B' }
         };
         return icons[type as keyof typeof icons] || { name: 'person', color: '#007AFF' };
     };
 
     const renderEditingField = (type: string) => {
+        if (type === 'displayName') {
+            return (
+                <View style={styles.editingFieldContainer}>
+                    <View style={styles.editingFieldContent}>
+                        <View style={[styles.newValueSection, { flexDirection: 'row', gap: 12 }]}>
+                            <View style={{ flex: 1 }}>
+                                <Text style={styles.editingFieldLabel}>First Name</Text>
+                                <TextInput
+                                    style={styles.editingFieldInput}
+                                    value={tempDisplayName}
+                                    onChangeText={setTempDisplayName}
+                                    placeholder="Enter your first name"
+                                    placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#999'}
+                                    autoFocus
+                                    selectionColor={themeStyles.primaryColor}
+                                />
+                            </View>
+                            <View style={{ flex: 1 }}>
+                                <Text style={styles.editingFieldLabel}>Last Name</Text>
+                                <TextInput
+                                    style={styles.editingFieldInput}
+                                    value={tempLastName}
+                                    onChangeText={setTempLastName}
+                                    placeholder="Enter your last name"
+                                    placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#999'}
+                                    selectionColor={themeStyles.primaryColor}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                </View>
+            );
+        }
         const fieldConfig = {
             displayName: { label: 'Display Name', value: displayName, placeholder: 'Enter your display name', icon: 'person', color: '#007AFF', multiline: false, keyboardType: 'default' as const },
             username: { label: 'Username', value: username, placeholder: 'Choose a username', icon: 'at', color: '#5856D6', multiline: false, keyboardType: 'default' as const },
             email: { label: 'Email', value: email, placeholder: 'Enter your email address', icon: 'mail', color: '#FF9500', multiline: false, keyboardType: 'email-address' as const },
             bio: { label: 'Bio', value: bio, placeholder: 'Tell people about yourself...', icon: 'document-text', color: '#34C759', multiline: true, keyboardType: 'default' as const },
             location: { label: 'Location', value: location, placeholder: 'Enter your location', icon: 'location', color: '#FF3B30', multiline: false, keyboardType: 'default' as const },
-            website: { label: 'Website', value: website, placeholder: 'Enter your website URL', icon: 'link', color: '#32D74B', multiline: false, keyboardType: 'url' as const }
+            links: { label: 'Links', value: links.join(', '), placeholder: 'Enter your links (comma separated)', icon: 'link', color: '#32D74B', multiline: false, keyboardType: 'url' as const }
         };
 
         const config = fieldConfig[type as keyof typeof fieldConfig];
@@ -244,7 +288,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 case 'email': return tempEmail;
                 case 'bio': return tempBio;
                 case 'location': return tempLocation;
-                case 'website': return tempWebsite;
+                case 'links': return tempLinks.join(', ');
                 default: return '';
             }
         })();
@@ -256,7 +300,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 case 'email': setTempEmail(text); break;
                 case 'bio': setTempBio(text); break;
                 case 'location': setTempLocation(text); break;
-                case 'website': setTempWebsite(text); break;
+                case 'links': setTempLinks(text.split(',').map(s => s.trim()).filter(Boolean)); break;
             }
         };
 
@@ -446,7 +490,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                             {renderField(
                                 'displayName',
                                 'Display Name',
-                                displayName,
+                                [displayName, lastName].filter(Boolean).join(' '), // Show full name
                                 'Add your display name',
                                 'person',
                                 '#007AFF',
@@ -514,10 +558,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                             )}
 
                             {renderField(
-                                'website',
-                                'Website',
-                                website,
-                                'Add your website',
+                                'links',
+                                'Links',
+                                links.join(', '),
+                                'Add your links',
                                 'link',
                                 '#32D74B',
                                 false,

package/src/ui/stores/authStore.ts

@@ -10,6 +10,8 @@ interface AuthState {
   loginSuccess: (user: User) => void;
   loginFailure: (error: string) => void;
   logout: () => void;
+  fetchUser: (oxyServices: any) => Promise<void>;
+  updateUser: (updates: Partial<User>, oxyServices: any) => Promise<void>;
 }
 
 export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>) => void) => ({
@@ -21,4 +23,23 @@ export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>)
   loginSuccess: (user: User) => set({ isLoading: false, isAuthenticated: true, user }),
   loginFailure: (error: string) => set({ isLoading: false, error }),
   logout: () => set({ user: null, isAuthenticated: false }),
+  fetchUser: async (oxyServices) => {
+    set({ isLoading: true, error: null });
+    try {
+      const user = await oxyServices.getCurrentUser();
+      set({ user, isLoading: false, isAuthenticated: true });
+    } catch (error: any) {
+      set({ error: error.message || 'Failed to fetch user', isLoading: false });
+    }
+  },
+  updateUser: async (updates, oxyServices) => {
+    set({ isLoading: true, error: null });
+    try {
+      await oxyServices.updateProfile(updates);
+      // Immediately fetch the latest user data after update
+      await useAuthStore.getState().fetchUser(oxyServices);
+    } catch (error: any) {
+      set({ error: error.message || 'Failed to update user', isLoading: false });
+    }
+  },
 }));