125 lines
3.0 KiB
TypeScript
125 lines
3.0 KiB
TypeScript
import { Redirect } from 'expo-router';
|
|
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { Avatar } from '@/components/common/Avatar';
|
|
import { Catamaran, FunnelSans } from '@/constants/fonts';
|
|
import { Palette } from '@/constants/palette';
|
|
import { Radius, Spacing } from '@/constants/styles';
|
|
import { useAuth } from '@/providers/AuthProvider';
|
|
|
|
function formatDate(value?: Date | null) {
|
|
if (!value) {
|
|
return '-';
|
|
}
|
|
|
|
return value.toLocaleDateString('fr-FR', {
|
|
day: '2-digit',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
});
|
|
}
|
|
|
|
function InfoRow({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>{label}</Text>
|
|
<Text style={styles.infoValue}>{value}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default function ProfileScreen() {
|
|
const { initializing, user } = useAuth();
|
|
|
|
if (initializing) {
|
|
return <View style={styles.screen} />;
|
|
}
|
|
|
|
if (!user) {
|
|
return <Redirect href="/login" />;
|
|
}
|
|
|
|
return (
|
|
<ScrollView
|
|
contentContainerStyle={styles.content}
|
|
style={styles.screen}
|
|
>
|
|
<View style={styles.header}>
|
|
<Avatar
|
|
name={user.username ?? user.email}
|
|
size="lg"
|
|
uri={user.profilePicture}
|
|
/>
|
|
<View style={styles.headerContent}>
|
|
<Text style={styles.title}>{user.username || 'Profil'}</Text>
|
|
<Text style={styles.subtitle}>{user.email}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.card}>
|
|
<InfoRow label="Username" value={user.username || '-'} />
|
|
<InfoRow label="Email" value={user.email || '-'} />
|
|
<InfoRow label="UID" value={user.uid} />
|
|
<InfoRow
|
|
label="Photo"
|
|
value={user.profilePicture ? 'Renseignee' : 'Aucune'}
|
|
/>
|
|
<InfoRow label="Cree le" value={formatDate(user.createdAt)} />
|
|
<InfoRow label="Mis a jour le" value={formatDate(user.updatedAt)} />
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
screen: {
|
|
flex: 1,
|
|
backgroundColor: Palette.cream,
|
|
},
|
|
content: {
|
|
paddingHorizontal: Spacing.lg,
|
|
paddingTop: Spacing.xl,
|
|
paddingBottom: Spacing.xxl,
|
|
gap: Spacing.lg,
|
|
},
|
|
header: {
|
|
alignItems: 'center',
|
|
gap: Spacing.md,
|
|
},
|
|
headerContent: {
|
|
alignItems: 'center',
|
|
gap: Spacing.xs,
|
|
},
|
|
title: {
|
|
...Catamaran.extraBold34,
|
|
color: Palette.black,
|
|
},
|
|
subtitle: {
|
|
...FunnelSans.regular16,
|
|
color: Palette.gray,
|
|
},
|
|
card: {
|
|
gap: Spacing.md,
|
|
padding: Spacing.md,
|
|
borderWidth: 1,
|
|
borderColor: Palette.cream,
|
|
borderRadius: Radius.xl,
|
|
backgroundColor: Palette.white,
|
|
},
|
|
infoRow: {
|
|
gap: Spacing.xs,
|
|
paddingBottom: Spacing.sm,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: Palette.cream,
|
|
},
|
|
infoLabel: {
|
|
...FunnelSans.medium12,
|
|
color: Palette.gray,
|
|
textTransform: 'uppercase',
|
|
},
|
|
infoValue: {
|
|
...FunnelSans.regular16,
|
|
color: Palette.black,
|
|
},
|
|
});
|