refactor: fetch profile with react-query

This commit is contained in:
Sosokker 2025-05-10 02:56:58 +07:00
parent 4f465fd617
commit f1e22594b9

View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useState } from "react";
import { import {
ActivityIndicator, ActivityIndicator,
Image, Image,
@ -23,22 +23,21 @@ export default function ProfileScreen() {
const { isAuthenticated } = useAuth(); const { isAuthenticated } = useAuth();
const isFocused = useIsFocused(); const isFocused = useIsFocused();
const [userId, setUserId] = useState<string | null>(null); const {
data: userData,
useEffect(() => { isLoading: isUserLoading,
let ignore = false; error: userError,
async function getUser() { } = useQuery({
const { data } = await supabase.auth.getUser(); queryKey: ["auth-user"],
if (!ignore) { queryFn: async () => {
setUserId(data?.user?.id ?? null); const { data, error } = await supabase.auth.getUser();
} if (error) throw error;
} return data?.user;
if (isAuthenticated) getUser(); },
else setUserId(null); enabled: isAuthenticated,
return () => { subscribed: isFocused,
ignore = true; });
}; const userId = userData?.id;
}, [isAuthenticated]);
const { const {
data: profileData, data: profileData,
@ -54,7 +53,6 @@ export default function ProfileScreen() {
subscribed: isFocused, subscribed: isFocused,
}); });
// Fetch user's foods for 'My Recipes'
const { const {
data: foodsData, data: foodsData,
isLoading: isFoodsLoading, isLoading: isFoodsLoading,
@ -69,7 +67,23 @@ export default function ProfileScreen() {
subscribed: isFocused && activeTab === "My Recipes", subscribed: isFocused && activeTab === "My Recipes",
}); });
// Remove static foodItems, use foodsData for My Recipes if (isUserLoading) {
return (
<SafeAreaView className="flex-1 justify-center items-center bg-white">
<ActivityIndicator size="large" color="#bb0718" />
</SafeAreaView>
);
}
if (userError) {
return (
<SafeAreaView className="flex-1 justify-center items-center bg-white px-4">
<Text className="text-red-600 font-bold text-center">
{userError.message || "Failed to load user data."}
</Text>
</SafeAreaView>
);
}
return ( return (
<SafeAreaView className="flex-1 bg-white" edges={["top"]}> <SafeAreaView className="flex-1 bg-white" edges={["top"]}>