refactor and modularise profile components
This commit is contained in:
parent
cc1a3728e5
commit
7a8f16c624
62
mobile/src/hooks/useProfileLogic.ts
Normal file
62
mobile/src/hooks/useProfileLogic.ts
Normal 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,
|
||||
};
|
||||
};
|
||||
@ -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={{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user