mirror of
https://github.com/Sosokker/chefhai.git
synced 2025-12-19 05:54:08 +01:00
324 lines
10 KiB
TypeScript
324 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useAuth } from "@/context/auth-context";
|
|
import { getFoods } from "@/services/data/foods";
|
|
import { getProfile, updateProfile } from "@/services/data/profile";
|
|
import { supabase } from "@/services/supabase";
|
|
import { useIsFocused } from "@react-navigation/native";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import * as ImagePicker from "expo-image-picker";
|
|
import { useState } from "react";
|
|
import {
|
|
ActivityIndicator,
|
|
Image,
|
|
Modal,
|
|
Pressable,
|
|
ScrollView,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import uuid from "react-native-uuid";
|
|
|
|
export default function ProfileScreen() {
|
|
const [activeTab, setActiveTab] = useState("My Recipes");
|
|
const { isAuthenticated } = useAuth();
|
|
const isFocused = useIsFocused();
|
|
const queryClient = useQueryClient();
|
|
|
|
const {
|
|
data: userData,
|
|
isLoading: isUserLoading,
|
|
error: userError,
|
|
} = useQuery({
|
|
queryKey: ["auth-user"],
|
|
queryFn: async () => {
|
|
const { data, error } = await supabase.auth.getUser();
|
|
if (error) throw error;
|
|
return data?.user;
|
|
},
|
|
enabled: isAuthenticated,
|
|
staleTime: 0,
|
|
});
|
|
const userId = userData?.id;
|
|
|
|
const {
|
|
data: profileData,
|
|
error,
|
|
isLoading,
|
|
} = useQuery({
|
|
queryKey: ["profile", userId],
|
|
queryFn: async () => {
|
|
if (!userId) throw new Error("No user id");
|
|
return getProfile(userId);
|
|
},
|
|
enabled: !!userId,
|
|
staleTime: 0,
|
|
subscribed: isFocused,
|
|
});
|
|
|
|
const {
|
|
data: foodsData,
|
|
isLoading: isFoodsLoading,
|
|
error: foodsError,
|
|
} = useQuery({
|
|
queryKey: ["my-recipes", userId],
|
|
queryFn: async () => {
|
|
if (!userId) throw new Error("No user id");
|
|
return getFoods(userId);
|
|
},
|
|
enabled: !!userId && activeTab === "My Recipes",
|
|
staleTime: 0,
|
|
});
|
|
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [editUsername, setEditUsername] = useState("");
|
|
const [editImage, setEditImage] = useState<string | null>(null);
|
|
const [editLoading, setEditLoading] = useState(false);
|
|
const [editError, setEditError] = useState<string | null>(null);
|
|
|
|
const pickImage = async () => {
|
|
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
|
if (status !== "granted") {
|
|
setEditError("Permission to access media library is required.");
|
|
return;
|
|
}
|
|
|
|
const result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ["images"],
|
|
quality: 0.7,
|
|
allowsEditing: true,
|
|
});
|
|
|
|
if (!result.canceled) {
|
|
setEditImage(result.assets[0].uri);
|
|
}
|
|
};
|
|
|
|
const uploadImageToSupabase = async (uri: string): Promise<string> => {
|
|
const fileName = `${userId}/${uuid.v4()}.jpg`;
|
|
const response = await fetch(uri);
|
|
const blob = await response.blob();
|
|
|
|
const { error: uploadError } = await supabase.storage
|
|
.from("avatars")
|
|
.upload(fileName, blob, {
|
|
contentType: "image/jpeg",
|
|
upsert: true,
|
|
});
|
|
|
|
if (uploadError) throw uploadError;
|
|
|
|
const { data } = supabase.storage.from("avatars").getPublicUrl(fileName);
|
|
return data.publicUrl;
|
|
};
|
|
|
|
const handleSaveProfile = async () => {
|
|
setEditLoading(true);
|
|
setEditError(null);
|
|
|
|
try {
|
|
if (!editUsername.trim()) throw new Error("Username cannot be empty");
|
|
|
|
let avatarUrl = profileData?.data?.avatar_url ?? null;
|
|
|
|
if (editImage && editImage !== avatarUrl) {
|
|
avatarUrl = await uploadImageToSupabase(editImage);
|
|
}
|
|
|
|
const { error: updateError } = await updateProfile(
|
|
userId!,
|
|
editUsername.trim(),
|
|
avatarUrl
|
|
);
|
|
if (updateError) throw updateError;
|
|
|
|
setModalVisible(false);
|
|
await queryClient.invalidateQueries({ queryKey: ["profile", userId] });
|
|
} catch (err: any) {
|
|
setEditError(err.message || "Failed to update profile");
|
|
} finally {
|
|
setEditLoading(false);
|
|
}
|
|
};
|
|
|
|
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 (
|
|
<SafeAreaView className="flex-1 bg-white" edges={["top"]}>
|
|
<ScrollView className="flex-1">
|
|
<View className="items-center py-6">
|
|
<View className="w-[100px] h-[100px] rounded-full border border-gray-300 justify-center items-center mb-3 overflow-hidden">
|
|
<Image
|
|
source={
|
|
profileData?.data?.avatar_url
|
|
? { uri: profileData.data.avatar_url }
|
|
: require("@/assets/images/placeholder-food.jpg")
|
|
}
|
|
className="w-[96px] h-[96px] rounded-full"
|
|
/>
|
|
</View>
|
|
{isLoading ? (
|
|
<ActivityIndicator size="small" color="#bb0718" />
|
|
) : error ? (
|
|
<Text className="text-red-600 font-bold mb-3">
|
|
{error.message || error.toString()}
|
|
</Text>
|
|
) : (
|
|
<Text className="text-xl font-bold mb-3">
|
|
{profileData?.data?.username ?? "-"}
|
|
</Text>
|
|
)}
|
|
<TouchableOpacity
|
|
className="bg-red-600 py-2 px-10 rounded-lg"
|
|
onPress={() => {
|
|
setEditUsername(profileData?.data?.username ?? "");
|
|
setEditImage(profileData?.data?.avatar_url ?? null);
|
|
setEditError(null);
|
|
setModalVisible(true);
|
|
}}
|
|
>
|
|
<Text className="text-white font-bold">Edit</Text>
|
|
</TouchableOpacity>
|
|
|
|
{/* Edit Modal */}
|
|
<Modal
|
|
visible={modalVisible}
|
|
animationType="slide"
|
|
transparent
|
|
onRequestClose={() => setModalVisible(false)}
|
|
>
|
|
<View className="flex-1 justify-center items-center bg-black bg-opacity-40">
|
|
<View className="bg-white rounded-xl p-6 w-11/12 max-w-md shadow-lg">
|
|
<Text className="text-lg font-bold mb-4 text-center">
|
|
Edit Profile
|
|
</Text>
|
|
|
|
<Pressable className="items-center mb-4" onPress={pickImage}>
|
|
<Image
|
|
source={
|
|
editImage
|
|
? { uri: editImage }
|
|
: require("@/assets/images/placeholder-food.jpg")
|
|
}
|
|
className="w-24 h-24 rounded-full mb-2 bg-gray-200"
|
|
/>
|
|
<Text className="text-blue-600 underline">Change Photo</Text>
|
|
</Pressable>
|
|
|
|
<Text className="mb-1 font-medium">Username</Text>
|
|
<TextInput
|
|
className="border border-gray-300 rounded px-3 py-2 mb-4"
|
|
value={editUsername}
|
|
onChangeText={setEditUsername}
|
|
placeholder="Enter new username"
|
|
/>
|
|
{editError && (
|
|
<Text className="text-red-600 mb-2 text-center">
|
|
{editError}
|
|
</Text>
|
|
)}
|
|
|
|
<View className="flex-row justify-between mt-2">
|
|
<TouchableOpacity
|
|
className="bg-gray-300 py-2 px-6 rounded-lg"
|
|
onPress={() => setModalVisible(false)}
|
|
disabled={editLoading}
|
|
>
|
|
<Text className="text-gray-700 font-bold">Cancel</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
className="bg-red-600 py-2 px-6 rounded-lg"
|
|
onPress={handleSaveProfile}
|
|
disabled={editLoading}
|
|
>
|
|
{editLoading ? (
|
|
<ActivityIndicator size="small" color="#fff" />
|
|
) : (
|
|
<Text className="text-white font-bold">Save</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
</View>
|
|
|
|
{/* Tab Navigation */}
|
|
<View className="flex-row justify-around py-3">
|
|
{["My Recipes", "Likes", "Saved"].map((tab) => (
|
|
<TouchableOpacity
|
|
key={tab}
|
|
className={`py-2 px-4 ${
|
|
activeTab === tab ? "border-b-2 border-[#333]" : ""
|
|
}`}
|
|
onPress={() => setActiveTab(tab)}
|
|
>
|
|
<Text className="font-medium">{tab}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
<View className="h-px bg-[#EEEEEE] mx-4" />
|
|
|
|
{/* Recipes */}
|
|
{activeTab === "My Recipes" && (
|
|
<View className="flex-row flex-wrap p-2">
|
|
{isFoodsLoading ? (
|
|
<ActivityIndicator
|
|
size="small"
|
|
color="#bb0718"
|
|
style={{ marginTop: 20 }}
|
|
/>
|
|
) : foodsError ? (
|
|
<Text className="text-red-600 font-bold p-4">
|
|
{foodsError.message || foodsError.toString()}
|
|
</Text>
|
|
) : foodsData?.data?.length ? (
|
|
foodsData.data.map((item) => (
|
|
<View key={item.id} className="w-1/2 p-2 relative">
|
|
<Image
|
|
source={
|
|
item.image_url
|
|
? { uri: item.image_url }
|
|
: require("@/assets/images/placeholder-food.jpg")
|
|
}
|
|
className="w-full h-[120px] rounded-lg"
|
|
/>
|
|
<View className="absolute bottom-4 left-4 py-1 px-2 rounded bg-opacity-90 bg-white/80">
|
|
<Text className="text-[#333] font-bold text-xs">
|
|
{item.name}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
))
|
|
) : (
|
|
<Text className="text-gray-400 font-bold p-4">
|
|
No recipes found.
|
|
</Text>
|
|
)}
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|