644 lines
18 KiB
TypeScript
644 lines
18 KiB
TypeScript
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
Image,
|
|
Alert,
|
|
ScrollView,
|
|
ActivityIndicator,
|
|
} from "react-native";
|
|
import { useUser, useClerk, useAuth } from "@clerk/clerk-expo";
|
|
import { useRouter } from "expo-router";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useState, useEffect } from "react";
|
|
import { useTheme } from "../../contexts/ThemeContext";
|
|
import { MinimalCard } from "../../components/MinimalCard";
|
|
import { ListItem } from "../../components/ListItem";
|
|
import { MinimalButton } from "../../components/MinimalButton";
|
|
import { Badge } from "../../components/Badge";
|
|
import { IconContainer } from "../../components/IconContainer";
|
|
import { API_BASE_URL, API_ENDPOINTS } from "../../config/api";
|
|
import log from "../../utils/logger";
|
|
|
|
export default function ProfileScreen() {
|
|
const { user } = useUser();
|
|
const { signOut } = useClerk();
|
|
const router = useRouter();
|
|
const { colors, typography, theme: activeTheme, setTheme } = useTheme();
|
|
const { getToken } = useAuth();
|
|
|
|
const [gyms, setGyms] = useState<
|
|
Array<{ id: string; name: string; location?: string }>
|
|
>([]);
|
|
const [gymsLoading, setGymsLoading] = useState(false);
|
|
const [selectedGymId, setSelectedGymId] = useState<string | null>(null);
|
|
const [currentGymId, setCurrentGymId] = useState<string | null>(null);
|
|
const [currentGymName, setCurrentGymName] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const gid =
|
|
((user?.publicMetadata as any)?.gymId as string | undefined) ?? null;
|
|
setCurrentGymId(gid ?? null);
|
|
if (gid && gyms.length > 0) {
|
|
const g = gyms.find((x) => x.id === gid);
|
|
setCurrentGymName(g?.name ?? null);
|
|
if (selectedGymId === null) setSelectedGymId(gid);
|
|
}
|
|
}, [user?.publicMetadata, gyms]);
|
|
|
|
useEffect(() => {
|
|
loadGyms();
|
|
}, []);
|
|
|
|
const loadGyms = async () => {
|
|
try {
|
|
setGymsLoading(true);
|
|
const token = await getToken();
|
|
const url = `${API_BASE_URL}${API_ENDPOINTS.GYMS}`;
|
|
log.debug("Loading gyms", { url });
|
|
const res = await fetch(url, {
|
|
headers: token ? { Authorization: `Bearer ${token}` } : undefined,
|
|
});
|
|
const contentType = res.headers.get("content-type") || "";
|
|
if (!res.ok) {
|
|
const text = await res.text().catch(() => "");
|
|
log.error(
|
|
"Failed to fetch gyms - non-OK response",
|
|
new Error(text.slice(0, 200)),
|
|
{ status: res.status },
|
|
);
|
|
setGyms([]);
|
|
return;
|
|
}
|
|
if (!contentType.includes("application/json")) {
|
|
const text = await res.text().catch(() => "");
|
|
log.error(
|
|
"Failed to fetch gyms - expected JSON",
|
|
new Error(text.slice(0, 200)),
|
|
{ contentType },
|
|
);
|
|
setGyms([]);
|
|
return;
|
|
}
|
|
let data: any = null;
|
|
try {
|
|
data = await res.json();
|
|
} catch (e) {
|
|
const text = await res.text().catch(() => "");
|
|
log.error("Failed to parse gyms JSON", e, {
|
|
bodyPreview: text?.slice(0, 200),
|
|
});
|
|
setGyms([]);
|
|
return;
|
|
}
|
|
const list = Array.isArray(data) ? data : [];
|
|
setGyms(list);
|
|
const gid =
|
|
currentGymId ??
|
|
((user?.publicMetadata as any)?.gymId as string | undefined) ??
|
|
null;
|
|
if (gid) {
|
|
const g = list.find((x: any) => x.id === gid);
|
|
setCurrentGymId(gid);
|
|
setCurrentGymName(g?.name ?? null);
|
|
if (selectedGymId === null) setSelectedGymId(gid);
|
|
}
|
|
} catch (err) {
|
|
log.error("Failed to fetch gyms", err);
|
|
setGyms([]);
|
|
} finally {
|
|
setGymsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleApplyGym = async () => {
|
|
try {
|
|
const token = await getToken();
|
|
const url = `${API_BASE_URL}${API_ENDPOINTS.USERS}/gym`;
|
|
log.debug("Updating gym selection", { url, gymId: selectedGymId });
|
|
const res = await fetch(url, {
|
|
method: "PATCH",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
|
},
|
|
body: JSON.stringify({ gymId: selectedGymId }),
|
|
});
|
|
const contentType = res.headers.get("content-type") || "";
|
|
if (!res.ok) {
|
|
const text = await res.text().catch(() => "");
|
|
log.error(
|
|
"Failed to update gym selection - non-OK response",
|
|
new Error(text.slice(0, 200)),
|
|
{ status: res.status },
|
|
);
|
|
Alert.alert("Error", "Failed to update gym selection");
|
|
return;
|
|
}
|
|
if (contentType.includes("application/json")) {
|
|
try {
|
|
const data = await res.json();
|
|
log.debug("Gym selection updated", { data });
|
|
} catch (e) {
|
|
const text = await res.text().catch(() => "");
|
|
log.error("Failed to parse update response JSON", e, {
|
|
bodyPreview: text?.slice(0, 200),
|
|
});
|
|
}
|
|
}
|
|
setCurrentGymId(selectedGymId);
|
|
setCurrentGymName(
|
|
selectedGymId
|
|
? (gyms.find((g) => g.id === selectedGymId)?.name ?? null)
|
|
: null,
|
|
);
|
|
try {
|
|
await (user as any)?.reload?.();
|
|
} catch (e) {
|
|
log.debug("Failed to reload user after gym update", { error: e });
|
|
}
|
|
Alert.alert(
|
|
"Success",
|
|
selectedGymId ? "Gym selected successfully" : "Proceeding without gym",
|
|
);
|
|
} catch (err) {
|
|
log.error("Failed to update gym selection", err);
|
|
Alert.alert("Error", "Failed to update gym selection");
|
|
}
|
|
};
|
|
|
|
const handleSignOut = async () => {
|
|
try {
|
|
await signOut();
|
|
} catch (err) {
|
|
log.error("Failed to sign out", err);
|
|
}
|
|
};
|
|
|
|
const confirmSignOut = () => {
|
|
Alert.alert("Sign Out", "Are you sure you want to sign out?", [
|
|
{ text: "Cancel", style: "cancel" },
|
|
{ text: "Sign Out", style: "destructive", onPress: handleSignOut },
|
|
]);
|
|
};
|
|
|
|
const handleThemeChange = () => {
|
|
Alert.alert("Choose Theme", "Select your preferred theme", [
|
|
{
|
|
text: "Light",
|
|
onPress: () => setTheme("light"),
|
|
},
|
|
{
|
|
text: "Dark",
|
|
onPress: () => setTheme("dark"),
|
|
},
|
|
{
|
|
text: "System",
|
|
onPress: () => setTheme("system"),
|
|
},
|
|
{ text: "Cancel", style: "cancel" },
|
|
]);
|
|
};
|
|
|
|
const getThemeLabel = () => {
|
|
if (activeTheme === "light") return "Light";
|
|
if (activeTheme === "dark") return "Dark";
|
|
return "System";
|
|
};
|
|
|
|
return (
|
|
<ScrollView
|
|
style={[styles.container, { backgroundColor: colors.background }]}
|
|
contentContainerStyle={styles.content}
|
|
>
|
|
{/* Header Card */}
|
|
<MinimalCard variant="elevated" style={styles.profileCard}>
|
|
<View style={styles.avatarContainer}>
|
|
{user?.imageUrl ? (
|
|
<Image source={{ uri: user.imageUrl }} style={styles.avatar} />
|
|
) : (
|
|
<View
|
|
style={[
|
|
styles.placeholderAvatar,
|
|
{ backgroundColor: colors.primary },
|
|
]}
|
|
>
|
|
<Ionicons name="person" size={40} color={colors.white} />
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Text
|
|
style={[typography.h2, { color: colors.textPrimary, marginTop: 16 }]}
|
|
>
|
|
{user?.fullName || "User"}
|
|
</Text>
|
|
<Text
|
|
style={[
|
|
typography.body,
|
|
{ color: colors.textSecondary, marginTop: 4 },
|
|
]}
|
|
>
|
|
{user?.primaryEmailAddress?.emailAddress}
|
|
</Text>
|
|
<Badge
|
|
label="Premium Member"
|
|
variant="primary"
|
|
style={{ marginTop: 12 }}
|
|
/>
|
|
</MinimalCard>
|
|
|
|
{/* Theme Settings */}
|
|
<View style={styles.section}>
|
|
<Text
|
|
style={[
|
|
typography.h3,
|
|
{ color: colors.textPrimary, marginBottom: 12 },
|
|
]}
|
|
>
|
|
Appearance
|
|
</Text>
|
|
<MinimalCard variant="default">
|
|
<ListItem
|
|
title="Theme"
|
|
subtitle={`Current: ${getThemeLabel()}`}
|
|
leftIcon={
|
|
<IconContainer
|
|
variant="colored"
|
|
backgroundColor={`${colors.accent}20`}
|
|
>
|
|
<Ionicons
|
|
name="color-palette"
|
|
size={20}
|
|
color={colors.accent}
|
|
/>
|
|
</IconContainer>
|
|
}
|
|
rightElement={
|
|
<Ionicons
|
|
name="chevron-forward"
|
|
size={20}
|
|
color={colors.textTertiary}
|
|
/>
|
|
}
|
|
onPress={handleThemeChange}
|
|
/>
|
|
</MinimalCard>
|
|
</View>
|
|
|
|
{/* Account Settings */}
|
|
<View style={styles.section}>
|
|
<Text
|
|
style={[
|
|
typography.h3,
|
|
{ color: colors.textPrimary, marginBottom: 12 },
|
|
]}
|
|
>
|
|
Account
|
|
</Text>
|
|
<MinimalCard variant="default">
|
|
<ListItem
|
|
title="Personal Details"
|
|
leftIcon={
|
|
<IconContainer
|
|
variant="colored"
|
|
backgroundColor={`${colors.primary}20`}
|
|
>
|
|
<Ionicons
|
|
name="person-outline"
|
|
size={20}
|
|
color={colors.primary}
|
|
/>
|
|
</IconContainer>
|
|
}
|
|
rightElement={
|
|
<Ionicons
|
|
name="chevron-forward"
|
|
size={20}
|
|
color={colors.textTertiary}
|
|
/>
|
|
}
|
|
onPress={() => router.push("/personal-details")}
|
|
/>
|
|
<View style={[styles.divider, { backgroundColor: colors.border }]} />
|
|
<ListItem
|
|
title="Fitness Profile"
|
|
leftIcon={
|
|
<IconContainer
|
|
variant="colored"
|
|
backgroundColor={`${colors.success}20`}
|
|
>
|
|
<Ionicons
|
|
name="fitness-outline"
|
|
size={20}
|
|
color={colors.success}
|
|
/>
|
|
</IconContainer>
|
|
}
|
|
rightElement={
|
|
<Ionicons
|
|
name="chevron-forward"
|
|
size={20}
|
|
color={colors.textTertiary}
|
|
/>
|
|
}
|
|
onPress={() => router.push("/fitness-profile")}
|
|
/>
|
|
<View style={[styles.divider, { backgroundColor: colors.border }]} />
|
|
<ListItem
|
|
title="Notifications"
|
|
leftIcon={
|
|
<IconContainer
|
|
variant="colored"
|
|
backgroundColor={`${colors.warning}20`}
|
|
>
|
|
<Ionicons
|
|
name="notifications-outline"
|
|
size={20}
|
|
color={colors.warning}
|
|
/>
|
|
</IconContainer>
|
|
}
|
|
rightElement={
|
|
<Ionicons
|
|
name="chevron-forward"
|
|
size={20}
|
|
color={colors.textTertiary}
|
|
/>
|
|
}
|
|
/>
|
|
</MinimalCard>
|
|
</View>
|
|
|
|
{/* Gym Selection */}
|
|
<View style={styles.section}>
|
|
<View style={styles.sectionHeader}>
|
|
<Text style={[typography.h3, { color: colors.textPrimary }]}>
|
|
Gym Selection
|
|
</Text>
|
|
<TouchableOpacity onPress={loadGyms}>
|
|
<Text
|
|
style={[
|
|
typography.body,
|
|
{ color: colors.primary, fontWeight: "600" },
|
|
]}
|
|
>
|
|
Refresh
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<MinimalCard variant="default">
|
|
{currentGymName && (
|
|
<View style={styles.currentGym}>
|
|
<Text
|
|
style={[typography.caption, { color: colors.textTertiary }]}
|
|
>
|
|
Current Gym
|
|
</Text>
|
|
<Text
|
|
style={[
|
|
typography.h3,
|
|
{ color: colors.textPrimary, marginTop: 4 },
|
|
]}
|
|
>
|
|
{currentGymName}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
{gymsLoading ? (
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator color={colors.primary} />
|
|
</View>
|
|
) : (
|
|
<>
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
style={styles.gymScroll}
|
|
contentContainerStyle={styles.gymScrollContent}
|
|
>
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.gymChip,
|
|
{
|
|
backgroundColor:
|
|
selectedGymId === null
|
|
? `${colors.primary}20`
|
|
: colors.surfaceElevated,
|
|
borderColor:
|
|
selectedGymId === null ? colors.primary : colors.border,
|
|
},
|
|
]}
|
|
onPress={() => setSelectedGymId(null)}
|
|
>
|
|
<Text
|
|
style={[
|
|
typography.body,
|
|
{
|
|
color:
|
|
selectedGymId === null
|
|
? colors.primary
|
|
: colors.textSecondary,
|
|
fontWeight: selectedGymId === null ? "600" : "400",
|
|
},
|
|
]}
|
|
>
|
|
No Gym
|
|
</Text>
|
|
</TouchableOpacity>
|
|
{gyms.map((gym) => (
|
|
<TouchableOpacity
|
|
key={gym.id}
|
|
style={[
|
|
styles.gymChip,
|
|
{
|
|
backgroundColor:
|
|
selectedGymId === gym.id
|
|
? `${colors.primary}20`
|
|
: colors.surfaceElevated,
|
|
borderColor:
|
|
selectedGymId === gym.id
|
|
? colors.primary
|
|
: colors.border,
|
|
},
|
|
]}
|
|
onPress={() => setSelectedGymId(gym.id)}
|
|
>
|
|
<Text
|
|
style={[
|
|
typography.body,
|
|
{
|
|
color:
|
|
selectedGymId === gym.id
|
|
? colors.primary
|
|
: colors.textSecondary,
|
|
fontWeight: selectedGymId === gym.id ? "600" : "400",
|
|
},
|
|
]}
|
|
>
|
|
{gym.name}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
<MinimalButton
|
|
title="Apply Selection"
|
|
onPress={handleApplyGym}
|
|
variant="primary"
|
|
style={{ marginTop: 16 }}
|
|
/>
|
|
</>
|
|
)}
|
|
</MinimalCard>
|
|
</View>
|
|
|
|
{/* Support */}
|
|
<View style={styles.section}>
|
|
<Text
|
|
style={[
|
|
typography.h3,
|
|
{ color: colors.textPrimary, marginBottom: 12 },
|
|
]}
|
|
>
|
|
Support
|
|
</Text>
|
|
<MinimalCard variant="default">
|
|
<ListItem
|
|
title="Help Center"
|
|
leftIcon={
|
|
<IconContainer
|
|
variant="colored"
|
|
backgroundColor={`${colors.info}20`}
|
|
>
|
|
<Ionicons
|
|
name="help-circle-outline"
|
|
size={20}
|
|
color={colors.info}
|
|
/>
|
|
</IconContainer>
|
|
}
|
|
rightElement={
|
|
<Ionicons
|
|
name="chevron-forward"
|
|
size={20}
|
|
color={colors.textTertiary}
|
|
/>
|
|
}
|
|
/>
|
|
<View style={[styles.divider, { backgroundColor: colors.border }]} />
|
|
<ListItem
|
|
title="Privacy & Security"
|
|
leftIcon={
|
|
<IconContainer variant="subtle">
|
|
<Ionicons
|
|
name="shield-checkmark-outline"
|
|
size={20}
|
|
color={colors.textSecondary}
|
|
/>
|
|
</IconContainer>
|
|
}
|
|
rightElement={
|
|
<Ionicons
|
|
name="chevron-forward"
|
|
size={20}
|
|
color={colors.textTertiary}
|
|
/>
|
|
}
|
|
/>
|
|
</MinimalCard>
|
|
</View>
|
|
|
|
{/* Sign Out */}
|
|
<View style={styles.section}>
|
|
<MinimalButton
|
|
title="Sign Out"
|
|
onPress={confirmSignOut}
|
|
variant="danger"
|
|
size="lg"
|
|
/>
|
|
</View>
|
|
|
|
<Text
|
|
style={[
|
|
typography.caption,
|
|
{
|
|
color: colors.textTertiary,
|
|
textAlign: "center",
|
|
marginBottom: 100,
|
|
},
|
|
]}
|
|
>
|
|
Version 1.0.0
|
|
</Text>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
padding: 24,
|
|
paddingTop: 60,
|
|
},
|
|
profileCard: {
|
|
alignItems: "center",
|
|
paddingVertical: 32,
|
|
marginBottom: 24,
|
|
},
|
|
avatarContainer: {
|
|
position: "relative",
|
|
},
|
|
avatar: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
},
|
|
placeholderAvatar: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
section: {
|
|
marginBottom: 24,
|
|
},
|
|
sectionHeader: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
},
|
|
divider: {
|
|
height: 1,
|
|
marginLeft: 52,
|
|
},
|
|
currentGym: {
|
|
marginBottom: 16,
|
|
paddingBottom: 16,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: "rgba(0, 0, 0, 0.05)",
|
|
},
|
|
loadingContainer: {
|
|
paddingVertical: 20,
|
|
alignItems: "center",
|
|
},
|
|
gymScroll: {
|
|
marginHorizontal: -16,
|
|
},
|
|
gymScrollContent: {
|
|
paddingHorizontal: 16,
|
|
gap: 8,
|
|
},
|
|
gymChip: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 10,
|
|
borderRadius: 20,
|
|
borderWidth: 1.5,
|
|
marginRight: 8,
|
|
},
|
|
});
|