refactor and modularise profile components

This commit is contained in:
Joseph D'Souza 2026-02-11 13:18:03 +01:00
parent cc1a3728e5
commit 7a8f16c624
2 changed files with 77 additions and 49 deletions

View File

@ -0,0 +1,62 @@
import { useState } from 'react';
import { Alert } from 'react-native';
import { useAuthStore } from '../store/useAuthStore';
import { authService } from '../services/api';
export const useProfileLogic = () => {
const { user, logout } = useAuthStore();
const [isResending, setIsResending] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);
const displayName =
(user?.user?.first_name && user?.user?.last_name) ? `${user.user.first_name} ${user.user.last_name}` :
user?.user?.username ? user.user.username :
user?.user?.email ? user.user.email.split('@')[0] :
'User Name';
const handleResendVerification = async () => {
setIsResending(true);
const result = await authService.resendVerificationEmail();
setIsResending(false);
if (result.ok) {
Alert.alert('Email Sent', 'Please check your email (or server logs) for the verification link.');
} else {
Alert.alert('Error', result.message || 'Failed to resend verification email');
}
};
const handleDeleteAccount = () => {
Alert.alert(
'Delete Account',
'Are you sure you want to permanently delete your account? This action cannot be undone.',
[
{ text: 'Cancel', style: 'cancel' },
{
text: 'Delete',
style: 'destructive',
onPress: async () => {
const result = await authService.deleteAccount();
if (result.ok) {
logout();
Alert.alert('Success', 'Your account has been deleted.');
} else {
Alert.alert('Error', 'Failed to delete account.');
}
}
},
]
);
};
return {
user,
displayName,
isResending,
isModalVisible,
setIsModalVisible,
handleResendVerification,
handleDeleteAccount,
logout,
};
};

View File

@ -1,68 +1,34 @@
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, useColorScheme, ScrollView, Alert, Image, ActivityIndicator, Modal } from 'react-native';
import React from 'react';
import { View, Text, TouchableOpacity, useColorScheme, ScrollView, Image, ActivityIndicator, Modal, Alert } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../navigation/AppNavigator';
import { getThemeStyles, commonStyles } from '../theme/styles';
import { useAuthStore } from '../store/useAuthStore';
import { authService } from '../services/api';
import { getThemeStyles } from '../theme/styles';
import { COLORS } from '../theme/colors';
import { useProfileLogic } from '../hooks/useProfileLogic';
import appConfig from '../../app.json';
export default function ProfileScreen() {
const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const { user, logout } = useAuthStore();
const [isResending, setIsResending] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);
const colorScheme = useColorScheme();
const isDark = colorScheme === 'dark';
const themeStyles = getThemeStyles(isDark);
const themeColors = isDark ? COLORS.DARK : COLORS.LIGHT;
const {
user,
displayName,
isResending,
isModalVisible,
setIsModalVisible,
handleResendVerification,
handleDeleteAccount,
logout,
} = useProfileLogic();
if (!user) return null;
const displayName =
(user.user?.first_name && user.user?.last_name) ? `${user.user.first_name} ${user.user.last_name}` :
user.user?.username ? user.user.username :
user.user?.email ? user.user.email.split('@')[0] :
'User Name';
const handleResendVerification = async () => {
setIsResending(true);
const result = await authService.resendVerificationEmail();
setIsResending(false);
if (result.ok) {
Alert.alert('Email Sent', 'Please check your email (or server logs) for the verification link.');
} else {
Alert.alert('Error', result.message || 'Failed to resend verification email');
}
};
const handleDeleteAccount = () => {
Alert.alert(
'Delete Account',
'Are you sure you want to permanently delete your account? This action cannot be undone.',
[
{ text: 'Cancel', style: 'cancel' },
{
text: 'Delete',
style: 'destructive',
onPress: async () => {
const result = await authService.deleteAccount();
if (result.ok) {
logout();
Alert.alert('Success', 'Your account has been deleted.');
} else {
Alert.alert('Error', 'Failed to delete account.');
}
}
},
]
);
};
const MenuItem = ({ icon, label, onPress, isDestructive = false }: { icon: string, label: string, onPress: () => void, isDestructive?: boolean }) => (
<TouchableOpacity
style={{